My design features a main navigation that is rotated 90 degrees, while the sub-menu remains horizontally aligned.
<div id="nav">
<ul>
<li><a href="#">Woonaccessoires</a></li>
<li><a href="#">Lampenkappen</a></li>
<li><a href="#">Sieraden</a></li>
<li><a href="#">Geuren</a></li>
<li><a href="#">Tassen</a></li>
<li><a href="#">Aanbiedingen</a></li>
<li><a href="#">Bedrijven</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
The CSS part looks like this:
#nav {
width: 60%;
float: left;
margin: 0 0 3em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
list-style-type:none;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}
#nav li a {
display: block;
padding: 8px 2px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
It seems that there are inconsistencies in spacing between the li tags. How can I resolve this issue? I've tried adjusting margins and paddings without success.
Should I create separate classes for each li tag?
I'm looking for some assistance on this matter.
Regards,
Roland