How to build a stylesheet dropdown: horizontal.
<td align=”center” valign=”middle” class=”nav”><div>
<ul id=”p7menubar“>
<li><a href=”index.asp” class=”nav” id=”home-active”>HOME</a></li>
<li><a href=”visie.asp” class=”nav” id=”visie-active”>VISIE</a></li>
<li><a href=”buro.asp” class=”nav” id=”buro-active”>BURO</a></li>
<li><a href=”activiteiten.asp” class=”nav” id=”activiteiten-active”>ACTIVITEITEN</a></li>
<li><a href=”nieuwbouw.asp” class=”nav” id=”realisaties-active”>REALISATIES</a>
<ul>
<li><a href=”nieuwbouw.asp”>Nieuwbouw</a></li>
<li><a href=”verbouwing.asp”>Verbouwing</a></li>
<li><a href=”interieur.asp”>Interieur</a></li>
</ul>
</li>
<li><a href=”contact.asp” class=”nav” id=”contact-active”>CONTACT</a></li>
<li><a href=”http://www.mappy.com/BtoB/Proximedia/map?map.id=3023663;map.provider=Proximedia;&xml.state.wanted_lang=nl” target=”_blank” class=”nav”>STRATENPLAN</a></li>
</ul>
</div></td>
Stylesheet:
#home #home-active, #visie #visie-active, #buro #buro-active, #activiteiten #activiteiten-active, #realisaties #realisaties-active, #contact #contact-active {color:#666666; text-decoration: none;}
/* CSS for dropdown menu */
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
margin-left:25px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
#p7menubar a {
display: block;
padding-right:23px;
}
/*#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(images/p7PM_dark_south.gif);
background-repeat: no-repeat;
background-position: right center;
}*/
#p7menubar li {
float: left;
width: auto;
}
#p7menubar li img { display:block;}
/*#p7menubar li ul, #p7menubar ul li {
width: 12em;
}*/
#p7menubar ul li a {
color: #565656;
font-family: Arial, Helvetica, sans-serif;
border-right: 0;
padding: 3px;
text-decoration:none;
float:left;
}
#p7menubar li ul {
position: absolute;
display: none;
background-color: none;
padding:0;
margin:0;
}
#p7menubar li ul li, #p7menubar li ul li{
float:left;
padding:0;
margin:0;
}
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #666666;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
padding:0;
margin:0;
}
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
color:#99CC00;
float:left;
background-color: transparent;
padding-right:10px;
}
#p7menubar ul a:hover {
background-color: #000!important;
color: #FFFFFF!important;
padding-right:10px;
}
/*#p7menubar li {width: auto;}*/
Javascript page:
function P7_ExpMenu(){ //v1.1.0.2 by PVII-www.projectseven.com
if(navigator.appVersion.indexOf(”MSIE”)==-1){return;}
var i,k,g,lg,r=/\s*p7hvr/,nn=”,c,cs=’p7hvr’,bv=’p7menubar‘;
for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
lg=g.getElementsByTagName(”LI”);if(lg){for(k=0;k<lg.length;k++){
lg[k].onmouseover=function(){c=this.className;cl=(c)?c+’ ‘+cs:cs;
this.className=cl;};lg[k].onmouseout=function(){c=this.className;
this.className=(c)?c.replace(r,”):”;};}}}nn=i+1;}
}