无法删除CSS导航栏中的项目符号点

Question

我有一个使用CSS风格的导航栏。我似乎无法使用list-style-type：none删除项目符号点。或者用！重要它;功能。这就是我的HTML和CSS的样子。这在Chrome中正常工作，但在Firefox和IE中显示错误。

<div class="menu"> 
<ul> 
<li><a href="index1.html">Home</a></li> 
<li><a href="aboutus.html">About</a></li> 
<li class="dropdown"> 
<a href="read.html">Read</a> 
<ul class="drop-content"> 
<li><a href="#">Latest Issue</a></li> 
<li><a href="#">Prose</a></li> 
<li><a href="#">Poetry</a></li> 
<li><a href="#">Transalations</a></li> 
</ul> 
</li> 
<li class="dropdown"> 
<a href="research.html">Research</a> 
<ul class="drop-content"> 
<li><a href="#">Publications</a></li> 
<li><a href="#">Deaprtments</a></li> 
<li><a href="#">Apply</a></li> 
</ul> 
</li> 
<li><a href="newsandevents.html">News and Events</a></li> 
</ul> 
</div> 

CSS

.menu {list-style-type: none; 
    height: 50px; 
    display: block; 
    font-family: Helvetica;} 

    li {float: left; 
    } 




    a {display: block; 
    text-align: center; 
    text-decoration: none; 
    color: #000000; 
    padding: 15px 15px 15px 15px; 
    overflow: hidden; 
    background-color:#009899;} 

Answer 1

你有列表样式类型的.menu类标签，它是一个div（列表样式类型为<li>标签不div的样式）

变更

li {float: left; 
    } 

到

li {float: left; 
    list-style-type:none; 
    } 

.menu { 
 
    height: 50px; 
 
    display: block; 
 
    font-family: Helvetica;} 
 

 
    li {float: left; 
 
    list-style-type:none; 
 
    } 
 
    a {display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #000000; 
 
    padding: 15px 15px 15px 15px; 
 
    overflow: hidden; 
 
    background-color:#009899;}

<div class="menu"> 
 
<ul> 
 
<li><a href="index1.html">Home</a></li> 
 
<li><a href="aboutus.html">About</a></li> 
 
<li class="dropdown"> 
 
<a href="read.html">Read</a> 
 
<ul class="drop-content"> 
 
<li><a href="#">Latest Issue</a></li> 
 
<li><a href="#">Prose</a></li> 
 
<li><a href="#">Poetry</a></li> 
 
<li><a href="#">Transalations</a></li> 
 
</ul> 
 
</li> 
 
<li class="dropdown"> 
 
<a href="research.html">Research</a> 
 
<ul class="drop-content"> 
 
<li><a href="#">Publications</a></li> 
 
<li><a href="#">Deaprtments</a></li> 
 
<li><a href="#">Apply</a></li> 
 
</ul> 
 
</li> 
 
<li><a href="newsandevents.html">News and Events</a></li> 
 
</ul> 
 
</div>

Answer 2

您必须添加列表样式：无到L1标签

HTML：

<div class="menu"> 
<ul> 
<li><a href="index1.html">Home</a></li> 
<li><a href="aboutus.html">About</a></li> 
<li class="dropdown"> 
<a href="read.html">Read</a> 
<ul class="drop-content"> 
<li><a href="#">Latest Issue</a></li> 
<li><a href="#">Prose</a></li> 
<li><a href="#">Poetry</a></li> 
<li><a href="#">Transalations</a></li> 
</ul> 
</li> 
<li class="dropdown"> 
<a href="research.html">Research</a> 
<ul class="drop-content"> 
<li><a href="#">Publications</a></li> 
<li><a href="#">Deaprtments</a></li> 
<li><a href="#">Apply</a></li> 
</ul> 
</li> 
<li><a href="newsandevents.html">News and Events</a></li> 
</ul> 
</div> 

CSS

.menu {list-style-type: none; 
    height: 50px; 
    display: block; 
    font-family: Helvetica;} 

    li {float: left; 
    list-style:none; 
    } 




    a {display: block; 
    text-align: center; 
    text-decoration: none; 
    color: #000000; 
    padding: 15px 15px 15px 15px; 
    overflow: hidden; 
    background-color:#009899;} 

演示链接：https://jsfiddle.net/hellosrini/zy5z5gdh/

Answer 3

添加list-style: none;你的第二个CSS选择，li {}