nie wiem, czy o coś takiego Ci chodzi ale proszę...
pionowe:
<li><a href="coscoscos" title="coscos">cos
</a></li> <li><a href="" title=""></a></li> <li><a href="" title=""></a></li> <li><a href="" title=""></a></li> <li><a href="" title=""></a></li>
Kod
#navcontainer
{
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}
#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
poziome:
<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>
Kod
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #036;
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
background-color: #036;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}
li a:hover
{
background-color: #369;
color: #fff;
}
rozwijane poziome:
<li id="active"><a href="#" id="current">Item one
</a> <li id="subactive"><a href="#" id="subcurrent">Subitem one
</a></li> <li><a href="#">Subitem two
</a></li> <li><a href="#">Subitem three
</a></li> <li><a href="#">Subitem four
</a></li>
<li><a href="#">Item two
</a></li> <li><a href="#">Item three
</a></li> <li><a href="#">Item four
</a></li>
Kod
ul#navlist { font-family: sans-serif; }
ul#navlist a
{
font-weight: bold;
text-decoration: none;
}
ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul#navlist li { float: left; }
ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}
ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}
ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }