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>

 

 

Do you want to be seen on a 3d game?

Want to be seen on a 3d game? Want to get more publicity? Send your photos & include a resume to contact(a)artpologabriel.com

Your photos must be with the ff attributes;
1. Head front view – exactly at the very front of your face, eye leveled camera view.
2. Head left view – must be at almost 90 degrees from the front.
3. Full body shot – front and left view. (wearing fitted dress, to get the contour of your body for 3d reference)

All photos must be clear with fair lighting like an ID picture, Jpeg/Png file format, atleast 300 DPI resolution.

Note: for those who have long hair, please tie it up, face up to your ears must be seen clearly, then send another set of photo with hair untied.

Sample photos for your references:

 

Make sure on the almost perfect front camera position

Pose this way, but not necessary nude.

We will create a gallery of 3d model character output & surprise you with your 3d poses, outfits & renderings like photos below πŸ™‚ –

 

Oh not yet done, we will apply bone (armature /rigged / biped ) to the 3d models, then apply motion capture data for animations, then compile the 3d model for interactive use, then export / convert the the format to make the 3d file usable in 3d games –

WHOAHHHH TONS OF WORK FOR A FREE – 3D GAME πŸ™‚ WELL ENJOY NAMAN PO ANG TEAM DOING GOOD DEEDS AND VENTURES πŸ™‚