Basic & Simple HTML-CSS Menu show/hide SubMenu

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>