UrbanDweller Posted October 11, 2011 Share Posted October 11, 2011 Hey all, Im trying to edit a css/html drop down menu I got off the net, one thing I had to change was making classes for the main menubar buttons to allow for different editing for text etc. This issue is that the drop down menu on Unit Converters doesnt come down when hovered over, maybe due to the new class. If you could have a look and see where i made a mistake would be awesome!! Thanks a lot. HTML CODE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--[if IE]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="Untitled-2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="menu"> <ul> <li class="header"><a href="hs4.html">HOME</a></li> </ul> <ul> <li class="header"><a href="hs4.html">UNIT CONVERTERS</a></li> <ul> <li><a href="hs4.html">Length</a></li> <li><a href="hs5.html">Weight</a></li> <li><a href="hs6.html">Volume</a></li> </ul> </ul> <ul> <li class="header"><a href="hs4.html">CALCULATORS</a></li> <ul> <li><a href="">Age Calculator</a></li> </ul> </ul> <ul> <li class="header"><a href="hs4.html">SEND EQUATION</a></li> </ul> <ul> <li class="header"><a href="hs4.html">FAQ'S</a></li> </ul> <ul> <li class="header"><a href="hs4.html">CONTACT US</a></li> </ul> </div> </body> </html> CSS CODE: @charset "utf-8"; /* CSS Document */ #menu { background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: auto; float: left; } #menu a, .header a{ font: 11px/16px Verdana, Geneva, sans-serif; text-align: center; display: block; margin: 0; text-transform:uppercase; text-decoration: none; } #menu .header a{ font-weight: bold; padding: 8px 10px 0 10px; border-right: 1px solid #C7E0FC; height: 26px; color: #666; background-image: url(styles/menubar/menuline.gif); background-repeat:repeat-x; text-transform:uppercase; } #menu .header a:hover{ font-weight: bold; padding: 8px 10px 0 10px; text-align: center; height: 26px; color: #333; background-image: url(styles/menubar/menuline1.gif); background-repeat:repeat-x; text-transform:uppercase; color: #000; text-decoration: none; width:auto; } #menu ul ul li a { color: #000; background-image:url(styles/menubar/bg_04%5B3%5D.gif); } #menu ul ul li a:hover { color: #a00; background-image: url(styles/menubar/bg_04%5B2%5D.gif); } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } div#menu ul ul, div#menu ul .header a:hover ul ul, {display: none;} div#menu ul .header a:hover ul, div#menu ul ul li:hover ul, {display: block;} Quote Link to comment https://forums.phpfreaks.com/topic/248871-drop-down-menu-help/ Share on other sites More sharing options...
UrbanDweller Posted October 11, 2011 Author Share Posted October 11, 2011 Link to original css drop down menu http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#menref Quote Link to comment https://forums.phpfreaks.com/topic/248871-drop-down-menu-help/#findComment-1278035 Share on other sites More sharing options...
Frank P Posted October 11, 2011 Share Posted October 11, 2011 I haven't looked at the CSS yet, because you did something really weird with the HTML list. That's not the way to do it. Here is how to do it: Create a Drop-down/Fly-out Menu with CSS. I don't wanna claim that my tutorial is better (I will leave that judgment up to others), but I only offer forum support for that tut. And it offers the shortest and most simple code that I've seen so far, that's a simple fact. You should have it up and running in 10 to 20 minutes. Quote Link to comment https://forums.phpfreaks.com/topic/248871-drop-down-menu-help/#findComment-1278069 Share on other sites More sharing options...
Frank P Posted October 11, 2011 Share Posted October 11, 2011 For some strange reason the Modify button has become unavailable in a matter of minutes rather than hours, so I have to do this in a new post. I had a look at your CSS in the meantime, but that is really strange as well, perhaps as a result of the strange HTML. I would really urge you to read my tut, because the code can be much, much simpler. To set you up, here's the correct HTML list code for such a menu (= universal code): <div id="navDiv"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Unit Converters</a> <ul> <li><a href="#">Length</a></li> <li><a href="#">Weight</a></li> <li><a href="#">Volume</a></li> </ul> </li> <li><a href="#">Calculators</a> <ul> <li><a href="#">Age Calculator</a></li> </ul> </li> <li><a href="#">Send Equation</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> Quote Link to comment https://forums.phpfreaks.com/topic/248871-drop-down-menu-help/#findComment-1278094 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.