This issue can be caused by many things. If it works in some browsers but not all browsers you can point the cause to invalid code.
-if you havent already, USE A DIV to contain your ul.
-give your DIV a css class! "this will protect your html from the browsers default css"
-style your ul under the class you gave your DIV
HTML
<div class="menu">
<ul>
<li><a href="index.php" title="Home">Home</a></li>
<li>|</li>
<li><a href="account.php" title="Account">My Account</a></li>
<li>|</li>
<li><a href="#" title="Contact">Contact Us</a></li>
<li>|</li>
<li><a href="#" title="Why Us?">Why Us?</a></li>
<li>|</li>
<li><a href="#" title="News">Watch News</a></li>
<li>|</li>
<li><a href="#" title="Reviews">Watch Reviews</a></li>
<li>|</li>
<li><a href="#" title="Checkout">Checkout</a></li>
</ul></div>
CSS "define all ul elements used"
.menu ul {
(style the "UNORDERED LIST" containing your menu}
examples: Padding, Margin, border, backgrounds effecting the whole menu.
}
.menu ul li {
(Here you style your "LIST ITEMS" within your "UNORDERED LIST")
example: display:block; <--(used with background img to create buttons), padding or margin effecting each separate list item...
}
.menu ul li a {
(style the "anchor" containing your text)
}
.menu ul li a:hover {
(style the "anchor" for when it is hovered by a mouse)
example: color:#fff; <--(changes anchor text color to white when hovered)
}
Its also good practice when styling to give as descriptive styles as possible. even when not necessary... it can serve as something to fall back on.
I hope this helps.
- @webprutser -
second level menu's would validate using
<ul>
<li> first level item
<ul>second level item</ul>
</li>
<li> first level item 2</li>
</ul>
