Grow your CSS skills. Land your dream job.

Drop down menu in CSS

And the CSS to style it:

Code:
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;
}

Rob
# December 18, 2008 at 6:11 pm

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… :)

Code:
/*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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".