problem with CSS dropdown menu

eddioot · 12-30-2011, 07:06 PM

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:

HTML Code:

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

Code:

#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 · 12-31-2011, 09:19 AM

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:

HTML Code:

#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 · 01-01-2012, 10:04 AM

Thanks Frank,

i was able to fix it with your solution

Frank · 01-01-2012, 06:30 PM

Graag gedaan.

12-30-2011, 07:06 PM	#1
eddioot New Member Join Date: Feb 2010 Posts: 8	problem with CSS dropdown menu 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: HTML Code: <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: Code: #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. Attached Images

12-31-2011, 09:19 AM	#2
Frank Bronze Member Join Date: Sep 2011 Posts: 59	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: HTML Code: #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. __________________ . How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam. Last edited by Frank; 12-31-2011 at 09:31 AM.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-01-2012, 10:04 AM	#3
eddioot New Member Join Date: Feb 2010 Posts: 8	Thanks Frank, i was able to fix it with your solution

01-01-2012, 06:30 PM	#4
Frank Bronze Member Join Date: Sep 2011 Posts: 59	Graag gedaan.