I have added sub menu items to my main menu navigation, but they are not showing at all?
I have checked the css, and do not see any code that would hide the sub menu.
ul.art-hmenu {
display: inline-block;
vertical-align: middle;
padding-left: 13px;
padding-right: 13px;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
table, ul.art-hmenu {
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}
.art-hmenu {
float: right;
}
<ul class="art-hmenu menu-2">
<li class="menu-item-12 active"><a title="Home" href="http://agl.run-time.co.za/" class="active">Home</a> </li>
<li class="menu-item-14"><a title="Find Us" href="http://agl.run-time.co.za/find-us/">Find Us</a> </li>
<li class="menu-item-105"><a title="Facilities" href="http://agl.run-time.co.za/facilities/">Facilities</a> </li>
<li class="menu-item-207"><a title="Tours" href="http://agl.run-time.co.za/tours/">Tours</a> </li>
<li class="menu-item-229"><a title="Conferences" href="http://agl.run-time.co.za/conferences/">Conferences</a> </li>
<li class="menu-item-67"><a title="Contact" href="http://agl.run-time.co.za/contact/">Contact</a> </li>
<li class="menu-item-234"><a title="About Us" href="http://agl.run-time.co.za/about-us/">About Us</a> </li>
</ul>
What am I overlooking or doing wrong that is hiding my sub menu?
<ul class="art-hmenu menu-2">
<li class="menu-item-12 active"><a title="Home" href="http://agl.run-time.co.za/" class="active">Home</a>
</li>
<li class="menu-item-14"><a title="Find Us" href="http://agl.run-time.co.za/find-us/">Find Us</a>
<ul class="with-your-submenu-css-class">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li class="menu-item-105"><a title="Facilities" href="http://agl.run-time.co.za/facilities/">Facilities</a>
</li>
<li class="menu-item-207"><a title="Tours" href="http://agl.run-time.co.za/tours/">Tours</a>
</li>
<li class="menu-item-229"><a title="Conferences" href="http://agl.run-time.co.za/conferences/">Conferences</a>
<ul class="with-your-submenu-css-class">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li class="menu-item-67"><a title="Contact" href="http://agl.run-time.co.za/contact/">Contact</a>
</li>
<li class="menu-item-234"><a title="About Us" href="http://agl.run-time.co.za/about-us/">About Us</a>
</li>
</ul>
ul.art-hmenu {
display: inline-block;
vertical-align: middle;
padding-left: 13px;
padding-right: 13px;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
table, ul.art-hmenu {
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}
.art-hmenu {
float: right;
}
Related
I have such a menu page, on which php generates a list that I get from the database. Here is what it looks like this
I just can’t find a simple list style that would fit here, and I also can’t figure out how to make me show only the title, but when I click on it, then the rest of the information will appear. Tell me, please, how this can be done to look good. Thank you in advance!
I tried this, but it's not what I want to get:
body {
font-family: Helvetica;
}
ol {
counter-reset: myCounter;
margin-left: 0;
padding-left: 5px;
color: rgb(100, 100, 100);
display: inline-block;
}
li {
position: relative;
padding-left: 3em;
margin: 0.45em 0;
list-style: none;
line-height: 1.8em;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
li:hover {
color: rgb(0, 0, 0);
}
li:before {
content: counter(myCounter);
counter-increment: myCounter;
position: absolute;
top: 0;
left: 0;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
padding: 0px;
color: #fff;
background: #2980b9;
font-weight: bold;
text-align: center;
border-radius: .9em;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
li:hover:before {
background-color: #2ecc71;
}
li li:before {
background-color: #3498db;
}
li:after {
position: absolute;
top: 2.1em;
left: 0.9em;
width: 2px;
height: calc(100% - 2em);
content: '';
background-color: rgb(203, 203, 203);
z-index: 0;
}
li:hover:after {
background-color: #2ecc71;
}
li li {
font-size: 0.8em;
}
1\2:
<!DOCTYPE html>
<html>
<head>
<title>Films</title>
<link href="css/button.css" rel="stylesheet">
<?php require 'menu.php'; ?>
</head>
<body>
<button type="button">Sort by ASC</button>
<?php require 'allFilms.php'; ?>
</body>
</html>
2\2:
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
<?php
require 'queries.php';
$query = new Queries();
$films = $query->getAllFilms();
foreach ($films as $film) {
echo "<li style='margin-left: 50px;>Title: {$film['name']}</>";
echo " <ul>
<li>Year: {$film['year']}</li>
<li>Format: {$film['format']}</li>
<li>Actors: {$film['actors']}</li>
</ul>
</li>";
}
?>
</ul>
I want to do something like this:IMAGE
Generated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Films</title>
<link href="css/button.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<nav role='navigation' class="menu">
<ul>
<li>All Films</li>
<li>Tools
<ul>
<li>Add Film</li>
<li>Delete Film</li>
</ul>
</li>
<li>Search</li>
<li>Import Films</li>
</ul>
</nav></head>
<body>
<button type="button">Sort by ASC</button>
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
<li style='margin-left: 50px;>Title: First2</> <ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li><li style='margin-left: 50px;>Title: First2</> <ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.0</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.0</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.1</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.1</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.2</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.2</li>
</ul>
you have multiple error, it better first to learn validating your HTML on https://validator.w3.org/nu/
and here example for clickable pure CSS collapsible tree menu, you need to create <label for="cXX"> and <input type="checkbox" id="cXX"> and set cXX with same value for each item.
ul,li{padding:0}
#menutree li{list-style:none}
#menutree > li{margin-left:5px;color:#8a2be2;font-weight:700;position:relative}
#menutree>li:before{content:"+";padding-right:5px}
#menutree>li>ul>li{margin-left:20px;color:green;font-weight:400}
#menutree>li>ul>li:before{content:"-";padding-right:5px}
li .menu_label + input[type="checkbox"]{position:absolute;left:0;opacity:0;cursor:pointer;top:0}
li .menu_label{cursor:pointer}
li .menu_label+input[type=checkbox]+ul>li{display:none}
li .menu_label+input[type=checkbox]:checked+ul>li{display:block}
<ul id="menutree">
<li>
<label class="menu_label" for="c1">Title: First2</label>
<input type="checkbox" id="c1" />
<ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li>
<li>
<label class="menu_label" for="c2">Title: Second</label>
<input type="checkbox" id="c2" />
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I</li>
</ul>
</li>
<li>
<label class="menu_label" for="c3">Title: Second.0</label>
<input type="checkbox" id="c3" />
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.0</li>
</ul>
</li>
</ul>
You cannot have show and hide functions without Javascript.
Javascript tells your browser what to do. CSS is for styling only.
To achieve what you want, you will need to combine the two.
Here is an example: https://stackoverflow.com/a/35409945/2286743
You can do this using a href link that contains # followed by the id of the element you want to expand
<li class="movie" id="movie6">Title: Second.2
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.2</li>
</ul>
</li>
in conjunction with the :target CSS pseudo-class
.movie:target {
height: 6em;
}
.movie-list {
list-style: none;
padding: 0;
}
.movie {
height: 1em;
overflow: hidden;
margin-bottom: 8px;
transition: height 0.5s;
}
.title {
font-weight: bold;
cursor: pointer;
color: black;
text-decoration: none;
}
li {
line-height: 1.5em;
}
.movie:target {
height: 6em;
}
li ul {
padding: 8px;
}
<ul class="movie-list">
<li class="movie" id="movie1">Title: First2
<ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li>
<li class="movie" id="movie2">Title: First2
<ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li>
<li class="movie" id="movie3">Title: Second
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I</li>
</ul>
</li>
<li class="movie" id="movie4">Title: Second.0
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.0</li>
</ul>
</li>
<li class="movie" id="movie5">Title: Second.1
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.1</li>
</ul>
</li>
<li class="movie" id="movie6">Title: Second.2
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.2</li>
</ul>
</li>
</ul>
However, the generated HTML code you posted is not valid. There is the style property that does not have the closing quote and there is a closing tag with no name and that does not close any tags.
How to place toggle (show/hide) button near parent element?
When I press button to show child elements, this button jumps to the bottom of list, but I need it to stay in place - near parent element.
An example of current situation is under the question.
$(".has_children").append("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).prev().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
Add the button before the child element.And in jquery toggle the element next to the button
$(".has_children").find('ul.children').each(function(){
var html = $("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
html.insertBefore($(this));
})
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<!--<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
</li>
<li class="cat-item cat-item-32 has_children">Parent product category2
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27 has_children">Parent product category3
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
This works:
$(".has_children>a").after("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
I have the basic navigation bar for all my pages in header.php so how do it make it active so people know which page they are on via the navigation bar
HTML
<ul class="menu">
<li>HOME</li>
<li>SMARTRETAIL FEATURES</li>
<li>FREQUENTLY ASKED QUESTIONS</li>
<li>CUSTOMERS</li>
<li>CONTACT US</li>
<li>USER GUIDE</li>
</ul>
CSS
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.menu li {
float: left;
border-right: 1px solid black;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.menu li a:hover:not(.active) {
background-color: #000000;
}
.active {
background-color: #2676f5;
}
if php refer to the answer here How to set current page "active" in php
in short
// set this above the include of the nav
$activePage = "offnungszeiten.php";
$pages = array();
$pages["index.php"] = "Öffnungszeiten";
$pages["features.php"] = "Sauna";
$pages["faq.php"] = "Frauensauna";
$pages["custom.php"] = "Beauty Lounge";
$pages["feiertage.php"] = "Feiertage";
//menu.php
<?php foreach($pages as $url=>$title):?>
<li>
<a <?php if($url === $activePage):?>class="active"<?php endif;?> href="<?php echo $url;?>">
<?php echo $title;?>
</a>
</li>
<?php endforeach;?>
Try this:
<ul class="menu">
<li>HOME</li>
<li>SMARTRETAIL FEATURES</li>
<li>FREQUENTLY ASKED QUESTIONS</li>
<li>CUSTOMERS</li>
<li>CONTACT US</li>
<li>USER GUIDE</li>
I am getting the following result in my web browser:
The checkmarks appear slightly raised with respect to the text, but I would like the text to be all lined up. What should I do?
I have the following HTML:
<ul class="train">
<li>
<p><?php echo $pageContents->getContents("comptrainLI1"); ?></p>
<ul class="traininner">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>SQL</li>
<li>WordPress CMS</li>
<li>Magento CMS</li>
</ul>
</li>
<li>
<p><?php echo $pageContents->getContents("comptrainLI2"); ?></p>
<ul class="traininner">
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Java</li>
</ul>
</li>
</ul>
and CSS:
div#mainContent ul.train {
list-style-position: inside;
list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");
font-size: 18pt;
}
div#mainContent ul.train ul.traininner {
padding-left: 20px;
list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");
}
I don't think it's possible to know the reason for the misalignment based on the limited code you posted in your question. It could be something in your PHP. So I've posted a general solution.
li {
list-style-type: none;
margin-bottom: 5px;
}
ul.traininner li::before {
content: '';
display: inline-block;
vertical-align: bottom;
padding: 10px 20px 0 0;
height: 10px;
width: 10px;
background-image: url("http://i.imgur.com/F05JSPD.png");
background-repeat: no-repeat;
}
<ul class="train">
<li>
<ul class="traininner">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>SQL</li>
<li>WordPress CMS</li>
<li>Magento CMS</li>
</ul>
</li>
<li>
<ul class="traininner">
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Java</li>
</ul>
</li>
</ul>
jsFiddle
here comes the HTML:
<ul id="plugins_fullMenu">
<li> Főoldal </li>
<li> Bemutatkozás </li>
<li> Termékek </li>
<li> Kategóriák
<ul class="plugins_fullMenu first">
<li> kateg1 </li>
<li> kateg2 </li>
<li> prognyelv
<ul class="plugins_fullMenu ">
<li> C# </li>
<li> C </li>
<li> C++ </li>
</ul></li>
</ul></li>
<li> Linkek </li>
<li> Admin felület
<ul class="plugins_fullMenu">
<li> a </li>
<li> b </li>
</ul></li>
<li> veg </li></ul>
and the CSS:
#plugins_fullMenu, .plugins_fullMenu, #plugins_fullMenu .plugins_fullMenu li
{
margin:0px;
padding:0px;
display: table;
}
#plugins_fullMenu li
{
float:left;
display: inline;
cursor:pointer;
list-style:none;
padding:0px 0px 0px 0px;
border:1px #000 solid;
position:relative;
}
#plugins_fullMenu li ul.first
{
left:-1px; top:100%;
background-color: red;
}
li, li a
{
color:#000;
text-decoration:none;
padding: 10px 0px 10px 0px;
}
#plugins_fullMenu .plugins_fullMenu li
{
width:100%;
/* text-indent:10px;
line-height:30px;
margin-right:10px;*/
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:red;
}
#plugins_fullMenu li a
{
display:block;
width:inherit;
height:inherit;
}
ul.plugins_fullMenu
{
display:none;
}
#plugins_fullMenu li:hover > a, #plugins_fullMenu li:hover
{
color:#fff;
background:green;
}
li:hover > .plugins_fullMenu
{
display:block;
position:absolute;
width:auto;
top:-1px;
left:50%;
z-index:1000;
border:1px #000 solid;
}
li:hover
{
position:relative;
z-index:2000;
}
now the problem is the two submenu of "admin felület" overlaps it. It should not, whats wrong?
ok. as suggested
your fist submenu class is plugins_fullMenu first while the next one is only plugins_fullMenu