Why do menu bullets show up on my menus? - html

Question

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>Most Popular Artists</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.
HTML:
<nav id="top_menu">
<img src="media/images/logo_large.jpg">
<ul class="dropdown">
<li class="dropdown_trigger">
NEWS
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
<li>
<li class="dropdown_trigger">
SOCIAL
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</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;
}

Answer 1

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

Answer 2

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