Hello, I am just racking my head I am still learning more on unordered lists etc... I have created a ul link list that displays the current page. This was a challenge. now I must create a drop down hover menu in CSS. I have viewed a ton of tutorials and they all do it differently I would need something closer to how I made it to get anywhere.
The CSS for my current horizontal current page menu
#nav-container {
background:url(images/nav.gif) repeat-x;
height:79px;
}
#nav {
padding-top:45px;
width: 970px;
}
#nav-links {
display:table;
margin:0 auto;
list-style:none;
background:url(right2.gif) no-repeat right bottom;
white-space:nowrap;
}
#nav-links li {
display:table-cell;
}
#nav-links li.first {
background:url(images/left2.gif) no-repeat left bottom;
}
#nav-links li a {
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding:10px 15px;
text-decoration:none;
color:#ccc;
font-weight:bold;
}
#nav-links li a.current {
background:url(images/arrow.png) no-repeat center top;
color:#fff;
}
It is implemented as such which includes the sub list links:
<div id="nav-container">
<div id="nav">
<ul id="nav-links">
<li class="init"><a href="#" class="current">Home</a>
<ul>
<li class="item"><a href="#"><span>Results</span></a> </li><!--child1-->
<li class="item"><a href="#"><span>Rules</span></a></li><!--child2-->
<li class="item"><a href="#"><span>Credits</span></a></li><!--child3-->
</ul>
<li><a href="scrap2.html?current=two">Link</a></li>
<li><a href="scrap3.html?current=three">Link</a></li>
</ul>
</div>
</div>
Could someone kindly help me out and show me what to do? I saw a similar post on here but again, wasn't set up this way. I am not sure if the "table" definition is throwing things off or what..