- This topic is empty.
-
AuthorPosts
-
December 18, 2008 at 5:55 pm #23797
skater102
MemberI 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:
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;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.