I can't get my dropdown menu to show under the menu. Here is the html: <nav id="nav"> <li><a href="index.html">Homepage</a></li> <li><a href="twocolumn1.html">Services</a> <ul> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </li> <li><a href="twocolumn2.html">Two Column #2</a></li> <li><a href="packages.html" class="current-page-item">Packages</a> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test2</a></li> </ul> </li> <li><a href="threecolumn.html">Three Column</a></li> </nav> HTML: And my css: #header nav { position: absolute; right: 40px; top: 1px; line-height: 84px; font-size: 1.3em; letter-spacing: -1px; } #header nav li { display: inline; list-style: none; } #header nav li ul { display:block; } #nav ul{ background:#fff; background:rgba(255,255,255,0); list-style:none; position:absolute; left:-9999px; } #nav ul li{ padding-top:0px; float:none; display: block; } #nav ul a{ white-space:nowrap; } #nav li:hover ul{ left:50%; z-index:auto; } #nav li:hover a{ background-color: #007897; background-image: -moz-linear-gradient(top, #007b99, #007897); background-image: -webkit-linear-gradient(top, #007b99, #007897); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897)); background-image: -ms-linear-gradient(top, #007b99, #007897); background-image: -o-linear-gradient(top, #007b99, #007897); background-image: linear-gradient(top, #007b99, #007897); box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1); text-decoration:underline; } #nav li:hover ul a{ text-decoration:none; } #nav li:hover ul li a:hover{ background:#333; } #header nav a { display: inline-block; text-decoration: none; color: #fff; padding: 0 25px 0 25px; outline: 0; } #header nav a.current-page-item { background-color: #007897; background-image: -moz-linear-gradient(top, #007b99, #007897); background-image: -webkit-linear-gradient(top, #007b99, #007897); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897)); background-image: -ms-linear-gradient(top, #007b99, #007897); background-image: -o-linear-gradient(top, #007b99, #007897); background-image: linear-gradient(top, #007b99, #007897); box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1); } #header nav a:hover { background-color: #0882a1; background-image: -moz-linear-gradient(top, #0782a0, #077d9b); background-image: -webkit-linear-gradient(top, #0782a0, #077d9b); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b)); background-image: -ms-linear-gradient(top, #0782a0, #077d9b); background-image: -o-linear-gradient(top, #0782a0, #077d9b); background-image: linear-gradient(top, #0782a0, #077d9b); box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05); } Code (markup): any ideas?
why u using #header ?? try like this .. remove header #nav { position: absolute; right: 40px; top: 1px; line-height: 84px; font-size: 1.3em; letter-spacing: -1px; } #nav li { display: inline; list-style: none; } #nav li ul { display:block; } and working
Hi, this is simple code... You watch that code and find your error.. <!DOCTYPE html> <html> <head> <title>Example of HTML Menu</title> <style type="text/css"> ul { list-style-type:none; margin:1; padding:1; padding-top:7px; padding-bottom:5px; } li { display:inline; } a:link,a:visited { font-weight:bold; color:#CC3DD; background-color:#90EE90; text-align:center; padding:6px; text-decoration:italic; text-transform:uppercase; } a:hover,a:active { background-color:#FF1493; } </style> </head> <body> <ul> <li><a href="#News">News</a></li> <li><a href="#Technology">Technology</a></li> <li><a href="#Sports">Sports</a></li> <li><a href="#Country">Country</a></li> <li><a href="#Video">Video</a></li> <li><a href="#Download">Download</a></li> </ul> </body> </html>
Uhm, you do know NAV is NOT a replacement for UL, right? You don't have a UL/OL under NAV... so it's assumed or wildly guessed at. LI can ONLY be children of those two tags. (and are the only valid children of same). Because it's "assumed" you are likely having this code: #nav ul{ background:#fff; background:rgba(255,255,255,0); list-style:none; position:absolute; left:-9999px; } Code (markup): targeting the outer assumed UL in addition to the one you wrote in the code. This is why VALID markup is so important. ...and why HTML 5's laissez-faire loosening of the structural rules is idiotic halfwit nonsense. NOT that NAV serves a legitimate purpose (and as pointed out your #header probably doesn't either) if you have properly ordered headings and HR, but the same can be said of SECTION... just part of why as a markup specification, HTML 5 would make a really good Penn and Teller Showtime special. Of course if it's the 'only' NAV under #heading, it probably doesn't need an ID unless you're pointing at it with # in a URL. (accesskeys?) Really these 'snippets' really aren't giving enough of a picture; the markup around the menu could be as at fault as your menu itself. Of course since you appear to be knee deep in HTML 5 nonsense, that should go without saying. -- edit -- BTW, absolute positioning the entire NAV tag is most likely horrifically broken methodology. Don't know what you are doing for layout on the page, but dimes to dollars that's not how to go about it. Is there some new garbage book or tutorial out there telling people to absolute position everything or something? I'm seeing this WAY too much lately, and it's just absolute rubbish!