Problem with SImple Linear Drop Down Menu

[priyam1309]

I am trying to create a simple horizontal dropdown menu using CSS. I have developed the code so far but there are two problems -
1. Positioning of the list items
2. Hovering can not make the sub-menu visible.
I have attached few screen shots.
the HTML code is as below -

<div id="menu">
		<ul>
			<li class="current_page_item"><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Photos</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Links</a>
            <ul>
            	<li><a href="#">Movies</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Gadgets</a></li>
                <li><a href="#">Technology</a></li>
            </ul>
            </li>
			<li><a href="#">Contact</a></li>
		</ul>
</div>

The CSS code is below -

/* Menu */

#menu {
	width: 940px;
	height: 120px;
	margin: 0 auto;
	padding: 0;
	background: url(images/img01.jpg) repeat-x left top;
}

#menu ul {
	margin: 0px 0px 0px 10px;
	padding: 12px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	
}

#menu li {
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
}

#menu a {
	display: block;
	height: 26px;
	width: 100px
	margin-right: 2px;
	margin-bottom: 10px;
	padding: 10px 20px 0px 20px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
	
}

#menu ul ul {
	visibility: hidden;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
	color: #FFF;
	text-shadow: 0 0 0.2em #BABABA, 0 0 0.2em #BABABA, 0 0 0.2em #BABABA, 0 0 0.2em #BABABA;
}

#menu ul li: hover > ul{
	visibility: visible;
}

#menu .current_page_item a {
	color: #FFFFFF;
	}

Please help in solving this.
Thanks.

[macneato]

I would try something like this

#menu ul li ul {
margin:0;
padding:0;
position:absolute;
top:26px;
width:300px;
visibility: hidden;
 }

Note I specified a width, if you don't, chances are it will display as a vertical menu instead of horizonal. Hope this helps

[almostbob]

px are a poor choice, the menu will work on Your pcs, but not on anyone elses with a different screen resolution window size basefont
0(zero) is dimensionless and will cause compliant browsers to throw the css definition away if it represented as 0px

#menu ul { margin:0 0 0 10px; padding:12px 0 0 0; list-style:none; }

lose the indenting of code, it is unneccessary, adds size to the file, is not needed by the browser, and does not improve readability for the developer. use an editor with code sysntax highlighting

did you consider any of the premade horizontal css menus available from sourceforge hotscripts phpscripts purecss (and others) to use as a development base, many are very well internally documented and explain what why when the author is using particular code.

invisible elements takes up space on the page. (the whitespace in your menu is the size of the invisible submenus) Use the "display" property to create invisible elements that do not take up space! (display:none; display:block; display:inline; )
and/or
Set the Z-index of the menu higher than 0 for other content to slide under it,
Set the z-index of the submenus higer than the menus, elements with different z-indexes can occupy the same x-y space on the page, then toggling visibility does not leave blanks, the higher z-index appears on top of the lower z-index, equivalent to page numbers

position:absolute; sets the element like the daniweb top menu, relative to the html page
position:fixed; sets the element like the daniweb bottom menu, relative to the window so can be made to remain onscreen

[priyam1309]

I would try something like this

#menu ul li ul {
margin:0;
padding:0;
position:absolute;
top:26px;
width:300px;
visibility: hidden;
 }

Note I specified a width, if you don't, chances are it will display as a vertical menu instead of horizonal. Hope this helps

Hi Macneato,
I the problem comes when i require a horizontal menu. If a make position = absoluete, i get what i want will all menus lined up appropriatly. But i require a horizontal menu.

[priyam1309]

px are a poor choice, the menu will work on Your pcs, but not on anyone elses with a different screen resolution window size basefont
0(zero) is dimensionless and will cause compliant browsers to throw the css definition away if it represented as 0px

#menu ul { margin:0 0 0 10px; padding:12px 0 0 0; list-style:none; }

lose the indenting of code, it is unneccessary, adds size to the file, is not needed by the browser, and does not improve readability for the developer. use an editor with code sysntax highlighting

did you consider any of the premade horizontal css menus available from sourceforge hotscripts phpscripts purecss (and others) to use as a development base, many are very well internally documented and explain what why when the author is using particular code.

invisible elements takes up space on the page. (the whitespace in your menu is the size of the invisible submenus) Use the "display" property to create invisible elements that do not take up space! (display:none; display:block; display:inline; )
and/or
Set the Z-index of the menu higher than 0 for other content to slide under it,
Set the z-index of the submenus higer than the menus, elements with different z-indexes can occupy the same x-y space on the page, then toggling visibility does not leave blanks, the higher z-index appears on top of the lower z-index, equivalent to page numbers

position:absolute; sets the element like the daniweb top menu, relative to the html page
position:fixed; sets the element like the daniweb bottom menu, relative to the window so can be made to remain onscreen

Hi Almostbob,

One of the issues is solved. I used display instead of visibility and the menu items are lined up properly.. but still there's another issue. once the sub menu items are hidden i can not reveal them if i hover the mouse over the menu item. Any clues???

Moreover, other Hover properties work fine like creation of shadow of the menu items...

[almostbob]

in css .element:hover { display:inline;} ( or display:block; )

thats why I start with an existing script, too lazy