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..

Recommended Answers

All 2 Replies

well I figured it out.. should someone had the ambition to respond to this post with an answer rather than scavage CSS code, others would know how to create this menu further with a dropdown list. Would have made my life much easier. But I'm taking my knowledge with me since this forum is so helpful. I know where not to ask further questions.

Most people use the son of suckerfish method, which you'll find at www.htmldog.com

Not sure what you're getting at with your second post. Late on a Sunday night, in my time zone, when your post was made, I tend not to look at the forum. So if you were expecting an instant response, do allow those who help to do their own things occasionally.

And do come back for more help, of course.

PS your method above will not work in all browsers (display:table and display:table-cell are not fully supported). Also you seem to have a few extra classes you don't actually need. But son of suckerfish will help you get round these errors.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.