I've followed the following tutorial in creating a simple menu bar which I place in a but can't seem to get my head round why the "list-style-type: none;" or "list-style: none;" won't work.
I've had a look at similar issues which seemed to be solved by ensuring overriding of the list styles in the nested OL isn't taking place but no luck on my side
Any ideas where I'm going wrong?
HTML:
<section class="menu_bar_section">
<ul id="menu_bar">
<li><a href="#">Lorem</a></li>
<li><a href="#">Mauricii</a></li>
<li>
<a href="#">Periher</a>
<ul class="noJS">
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">Tyrio</a></li>
<li><a href="#">Quicumque</a></li>
</ul>
<section>
CSS:
/* Section */
.menu_bar_section {
width: 100%;
float: left;
color: #999999;
background: #FFCC00;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
}
/* Structure
------------------------------------------*/
#menu_bar,
#menu_bar ul {
list-style-type: none;
}
#menu_bar {
float: left;
}
#menu_bar > li {
float: left;
}
#menu_bar li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu_bar ul {
position: absolute;
display: none;
z-index: 999;
}
#menu_bar ul li a {
width: 80px;
}
#menu_bar li:hover ul.noJS {
display: block;
}
/* Main menu
------------------------------------------*/
#menu_bar {
font-size: 20px;
background: #2f8be8;
}
#menu_bar > li > a {
color: #fff;
font-weight: bold;
}
#menu_bar > li:hover > a {
background: #f09d28;
color: #000;
}
/* Submenu
------------------------------------------*/
#menu_bar ul {
background: #f09d28;
}
#menu_bar ul li a {
color: #000;
}
#menu_bar ul li:hover a {
background: #ffc97c;
}
Just use
ul {
list-style: outside none none;
}
Or use like: (give id)
<ul id="menu_bar">
Check updated Fiddle here.
<style> .menu_bar_section { width: 100%; float: left; color: #999999; background: #FFCC00; font-family:'Trebuchet MS', Tahoma, Sans-serif; } #menu_bar, #menu_bar ul { list-style-type: none; } #menu_bar { float: left; } #menu_bar > li { float: left; } #menu_bar li a { display: block; height: 2em; line-height: 2em; padding: 0 1.5em; text-decoration: none; } #menu_bar ul { position: absolute; display: none; z-index: 999; } #menu_bar ul li a { width: 80px; } #menu_bar li:hover ul.noJS { display: block; } #menu_bar { font-size: 20px; background: #2f8be8; } #menu_bar > li > a { color: #fff; font-weight: bold; } #menu_bar > li:hover > a { background: #f09d28; color: #000; } #menu_bar ul { background: #f09d28; } #menu_bar ul li a { color: #000; } #menu_bar ul li:hover a { background: #ffc97c; } </style>
<ul id="menu_bar"> <li><a href="#">Lorem</a></li> <li><a href="#">Mauricii</a></li> <li> <a href="#">Periher</a> <ul class="noJS"> <li><a href="#">Hellenico</a></li> <li><a href="#">Genere</a></li> <li><a href="#">Indulgentia</a></li> </ul> </li> <li><a href="#">Tyrio</a></li> <li><a href="#">Quicumque</a></li> </ul>
You could use
list-style: none;
or
list-style-type: none;
Both of them works but the first is shorter but it gets the same result.
#menu-bar ul
will only target the ul
which is a direct child of #menu-bar
, the style wont propagate to nested ul
's within.
To target the nested ul you can either target it directly by it's class:
.noJS {
list-style:outside none none;
}
or by drilling into the nested structure:
#menu-bar ul li ul {
list-style:outside none none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.