ich habe hier ein Template, in dem sich das Menü nicht richtig einfügen lasst. Bei dem Template ist das einzige Menü ein Topmenü und es ist im Original Template so aufgebaut:
Code: Alles auswählen
<div id="menulinks">
<a class="active" href="#"><span>Home</span></a>
<div class="menulines"></div>
<a href="#"><span>Services</span></a>
<div class="menulines"></div>
<a href="#"><span>Pricing</span></a>
<div class="menulines"></div>
<a href="#"><span>Contact Us</span></a>
<div class="menulines"></div>
</div>
}
#menulinks {
width:875px;
height:55px;
background-image:url(images/menulinks.png);
clear:both;
padding-left:25px;
}
* html #menulinks a { /* Filter for IE6 to prevent li stacking */
float: left;
text-decoration: none;
}
* html #menulinks a span { /* Filter for IE6 to prevent li stacking */
float: left;
text-decoration: none;
}
#menulinks a {
padding-left:14px;
height:50px;
background-image:none;
display:block;
color:#FFFFFF;
text-decoration:none;
float:left;
font-size:14px;
font-weight:bold;
}
#menulinks a span {
padding-left:16px;
padding-right:30px;
padding-top:17px;
height:35px;
display:block;
background-image:none;
text-decoration:none;
cursor:pointer;
}
#menulinks a:hover, #menulinks a.active {
background-image:url(images/menulinks_left.png);
background-position:top left;
text-decoration:none;
color:#333333;
}
#menulinks a:hover span, #menulinks a.active span {
background: url(images/menuhover.png) right top no-repeat;
text-decoration:none;
}
.menulines {
width:2px;
height:53px;
float:left;
display:block;
background-image:url(images/menuline.png);
}