problem with CSS dropdown menu

[eddioot]

Hi all,

i am trying to create my first CSS dropdown menu and i am facing 2 problems.

1. It is a horizontal dropdown and i want to make the subpages horizontal as well. Whatever i do, the dropdown part is still vertical.

2. I want the background of the dropdown part to show even while the menu items are not visible but that doesn't seem to work either..

My html is:

<ul id="navbar">
	<li><a href="index.html">Item 1</a><ul>
    	<li><a href="#">subitem 1</a></li>
		<li><a href="#">subitem 2</a></li></ul>
    </li>
    <li><a href="index3.html">Item 2</a><ul>
    	<li><a href="#">subitem 3</a></li>
		<li><a href="#">subitem 4</a></li></ul>
    </li>
        
</ul>

My CSS is:

#navbar{
	position:absolute;
	top:0;
	margin:0;
	padding:0;
}

#navbar li{
	list-style:none;
	float:left;
	background-color:#999999;
}

#navbar li a {
	display:block;
	padding:5px;
	text-decoration:none;
}

#navbar li ul {
	display:none;
	}

#navbar li:hover ul, #navbar li.hover ul{
	position:absolute;
	display:inline;
	left:0;
	width:100px;
	margin:0;
	padding:0;
	}

#navbar li:hover li, #navbar li.hover li{
	float:left;
	display:inline;
}

Can you guys see what i do wrong?

See the picture for an example how i want it to be I know the color and content of my code is'nt correct yet. Just trying to get the layout for now.

 

[Frank]

You're making a couple of mistakes. For general info on how to create a drop-down menu, see the 4th tutorial on my signature page. The only thing you have to change to have a horizontal sub menu is delete this line:

#navDiv ul ul li {
        clear: left;
        }

You should clear the left float, however, but now at the very first element that follows the menu.

Regarding the second question, you cannot have the background displayed and the foreground not. What you can do is create a dark blue section under the menu and make the menu sub level go over that, while giving that sub menu the same background color as the section.

 

[eddioot]

Thanks Frank,

i was able to fix it with your solution

 

[Frank]

Graag gedaan.