Dropdown Menu Using Images?

HTML & CSS
1

I’ve followed a few tutorials trying to set up a dropdown menu. I’ve done it before using text, but I’m trying to do it this time with images. The test page is at www.mverminski.com/test/index2.htm

2

The page is returning a 404.

Using images should be exactly the same as using text. What is your issue exactly…?

3

Sorry. I was in a rush. This is the correct link to the test page http://mverminski.com/test/index2

If you click on it you can see the issue right away. The nav buttons are all on top of each other. I haven’t created the images for the drop down items yet so I’m just using the same image as the parent item. I’ve played with the CSS and still can’t get it to work right.

This is the HTML

<div id="navbar">
<ul id="nav">

<li><a href="composites.htm"><img src="images/BTN_Composites.jpg" alt="Composites"></a>
<ul>
<li><a href="composites.htm"><img src="images/BTN_Composites.jpg" alt="Composites"></a></li>
<li><a href="composites.htm"><img src="images/BTN_Composites.jpg" alt="Composites"></a></li>
</li>
</ul>

<li><a href="portraits.htm"><img src="images/BTN_Portraits.jpg" alt="Portraits"></a></li>

<li><a href="conventions.htm"><img src="images/BTN_Conventions.jpg" alt="Conventions"></a></li>

<li><a href="customers.htm"><img src="images/BTN_NewCustomers.jpg" alt="New Customers"></a></li>
</ul>

</div>

and the CSS…

#navbar {
	width: 900px;
	margin-top: -34px;
	margin-left: 149px;
}

#nav {
	width: 100%;
	padding: 0px;
	height: 1em; }
#nav li {
	list-style: none;
	padding: 10px;
	 }
#nav li a {
	display: block;
	margin-top:-34px;
	padding: 0px;
 }
#nav li ul {
	display: none; 
	width: 10em; /* Width to help Opera out */
}
#nav li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#nav li:hover li {
	float: none; }
4

Well of course they are all on top of each other :). You have each anchor set to -34px. Remove that. On #nav li{} you have 10px padding default. That’s causing the vertical spacing between the menu items.

As for the dropdown placement, add something like this


#nav li{position:relative;}
#nav li li{position:static;}
#nav li ul{top:0;left:100%;}

Should help with the nav placement :).

5

I’m still having an issue with this. I’ve been playing with the CSS, but can’t get it to work right. It seems like every change I make doesn’t result in an actually physical change when previewing the site.

CSS…


#nav {
	width: 100%;
	padding: 0px;
	height: 1em; }
#nav li {
	position: relative;
	list-style: none;
	padding: 0px;
	 }
	
#nav li a {
	display: block;
	padding: 0px;
 }
#nav li ul {
	display: none; 
	background: #db7872;
	width: 10em; /* Width to help Opera out */
	top: 0;
	left: 100%;
}

#nav li li{position:static;}


#nav li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#nav li:hover li {
	float: none; }
6

Could you explain the issue? And what you would like to be achieved? (Feel free to use images)