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 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/ 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...
fastsol Posted May 31, 2014 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; } 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
Archived
This topic is now archived and is closed to further replies.