justravis Posted May 31, 2014 Share Posted May 31, 2014 Would you know why the bottom border appears on the nested ul's (line 36) instead of the parent ul (line 10)? THANKS! * { margin: 0; padding: 0; } body { background: black; } nav ul { list-style: none; border-bottom: 1px solid #404040; } nav li { position: relative; float: left; /* Width for About, Graphic Design & Contact */ width: 15%; } /* Width for Mobile Apps & Web */ nav li:nth-of-type(3), nav li:nth-of-type(4) { width: 27.5%; } nav a { color: #404040; font-size: 1.5em; font-weight: bold; text-decoration: none; display: block; } nav ul ul { /*display: none;*/ position: absolute; z-index: 99; } nav li li { width: inherit; float: none; } nav li li a { font-size: 1.25em; } <!DOCTYPE HTML> <html> <head> <title>PowerON Technologies - San Diego-Based Graphic Design, Mobile App & Web Development Firm</title> <!-- HTML5Shiv helps older browsers display HTML 5 elements. --> <!--[if lt IE9]> <script src="_js/html5shiv.js"></script> <![endif]--> <!-- /HTML5Shiv --> <!-- CSS --> <!-- Normalize.css makes tags look the same in all browsers --> <link href="_css/normalize.css" type="text/css" rel="stylesheet"> <link href="_css/styles.css" type="text/css" rel="stylesheet"> <!-- /CSS --> <!-- JavaScript --> <script src="_js/jQuery.js" type="text/javascript"></script> <script src="_js/scripts.js" type="text/javascript"></script> <!-- /JavaScript --> </head> <body> <!-- NAV BAR --> <nav> <ul> <li><a href="#">About</a></li> <li> <a href="#">Graphics</a> <ul> <li><a href="#">SAIC</a></li> <li><a href="#">YouthBuild</a></li> </ul> </li> <li> <a href="#">Mobile Apps</a> <ul> <li><a href="#">Big Brothers Big Sisters</a></li> <li><a href="#">YMCA</a></li> </ul> </li> <li> <a href="#">Web</a> <ul> <li><a href="#">Challenged Athletes Foundation</a></li> <li><a href="#">Make-A-Wish Foundation</a></li> <li><a href="#">Turning The Hearts Center</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> <!-- /NAV BAR --> </body> </html> index.zip Quote Link to comment https://forums.phpfreaks.com/topic/288891-border-appears-on-nested-ul-instead-of-parent-ul/ Share on other sites More sharing options...
justravis Posted May 31, 2014 Author Share Posted May 31, 2014 Live example - http://justravis.com/ws/ Quote Link to comment https://forums.phpfreaks.com/topic/288891-border-appears-on-nested-ul-instead-of-parent-ul/#findComment-1481472 Share on other sites More sharing options...
Solution fastsol Posted May 31, 2014 Solution Share Posted May 31, 2014 I tink this should take care of it. nav ul { list-style: none; } nav li { position: relative; float: left; /* Width for About, Graphic Design & Contact */ width: 15%; border-bottom: 1px solid #404040; /* Moved this from the rule above. */ } nav li li { border: none; } Quote Link to comment https://forums.phpfreaks.com/topic/288891-border-appears-on-nested-ul-instead-of-parent-ul/#findComment-1481492 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.