Forums

skater102

I am working on a menu for a website and would like to turn it into an "onrollover" dropdown menu. Does anyone know a simple of creating a drop down feature and implement into the menu I have already created.

Here is the html:

		<ul id=\"menu\">      
			    <li><a class=\"home\" href=\"index.html\">home</a>
				 			
			    </li>
			    <li><a class=\"about\"href=\"#\">about us</a></li>
				<ul id=\"drop\"> 
					<li><a href=\"#\">Who we Are</a></li> 
					<li><a href=\"#\">Belifes</a></li> 
					<li><a href=\"#\">Our Offilation</a></li> 
				 </ul>
			    <li><a class=\"programs\"href=\"#\">programs</a></li>
			    <li><a class=\"kids\" href=\"#\">kids/youth</a></li>
			    <li><a class=\"links\"href=\"#\">links</a></li>
			    <li><a class=\"contact\"href=\"#\">contact</a></li>
			</ul>

And the CSS to style it:

ul#menu {
	list-style: none;
	padding:128px 0 0 330px;
 }
	ul#menu li{
 		display:inline;
 	}
	ul#menu li a{
		text-indent: -9999px;
		display:block;
		height: 51px;
		float:left;
	}
		ul#menu li a.home{
			background: url(images/menu_home.jpg) no-repeat bottom center;
			width:107px;
		}
			ul#menu li a.home:hover ,ul#menu li a.home:active{
				background-position: top center;
			}

		ul#menu li a.about{
			background: url(images/menu_about.jpg) no-repeat bottom center;
			width:95px;
		}
				ul#menu li a.about:hover ,ul#menu li a.about:active{
				background-position: top center;
			}
		ul#menu li a.programs{
			background: url(images/menu_programs.jpg) no-repeat bottom center;
			width:95px;
		}
				ul#menu li a.programs:hover ,ul#menu li a.programs:active{
				background-position: top center;
			}
		ul#menu li a.kids{
			background: url(images/menu_kids.jpg) no-repeat bottom center;
			width:97px;
		}
				ul#menu li a.kids:hover ,ul#menu li a.kids:active{
				background-position: top center;
			}
		ul#menu li a.links{
			background: url(images/menu_links.jpg) no-repeat bottom center;
			width:95px;
		}
				ul#menu li a.links:hover ,ul#menu li a.links:active{
				background-position: top center;
			}
		ul#menu li a.contact{
			background: url(images/menu_contact.jpg) no-repeat bottom center;
			width:129px;
		}
				ul#menu li a.contact:hover ,ul#menu li a.contact:active{
				background-position: top center;
			}
		body#home ul#menu li a.home
		body#home ul#menu li a.about
		body#home ul#menu li a.programs
		body#home ul#menu li a.kids
		body#home ul#menu li a.links
		body#home ul#menu li a.contact {
			background-position: top center;
		}

Robskiwarrior

There are some Great dropdown menus avalible - I will see if I can find one I use and give you the code...

This is one I use alot, Chris recommended it and it came from a Theme for Wordpress called Defusion (Chris' article here - http://css-tricks.com/video-screencasts ... -as-a-cms/)

Hopefully the code below will be useful - I found it really easy to work with, it is all set up to go with a 2 level deep menu, so it will support...

<ul>
<li>
<ul>
<li>
<li>

Obviously the first UL is the top menu, the second is the drop down from the item selected... :)

/*Main Navbar */

#nav {
	position:relative;
	margin: 0px;
	padding:0px 20px 0px 20px;
	height:41px;
	background: url(../images/menubg.png) no-repeat;
	font-weight:bold;
	z-index:100;
	text-decoration:none;
	float:left;
	}
	
#nav, #nav ul {
	width: 924px;
	list-style: none;
	line-height: 41px;
	font-size:150%;
	}

#nav a, {
	display: block;
	background:none;
	border: none;
	text-decoration: none;
	
	}
	

#nav a:hover {
	text-decoration:none;
	background: url( ../images/libghov.png);
}



#nav li {
	float: left;
	list-style: none;
	}

#nav a, #nav a:visited {
	display: block;
	color: #fff;
	padding: 0 20px;
	text-decoration:none;	
	}

#nav a:hover, #nav a:active, .current_page_item	a, #home .on {
	text-decoration: none;
	}	

#nav li[search] {
	float:right;
	line-height:0;
	padding-top:8px;
}	
	
/* Dropdown Menus */		
#nav li ul {
	position:absolute;
	top:40px;
	left: -999em;
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 174px;
	border-bottom: 1px solid #A9A8A8;
	line-height: 30px;
	z-index:10;
	font-size:75%;
	}

#nav li li {
	width: 172px;
	border-top: 1px solid #A9A8A8;
	border-right: 1px solid #A9A8A8;
	border-left: 1px solid #A9A8A8;
	background-color:#BEC0C7 ;
	}

#nav li li a, #nav li li a:visited {
	font-weight:normal;
	font-size:0.9em;
	color:#FFF;
	background: url(../images/subcv2_r2_c3.png);
	}

#nav li li a:hover, #nav li li a:active {
	background: url(../images/libghov.png);
	}	
		
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li:hover ul, #nav li li li li.sfhover ul{ 
	left: auto;
	
	}

a.main:hover
{	background:none;

	}
	
#nav li li ul {
	position:absolute;
	top:32px;
	left: -999em;
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 174px;
	border-bottom: 1px solid #A9A8A8;
	line-height: 30px;
	z-index:10;
	font-size:75%;
	}

Good Luck :D

treehouse : what would you like to learn today?

Forums

Drop down menu in CSS