Problem with SImple Linear Drop Down Menu

Question

priyam1309 0 Newbie Poster

16 Years Ago

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.

user-interface

3 Contributors
5 Replies
210 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by almostbob

Dani AI

Generated 7 Months Ago

A short, practical summary: the layout working but the submenu not appearing on hover usually comes down to either a CSS parse/selector problem or the submenu being present but not visible (covered or off-screen). ’s suggestion to absolutely position the submenu and ’s advice to use display rather than visibility were the right directions — two small bugs in the posted stylesheet stop those strategies from taking effect.

Two most likely causes observed in the code: a stray space in the hover selector (the browser treats that selector as invalid), and a missing semicolon in the anchor rule which can make the parser drop subsequent declarations. Fixing those will often restore the hover rule entirely. Also ensure each top-level list item is positioned relative so an absolutely positioned nested list is positioned against its parent, and give the nested list a higher z-index so it isn’t hidden behind other content.

A minimal, robust approach (concept only — not the same snippets already posted) is:

#menu li { position: relative; }
#menu li > ul { display: none; position: absolute; left: 0; top: 100%; white-space: nowrap; z-index: 999; }
#menu li:hover > ul { display: block; }
#menu li > ul li { display: inline-block; float: none; }

Troubleshooting checklist: use the browser dev tools to inspect the nested UL’s computed styles and the active CSS rules; force the hover state in dev tools; look for CSS parse errors in the console; temporarily outline the LI on :hover to verify the selector fires; verify HTML nesting and closing tags; if the submenu appears but wraps vertically, use inline-block / white-space:nowrap on the inner LIs to keep them horizontal. These steps tie together ’s and ’s points and should get the dropdown showing reliably.

All 5 Replies

macneato 29 Posting Pro in Training

16 Years Ago

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 866 Retired: passive income ROCKS

16 Years Ago

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

Edited 16 Years Ago by almostbob because: n/a

Reply to this topic

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.

priyam1309 0 Newbie Poster · Answer 1 · 2010-07-29T13:45:44+00:00

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 0 Newbie Poster · Answer 2 · 2010-07-29T22:14:59+00:00

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 866 Retired: passive income ROCKS · Answer 3 · 2010-07-30T00:37:32+00:00

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

thats why I start with an existing script, too lazy

Problem with SImple Linear Drop Down Menu

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers