Question

我有一个使用CSS样式的导航栏。我似乎无法使用list-style-type：none删除项目符号。或者用！important覆盖它;功能。这就是我的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类标签中有list-style-type，这是一个div（list-style-type是<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

您必须将list-style：none添加到li标签

<强> 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 {}

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

3 个答案: