CODEWITHSUNDEEP
htmlcsslistnavigation
Mawii
Mawii

Reputation: 23

Unable to remove bullet points in CSS navigation bar

I have a navigation bar in styled using CSS. I can't seem to remove the bullet points using list-style-type: none. Or override it with !important; function. This is what my html and css look like. This works fine in chrome but the error shows up in firefox and 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;}

Upvotes: 1

Views: 10244

Answers (3)

Sean Montgomery
Sean Montgomery

Reputation: 9

add list-style: none; to your second CSS selector, li {}

Upvotes: 1

Srinivasan Lakshmanan
Srinivasan Lakshmanan

Reputation: 433

You have to add list-style:none to the li tag

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

Demo Link: https://jsfiddle.net/hellosrini/zy5z5gdh/

Upvotes: 1

repzero
repzero

Reputation: 8402

You have list-style-type in the .menu class tag which is a div (list-style-type is a style for <li> tags not divs)

change 

 li {float: left;
   }

to

 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>

Upvotes: 4

Related Questions