Dropdown menu fails to appear

Question

emiola 0 Junior Poster in Training

14 Years Ago

Hello,
Kindly take a look at the code (use view source) of this webpage .

The "About Us" button is supposed to have a dropdown menu but for a reason/reasons bearting me, the dropdown fails to show up on mouse hover.
See the css file
Advice needed please.

See Css code below:

body {
	background-position: center top;
	background: #0000F2 url('PNGS/bodybground2.png') no-repeat center
top;
	width: auto;
	margin: 0px;
}
#navdiv {
	margin: 100px 0px 0px 0px;
	height: 0px;
	width: 970px;
	color: #FFFFFF;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 8pt;
	clip: rect(0px, auto, auto, auto);
	list-style-type: none;
	float: none;
	clear: both;
	display: block;
}
ul#navdiv {
	list-style-type: none;
	width: 970px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 17px;
	top: 0px;
	left: 34px;
}
#navdiv li {
	background-image: url('PNGS/buttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	height: auto;
	text-align: center;
	line-height: 54px;
	float: left;
	width: 119px;
	margin-left: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#navdiv li a:link {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	vertical-align: middle;
	text-align: center;
	background-image: url('PNGS/buttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	text-decoration: none;
	color: #FFFFFF;
	width: 120px;
	height: 32px;
}
#navdiv li a:visited {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	vertical-align: middle;
	text-align: center;
	background-image: url('PNGS/buttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	text-decoration: none;
	color: #FFFFFF;
}

#navdiv li a:hover {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	vertical-align: middle;
	text-align: center;
	background-image: url('PNGS/buttonbgroundhover.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center;
	color: #FFFFFF;
}
#navdiv li a:active {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	vertical-align: middle;
	text-align: center;
	background-image: url('PNGS/buttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	text-decoration: none;
	color: #FFFFFF;
}

#mainpagediv {
	background-color: #000040;
	width: 970px;
	height: auto;
	margin: 0px;
}
#navdiv li ul.submenu {
	background-position: left top;
	list-style-type: none;
	display: none;
	padding: 0px;
	margin: 0px;
	position: absolute;
	width: 132px;
	top: 178px;
	background-repeat: no-repeat;
	background-attachment: inherit;
	float: left;
	left: 179px;
	height: 294px;
}
#navdiv li ul.submenu li {
	padding: 0px;
	margin: 0px;
	background-image: url('PNGS/submenubuttonbground.png');
	background-repeat: no-repeat;
	background-position: left top;
	text-align: center;
	line-height: 20px;
	width: 118px;
	display: block;
	clear: left;
	float: left;
}
#navdiv li ul.submenu li a {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	background-image: url('PNGS/submenubuttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
}
#navdiv li ul.submenu li a:link {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	background-image: url('PNGS/submenubuttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
	clear: left;
	position: relative;
	z-index: 1000;
	width: 118px;
}
#navdiv li ul.submenu li a:hover {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	background-image: url('PNGS/submenubuttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
	clear: left;
	position: relative;
	z-index: 1000;
	width: 118px;
}
#navdiv li ul.submenu li a:active {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	background-image: url('PNGS/submenubuttonbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
	clear: left;
	position: relative;
	z-index: 1000;
	width: 118px;
}
#contentdiv {
	float: left;
	width: 612px;
	height: auto;
	margin: 15px 2px 15px 5px;
	padding: 0px;
}
#banner img {
	margin: 0px;
	width: 611px;
	height: 250px;
}
#content p {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	color: #FFFFFF;
	line-height: 15px;
	vertical-align: top;
	text-align: left;
}
p {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 8pt;
	color: #FFFFFF;
	line-height: 20px;
	vertical-align: top;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	white-space: normal;
}
#banner {
	border: 1px solid #CCCCCC;
	height: 250px;
	width: 612px;
}
#paragraphdiv {
	padding: 5px;
	border: 1px dashed #0000CC;
	width: 612px;
	height: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}
#sidebardiv {
	margin: 15px 2px 15px 5px;
	background-position: center top;
	width: 335px;
	height: auto;
	float: left;
	background-image: url('PNGS/sidebarheaderbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
}
#sidebar1div {
	margin: 0px;
	background-position: center top;
	border: 1px dashed #0000CC;
	width: 338px;
	height: auto;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url('PNGS/sidebarheaderbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	padding-top: 2px;
}
#sidebar2div {
	margin: 15px 0px 0px 0px;
	background-position: center top;
	border: 1px dashed #0000CC;
	width: 338px;
	height: auto;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url('PNGS/sidebarheaderbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	padding-top: 2px;
}
#sidebar3div {
	margin: 15px 0px 0px 0px;
	background-position: center top;
	border: 1px dashed #0000CC;
	width: 338px;
	height: auto;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url('PNGS/sidebarheaderbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	padding-top: 2px;
}
h1 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 20pt;
	font-weight: bolder;
	color: #FF860D;
	vertical-align: top;
	text-align: left;
	font-style: italic;
	font-variant: normal;
}
h3 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	line-height: normal;
	vertical-align: top;
	text-align: left;
}
#threecolumndiv {
	padding: 15px 6px 15px 6px;
	width: 960px;
	height: 200px;
	border: 1px dashed #0000FF;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
}
#threecolumnleftdiv {
	width: 315px;
	height: 200px;
	float: left;
	border-right-style: dashed;
	border-right-color: #0000F2;
	border-right-width: 1px;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url('PNGS/threecolumnheaderbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;
	padding-top: 3px;
}
#threecolumnmiddlediv {
	width: 315px;
	height: 200px;
	float: left;
	border-right-style: dashed;
	border-right-color: #0000F2;
	border-right-width: 1px;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url('PNGS/threecolumnheaderbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;
	padding-top: 3px;
}
#threecolumnrightdiv {
	width: 315px;
	height: 200px;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url('PNGS/threecolumnheaderbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;
	padding-top: 3px;
}
#footerdiv {
	width: 970px;
	height: 25px;
	background-color: #FFCC00;
}
.footertext {
	color: #000066;
	vertical-align: middle;
	text-align: center;
}
#footerinnerdiv {
	width: 960px;
	height: 25px;
	background-color: #FFCC00;
	border: 1px dashed #000066;
	margin: 5px;
	background-image: url('PNGS/footerinnerdivbground.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center bottom;
}

Emiola.

user-interface web-design

2 Contributors
1 Reply
118 Views
6 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by simplypixie

Dani AI

Generated 9 Months Ago

Two quick, concrete things to check (and a simple fix).

is right about the duplicate id — an id must be unique in the document. That alone can make CSS selectors fail or behave unpredictably. Also, the submenu in the posted CSS is hidden by default but there is no accompanying hover rule to flip it visible. Combined with the nav container being collapsed (zero height / clipped) and the submenu using fixed pixel offsets, the dropdown either never becomes visible or is positioned where the mouse cannot reach it.

Fixes to apply (try them in this order):

Make the HTML sensible and unique. Use a single id for the nav wrapper and a class for repeating lists. Example structure:
```
<nav id="mainNav">
<ul class="menu">
 <li>
   <a href="#">About</a>
   <ul class="submenu">...</ul>
 </li>
</ul>
</nav>
```

Anchor the submenu to each list item and show it on hover. Add relative positioning to the li, absolute positioning to the submenu, and a hover rule that reveals it:

#mainNav .menu li { position: relative; }
#mainNav .menu li > .submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; }
#mainNav .menu li:hover > .submenu { display: block; }

Remove layout rules that hide the nav wrapper (height:0, clip, overflow:hidden if present). Use percent or 100% for submenu placement instead of large fixed pixel values so the dropdown sits immediately below its parent.

Troubleshooting tips: use the browser dev tools to toggle the submenu display and to inspect computed position and z-index. If the submenu is being covered, raise its z-index. If you want touch support, add a small click toggle script or a keyboard-accessible focus rule. For reference on id uniqueness and positioning behavior see the MDN docs on the id attribute and on CSS positioning: id attribute and position.

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.

simplypixie 123 Posting Pro in Training · Answer 1 · 2012-02-29T02:15:33+00:00

I am not saying that this is what is causing the problem (though it may be) but you have 2 id's named the same (you can only use one id per page, otherwise it needs to be a class):

<div id="navdiv">
			<!--about us submenu list ends-->
		<ul id="navdiv">