• Locked
No replies
Fri, 2014-11-28 19:44
jordan9788
jordan9788's picture
Offline
newbie
Last seen: 8 years 26 weeks ago
Timezone: GMT-6
Joined: 2014-11-28
Posts: 4
Points: 7

Hi, guy! I'm really new to the CSS world, and I have class website due on Monday. I realize it's short notice, but I'm pulling my hair out here.
Okay, so. I need to have a horizontal navigation bar with a transitional element. I've figured this out. What I can't figure out is how to make a vertical drop down menu from one ("Profiles") link/list item in the horizontal menu.
Here is my HTML:

Right now, the drop down list is displayed horizontally below the main horizontal navigation bar and is causing a giant gap between the second and third links/list items in the main navigation bar. I've attached a screen shot of what it currently looks like. I'd like to make the drop down list appear on hover, and also have the color transitions the main navigation has. I just CAN'T figure it out and am in dire need of your help! I'd also be open to any other suggestions you have in regard to me current coding. I'm really new to this world.
Thanks!

Here's my html: 

		<ul id="nav">
				<li><a href="index1.html">HOME</a></li>
				<li><a href="#">PROFILES</a>
						<div id="drop">	
							<ul>
								<li><a href="index4.html">ANNE BARNGROVER</a></li>
								<li><a href="index5.html">ANAND PRAHLAD</a></li>
								<li><a href="index6.html">LIANUSKA GUTIERREZ</a></li>
							</ul>
						</div>
					</li>
				<li><a href="index2.html">VIDEO</a></li>
				<li><a href="index3.html">ABOUT</a></li>
			</ul>

Here's my CSS:

#nav {
	float: right;
	padding: 7px 0 0 30px;
	font-size: .9em;
	list-style-type: none;
	text-decoration: none;
	}
#nav li {
	float: left;
	margin: 0 0 0 5px;
	}
#nav li a {
	padding: 5px 15px;
	font-weight: bold;
	color: #40423f;
	color: rgba(64,66,63,1.00);
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	text-decoration: none;
	position: relative;
	}
#nav li a:hover,
#nav li a:focus {
	color: #222940;
	text-decoration: none;
	}
 
#drop ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
	background-color: #F2E8DC;
}
 
#drop a {
    display: block;
    width: 150px;
	font-size: 60%; 
	background-color: #F2E8DC;
}

AttachmentSize
Screen Shot 2014-11-28 at 1.29.50 PM.png16.53 KB
Top
Tags: