在CSS中删除UL中的要点

时间:2015-03-12 10:02:27

标签: html css

我已经按照以下教程创建了一个简单的菜单栏,我放在一个简单的菜单栏中,但似乎无法理解为什么" list-style-type:none;& #34;或" list-style:none;"不会工作。

我已经看过类似的问题,似乎可以通过确保覆盖嵌套OL中的列表样式的覆盖没有发生但我没有运气来解决

Example I looked at

我出错的任何想法?

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;
}

3 个答案:

答案 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;

这两种方法都可以,但是第一种方法更短,但结果相同。