MediaSvcsUnlimited Posted July 1, 2016 Share 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 Link to comment https://forums.phpfreaks.com/topic/301419-horizonatl-navbar-problem/ Share on other sites More sharing options...
Muddy_Funster Posted July 1, 2016 Share Posted July 1, 2016 try adding the following: ... nav{ display:inline-block; ... Quote Link to comment https://forums.phpfreaks.com/topic/301419-horizonatl-navbar-problem/#findComment-1534181 Share on other sites More sharing options...
MediaSvcsUnlimited Posted July 1, 2016 Author Share Posted July 1, 2016 nopre didn't help Quote Link to comment https://forums.phpfreaks.com/topic/301419-horizonatl-navbar-problem/#findComment-1534182 Share on other sites More sharing options...
MediaSvcsUnlimited Posted July 1, 2016 Author Share Posted July 1, 2016 I don't know what changed but it's working now. Quote Link to comment https://forums.phpfreaks.com/topic/301419-horizonatl-navbar-problem/#findComment-1534186 Share on other sites More sharing options...
MediaSvcsUnlimited Posted July 8, 2016 Author Share 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 Link to comment https://forums.phpfreaks.com/topic/301419-horizonatl-navbar-problem/#findComment-1534335 Share on other sites More sharing options...
cyberRobot Posted July 15, 2016 Share Posted July 15, 2016 You could try adding something like this: nav ul ul li:first-child { padding-top:10px; } Quote Link to comment https://forums.phpfreaks.com/topic/301419-horizonatl-navbar-problem/#findComment-1534530 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.