problems with custom navigation.

smokehut · May 22, 2013

I'm pretty new to front-end development and I'm finding myself in a right pickle.

This is how it should look by the end.

Body

<body>
	<div class="nav">
		<div class="nav_container">
			<ul>
				<li id="logo"><img src="images/logo.png" alt="FUCK"></li>
				<ul class="menu">
					<!-- selection 1 start -->
					<li>Select a theme<span id="fuck"><img src="images/arrow.png" alt=">"/></span>
						<ul>
							<li><a href="#">Fuck</a></li>
							<li><a href="#">Fuck</a></li>
							<li><a href="#">Fuck</a></li>
							<li><a href="#">Theme</a>

								<ul>
									<li><img src="images/preview.png"></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
					<!-- selection 1 end -->
			</ul>
		</div>
	</div>
</body>

CSS

body {
	background: #e3e3e3;
	margin: 0 auto 0 auto;
}
.nav {
	float:left;
	background: black;
	width: 100%;
	height: 95px;
	margin: 0 auto;
-moz-box-shadow: 0 0 8px rgba(0,0,0,.25); /* drop shadow
	*/
 -webkit-box-shadow: 0 0 8px rgba(0,0,0,.25); /* drop shadow */
 box-shadow: 0 0 8px rgba(0,0,0,.25); /* drop shadow */
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyMTUgOTUiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMjUlIiB4Mj0iNTAlIiB5Mj0iLTI1JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMjIiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNTM1MzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMTUiIGhlaWdodD0iOTUiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
 background-image: -webkit-linear-gradient(bottom, #222 -25%, #353535 125%); /* gradient overlay */
 background-image: linear-gradient(bottom, #222 -25%, #353535 125%); /* gradient overlay */
}
.nav li {
	list-style: none;
}

.nav_container {
	/*background: white;*/
	width: 960px;
	height: 50px;
	margin: 0px auto;
}
#logo {
	float:left;
	position: absolute;
	top: 24px;
}
.menu {
	color: #fff; /* text color */
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 200;
	font-size: 15px;
	float:left;	
	display: inline;
	padding: 12px 320px;
	display:block;
	color:white;
}
ul.menu > li {

	background-color: #323232; /* layer fill content */
	-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.5); /* drop shadow */
	padding-right: 10px;
	padding-left: 10px;
	height: 33px;
	line-height: 33px;
	-webkit-transition: background-color .3s;
}

	ul.menu > li:hover {	
		background-color: #282828; /* layer fill content */
		-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.5); /* drop shadow */
		padding-right: 10px;
		padding-left: 10px;
		height: 33px;
		line-height: 33px;
		cursor: pointer;
	}
	ul.menu li ul {
		display: none;
	}

	ul.menu li:hover ul {
		display:block;
	}

ul.menu li ul > li {	
	text-align: center;	
	width: 100%;
	background-color: #212121; 
}  
#fuck {
	padding-left: 15px;
}

ul.menu li  ul  li  ul li {
	display:none;
}

ul.menu li  ul  li:hover  ul li {
	display:block;
}

How it should look

How it looks

Sign In

problems with custom navigation.

Recommended Posts

smokehut

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information