Im making a website for a college project and seem to be having trouble with a menu system. I have a css menu which works. I want to add a drop down section to one of the buttons. I have kind got it to work in a way 
When i roll over the button the menu drops down but when i roll over one of the sub menu items its goes horizontal. The drop down part uses seperate CSS and i think the other menu CSS menu style is intefering with it. Any help would be much appriciated!
I would like team1,2,3,4 to drop down under the team button
When i roll over the button the menu drops down but when i roll over one of the sub menu items its goes horizontal. The drop down part uses seperate CSS and i think the other menu CSS menu style is intefering with it. Any help would be much appriciated!
Code:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Code:
<div class="blue">
<div id="slatenav">
<ul id="nav">
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">News</a></li>
<li class="teamdrop">
<a href="#">Teams</a>
<ul id="" class="t">
<li><a href="#">Team1</a></li>
<li><a href="#">Team2</a></li>
<li><a href="#">Team3</a></li>
<li><a href="#">Team4</a></li>
</ul>
</li>
<li><a href="" title="">League Table</a></li>
<li><a href="" title="">Fixtures</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Contact Us</a></li>
<li><a href="" title="">Links</a></li>
</ul>
</div>
</div>
</div>I would like team1,2,3,4 to drop down under the team button
Code:
.blue
#slatenav{
position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
background:transparent url(images/blueslate_background.gif) repeat-x top left; font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;}
.blue #slatenav ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}
.blue #slatenav ul li{
display:block;
float:left;
margin:0 1px 0 0;
position: relative;
}
.blue #slatenav ul li a{
display:block;
float:left;
color:#D5F1FF;
text-decoration:none;
padding:14px 22px 0 22px;
height:28px;
}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
color:#fff;background:
transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}
.t {
width: 150px;
border-bottom: 1px solid #ccc;
}
.t li {
position: relative;
}
li .t {
position: absolute;
left: 0px;
top: 20px;
display: none;
}
/* Styles for Menu Items */
.t li a {
display: block;
text-decoration: none;
padding: 5px;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html .t li { float: left; height: 1%; }
* html .t li a { height: 1%; }
/* End */
.t li a:hover { } /* Hover Styles */
li .t li { display: block; } /* Sub Menu Styles */
li .t li a:hover { float: none; display: block; } /* Sub Menu Styles */
li:hover .t, li.over .t { display: block; }
Last edited:
