White Boxes Next to Subitems in Navigation Bar in Mozilla

Works fine in IE, but a white box appears next to each subitem in Mozilla.

[justachild20]

For some strange reason, when I view my website in IE, it appears fine, however, when I view it in Mozilla, there is a white box next to each subitem under my horizontal navigation bar. I'm sure the HTML portion is correct, using the <li> and <ul> tags, but I'm not sure what is wrong with my CSS portion.

Also, I noticed that in Mozilla, the height of the navigation bar increases.

#nav{position:absolute;width:98%;left:0c;list-style:none;z-index:99;background:#927B51;}

#nav li{float:right;padding:10px 35px;position:relative;;list-style:none}
#nav ul li a{font-size:9pt;;list-style:none}
#nav a{color:#FFF;font-weight:bold;font-size:10pt;text-decoration:none;white-space:nowrap;}
#nav a:hover{text-decoration:none;}
#nav li ul{display:none;list-style:none;position:absolute;top:28px;left:0;background:#FFF;border-bottom:2px solid #FFF;}
#nav li:hover ul{display:block;}
#nav li ul li{float:none;position:static;border-bottom:0;background:#A89166;font-size:9pt;padding:0;height:31px;width:215px;list-style:none;ist-style-image: none;}

#nav li ul li a{padding:6px 13px;display: inline-block;height:19px;width:auto;list-style:none;ist-style-image: none;}
#nav li ul li:hover{background:#80C31C;}
#nav li:hover{background:#80C31C;}

[MarkFilipak]

Because their default style is under-specified in the CSS spec., list tags are notoriously browser specific, especially in positioning of their bullets and horizontal positioning of their items. I would avoid using them in menus at all costs! You should be using only absolutely positioned DIVs in menus.

[rocknbil]

when I view it in Mozilla, there is a white box next to each subitem under my horizontal navigation bar.

I'm not sure I understand the problem, but if it's what I think it is, try removing the white space in the <li>'s

<ul>
<li><a href="#">link one</a></li><li><a href="#">link two</a></li><li><a href="#">link three</a></li><li><a href="#">link four</a></li>
</ul>

I've encountered issues with this that no CSS attributes fix, but this does.

If anything, I'd avoid absolute positioning . . .

list tags . . . I would avoid using them in menus at all costs!

Document semantics dictate a menu is a list of links and is entirely appropriate, and can be made cross browser compatible without too much trouble and **no** conditional hacks.

[tangor]

Like rockinbil I have used ul lists for menus without problem. This works for me just fine:

<ul>
<li>one
<li>two
</ul>