Border appears on nested ul instead of parent ul?

justravis · 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

justravis · May 31, 2014

Live example - http://justravis.com/ws/

fastsol · 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;
	}

Sign In

Border appears on nested ul instead of parent ul?

Recommended Posts

justravis

Link to comment

Share on other sites

justravis

Link to comment

Share on other sites

fastsol

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information