MediaSvcsUnlimited Posted June 2, 2016 Share Posted June 2, 2016 Hi, I'm trying to do a dropdown menu with CSS. The dropdown menu appears whether the mouse is over the menu or not. if someone could help me figure out what 's wrong, I would really appreciate it. z<php require_once('functions.php'); ?> <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Untitled Document</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel = "stylesheet" href = "Bixler.css"> <style type="text/css"> nav { padding-top:2%; width:30%; height:27px; margin-left:auto; margin-right:auto; } nav ul { list-style-type:none; } nav > ul li a { padding:50px; } nav li { float:left; } nav > ul > li > ul { display:none; position:absolute; } nav > ul > li:hover > ul { display:block; } #logo { width:304px; margin-left:auto; margin-right:auto; } h3 { color:red; text-align:center; } #contactInfo { float:left; } #servicesList, #eocialMedia { float:right; width: 33%; } article { float:left; width:35%; height:45%; margin-left:10%; background-color:#FFFFFF; } aside { float:right; width:30%; height:35%; margin-right:10%; background-color:#FFFFFF; } footer { background-color:#000000; overflow:auto; color:#C4C4C4; clear:both; } </style> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <ul> <li><a href="#">Agents</a></li> <li><a href="#">Locations</a></li> </ul> <li><a href="#">Services</a></li> <li><a href="services.php" tabindex="3" accesskey="S">Services</a></li> <li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li> <li><a href="contact.php" tabindex="5" accesskey="C">Contact</a></li> </ul> </nav> <figure id="logo"> <img src="assets/bixlerlogo.png" width="304" height="88" alt=""/> </figure> <h3>Service Beyond The Contract </h3> </header> <article> </article> <aside> </aside> <footer> <div id="contactInfo"> Bixler Insurance <br/> 1043 South 13th St. <br /> Decatur, IN 46733<br /> Phone: (260)-724-3438 </div> <div id="eocialMedia"> social media icons </div> <div id="servicesList"> list of services </div> </footer> </body> </html> Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 2, 2016 Share Posted June 2, 2016 1. This HTML is messed up. The Child UL element is NOT within an LI element. 2. The width of 30% for the nav container causes the parent links to wrap if the page width is not big enough (which will cause further problem with the 'dropdown' child elements). I set it at a fixed 500px to prevent problems in my test code - change to whatever works for you 3. The padding of 50px seems to be excessive. I think that was a mistake. I changed it to 5px Here is your same code with fixes for the above issues. I stripped out all the unrelated elements <html> <head> <style type="text/css"> nav { padding-top:2%; width:500px; height:27px; margin-left:auto; margin-right:auto; } nav ul { list-style-type:none; } nav li { float: left; } nav > ul li a { padding-left: 5px; } nav > ul > li:hover > ul { display:block; } nav > ul > li > ul { display:none; position:absolute; } </style> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a> <ul> <li><a href="#">Agents</a></li> <li><a href="#">Locations</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="services.php" tabindex="3" accesskey="S">Services</a></li> <li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li> <li><a href="contact.php" tabindex="5" accesskey="C">Contact</a></li> </ul> </nav> </header> </body> </html> Quote Link to comment Share on other sites More sharing options...
MediaSvcsUnlimited Posted June 3, 2016 Author Share Posted June 3, 2016 ah I see the problem now! Thanks so much for the help Quote Link to comment 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.