Alan
Alan

Reputation: 822

Why do menu bullets show up on my menus?

I'm trying to create menus for a webpage using HTML and CSS. When the menus are displayed those nasty bullets appear. I don't want them. How do I get rid of them?

Also, the submenus need to allow for variable length strings. I had to specify a width: 80px; property for the .dropdown li element. If I didn't, all the menus got squished together.

For the submenus, if I have a lengthy li like this:

<li><a href="#">Most Popular Artists</a></li>

All that gets displayed is the word "Most".

So I need two things solved: Get rid of the bullets, and make the submenus handle variable length strings.

enter image description here

HTML:

<nav id="top_menu">
<img src="media/images/logo_large.jpg">
  <ul class="dropdown">
    <li class="dropdown_trigger">
      <a href="#">NEWS</a>
      <ul>
        <li><a href="#">Subitem1</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></li>
      </ul>
    <li>
    <li class="dropdown_trigger">       
      <a href="#">SOCIAL</a>
      <ul>
        <li><a href="#">Subitem1</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></li>
      </ul>
    </li>
  </ul> 
</nav>

CSS:

#top_menu{
 position: relative;
 top:35px;
 left: 90px;
 width:660px;
 height:55px;
 background-color: black;
 border:1px solid black;
 opacity:0.6;
 filter:alpha(opacity=60); /* For IE8 and earlier */
}
.dropdown {
background: black;
border: 1px solid black;
float: right;
padding: 1px 0 0 1px;
margin: 0 0 20px;
line-height: 55px;
}

.dropdown a {
background: black repeat-x;
border: 1px solid black;
border-top-width: 0;
color: white;
display: block;
line-height: 25px;
overflow: hidden;
text-decoration: none;
height: 25px;
}

.dropdown a:hover {
color: #30B3FF;
background: #666;
}

.dropdown ul a {
background: black;
}

.dropdown > li {
list-style: none;
position: relative;
text-align: left;
font: bold 12px Tahoma; 
*display: inline-block;
width: 80px;
/* IE7 hack to make inline-block work right */
*zoom: 1;
display: inline;

}

.dropdown li.dropdown_trigger {

display: inline;
float: left;
margin: 0 0 0 -1px;
}

.dropdown ul {
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}

.dropdown ul {
display: none;
}

.dropdown li.dropdown_trigger:hover ul {
display: block;
}

Upvotes: 1

Views: 300

Answers (2)

Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

Add list-style:none; to your unordered (bulleted) list to hide the default bullets. Apply this role to ul in this way you will not have to apply it to each ul.class every time.

ul {
    list-style:none;
    padding:0;
    margin:0;
}

Upvotes: 0

Giacomo1968
Giacomo1968

Reputation: 26074

You should add list-style-type: none; to your main ul CSS like so:

.dropdown ul {
list-style-type: none;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}

.dropdown ul {
display: none;
}

And looking at that you can consolidate those two items & format them for readability as well:

.dropdown ul {
  display: none;
  list-style-type: none;
  background: black;
  border: 1px solid black;
  border-top-width: 0;
  position: absolute;
  top: 26px;
  left: -1px;
  z-index: 9999;
}

And past that you can even add the !important to force an override:

.dropdown ul {
  display: none;
  list-style-type: none !important;
  background: black;
  border: 1px solid black;
  border-top-width: 0;
  position: absolute;
  top: 26px;
  left: -1px;
  z-index: 9999;
}

Upvotes: 1

Related Questions