This is my tutorial in making basic & simple HTML/CSS Menu that shows & hide SubMenus on Mouse Over. There are many other tutorials out there that maybe be better but quite complicated and heavy for beginners.
here it goes:
Create a style tag for your menu, dont forget the html/head/body tags – remember to put your stylesheet inside head tag.
<style>
.menu{}
</style>
Leave it without any parameters/option for now (later do as u wanted 🙂
next, add the menu list
.menu li{}
if you want horizontal menu use float:left on list tags <li> else the default appearance will be vertical menu. then add your other style of your liking such as width, height, background-color/images, etc. (later recommended)
.menu li{ float:left}
next will be your submenu, hide it using display:none (or visibility: hidden for CSS3)
.menu ul{display:none}
Remember your main menu is at <li> tags and it holds your submenus at <ul> tags
<li>menu
<ul>submenu</ul>
<ul>submenu2</ul>
</li>
Now here comes the magic that will reveal the submenu when the mouse is located over the menu (hovering they say)
add the following to your style
.menu li:hover ul{display: block;}
then again, add your other style of your liking such as width, height, background-color/images, etc.
see it live at http://artpologabriel.com/wp-content/uploads/2012/06/1.html
test it – submenu will be in – now u see now u don’t – state 🙂
Final code:
<html>
<head>
<style>
.menu{
float:left;
}
.menu li{
float:left;
display: block;
width: 200px;
height; 50px;
}
.menu ul{
display: none;
}
.menu li:hover ul{
display: block;
background-color: blue;
}
</style>
</head>
<body>
<div>
<li>home
<ul>home 1</ul>
<ul>home 2</ul>
</li>
<li>about
<ul>bout</ul>
<ul>bout2</ul>
</li>
<li>contact
<ul>contact1</ul>
<ul>contact2</ul>
</li>
</div>
</body>
</html>
