Denne virker IKKE på mobilen!
INKLUDERT: IE HACK for "Eric Meyer's Strengthening the links". This is just a hack for ie bug in "Eric Meyer's Strengthening the links" list. IE(6) show an unexspected bottom-border for each li. This hack solves the problem giving a fixed width for ul and a.
ul#navlist
{
width: 158px;
\width: 160px;
w\idth: 158px;
padding: 0px;
border: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 12px verdana,helvetica,arial,sans-serif;
background: #808080;
}
ul#navlist li
{
list-style: none;
margin: 0px;
border: 0px;
border-top: 1px solid #808080;
}
ul#navlist li a
{
display: block;
width: 122px;
\width: 158px;
w\idth: 122px;
padding: 4px 8px 4px 8px;
border: 0px;
border-left: 20px solid #aaaabb;
background: #ccccdd;
text-decoration: none;
text-align: right;
}
ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }
ul#navlist li a:hover
{
border-color: #ff9000;
color: #ffffff;
background: #000d33;
}
<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div>