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

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 class 标签中有 list-style-type 是 div （list-style-type 是 <li> 标签的样式，不是divs)

改变

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

演示 Link：https://jsfiddle.net/hellosrini/zy5z5gdh/

Answer 3

将 list-style: none; 添加到第二个 CSS 选择器，li {}

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

Unable to remove bullet points in CSS navigation bar

html

css

navigation

list