我已经按照以下教程创建了一个简单的菜单栏,我放在一个简单的菜单栏中,但似乎无法理解为什么" list-style-type:none;& #34;或" list-style:none;"不会工作。
我已经看过类似的问题,似乎可以通过确保覆盖嵌套OL中的列表样式的覆盖没有发生但我没有运气来解决
我出错的任何想法?
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;
}
答案 0 :(得分:1)
只需使用
ul {
list-style: outside none none;
}
或使用如:(给id)
<ul id="menu_bar">
点击此处查看更新的Fiddle。
<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>
答案 1 :(得分:0)
#menu-bar ul
只会定位ul
#menu-bar
,它是ul
的直接子项,风格不会传播到嵌套的.noJS {
list-style:outside none none;
}
内。
要定位嵌套的ul,您可以直接通过它的类来定位它:
#menu-bar ul li ul {
list-style:outside none none;
}
或钻入嵌套结构:
{{1}}
答案 2 :(得分:0)
您可以使用
list-style: none;
或
list-style-type: none;
这两种方法都可以,但是第一种方法更短,但结果相同。