MediaSvcsUnlimited 0 Posted July 1, 2016 (edited) Hi, can someone help me understand why the navar isn't horizontal? <!doctype html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 3.3.6 Starter</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style type="text/css"> nav { background-color:#000000; padding-top:2%; width:34%; /*height:27px;*/ margin-top:2%; margin-left:auto; margin-right:auto; padding-left:3%; } nav ul li { list-style-type:none; display:inline; width: 400px; position:relative; } nav a { background-color:#000000; display:block; text-decoration:none; color:red; } nav ul ul { /*submenus under nav */ display:none; } nav li:hover .submenu { display:block; } </style> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a> <ul class="submenu"> <li><a href="#">Agents</a></li> <li><a href="#">Locations</a></li> </ul> </li><!--end of about us menu list --> <li><a href="#">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> </body> </html> Edited July 1, 2016 by MediaSvcsUnlimited Quote Share this post Link to post Share on other sites
Muddy_Funster 99 Posted July 1, 2016 try adding the following: ... nav{ display:inline-block; ... Quote Share this post Link to post Share on other sites
MediaSvcsUnlimited 0 Posted July 1, 2016 nopre didn't help Quote Share this post Link to post Share on other sites
MediaSvcsUnlimited 0 Posted July 1, 2016 I don't know what changed but it's working now. Quote Share this post Link to post Share on other sites
MediaSvcsUnlimited 0 Posted July 8, 2016 Hi, on http://www.mediaservicesunlimited.com/bixler/homepage.php I'm trying to adjust the spacing on the submenu class but neither padding-top or margin-top works. if I can get some help I would really appreciate function headerInfo() { return <<<HEREDOC <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a> <ul> <li class="submenu"><a href="#">Agents</a></li> <li class="submenu"><a href="#">Locations</a></li> </ul> <li><!--end of about us menu list --> <li><a href="#">Services</a></li> <li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li> <li><a href="#">Contact</a> <ul> <li class="submenu"><a href="pay-my-bill.php">Pay My Bill</a></li> <li class="submenu"><a href="contact.php">Cotasct Us</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> HEREDOC; } nav { background-color:#000000; padding-top:2%; width:40%; height:27px; margin-top:2%; margin-left:auto; margin-right:auto; padding-left:3%; } nav a { color:red; } nav ul { list-style-type:none; } nav > ul > li { } nav > ul li a { background-color:#000000; } nav li { float:left; margin-right:3%; } nav > ul > li > ul { display:none; position:absolute; } nav > ul > li:hover > ul { display:block; } nav ul ul li { display:block; width:60px; } .submenu { width:200px; } .submenu a { padding-top:2%; } .submenu a:hover { background-color:red; color:#000000; } Quote Share this post Link to post Share on other sites
cyberRobot 118 Posted July 15, 2016 You could try adding something like this: nav ul ul li:first-child { padding-top:10px; } Quote Share this post Link to post Share on other sites
