Make a hidden menu with CSS

css| Menu

Simple hidden Vertical Menu expands content when hover. This effect in JS has many versions, but this can be said to be a unique version of the CSS. This menu can be displayed normally in IE5.5,IE6,IE7,FF,OPERA,NS8 as well as MacFF1.5 and Safari, although Mac IE5. There may be some problems in X.

CSS Code

The following is a reference fragment:
/* Common Style * *
. menu {
Font-family:verdana, Sans-serif;
position:relative;
Font-family:tahoma, Geneva, "Lucida Sans Unicode", "Lucida Grande", Verdana, Sans-serif;
margin-bottom:220px;
}
. menu UL {
padding:0;
margin:0;
List-style-type:none;
}
. menu ul Li {
position:relative;
Float:left;
}

. menu ul li A,. Menu ul Li a:visited {
Display:block;
Text-decoration:none;
width:25px;
height:100px;
Font-weight:bold;
Background:transparent URL (.. /.. /updata/tab.gif) top Right no-repeat;
text-indent:-999px;
}

. menu UL Li ul
Visibility:hidden;
Position:absolute;
width:190px;
top:0;
left:0;
border:1px solid #444;
}

Table {
margin:0; padding:0; border:0;
Border-collapse:collapse;
Font-size:1em;
}

/* Non IE browser dedicated * *
. Menu ul Li:hover a {
Color: #fff;
width:215px;
}

. Menu UL Li:hover ul {
visibility:visible;
}

. menu UL Li:hover ul li a {
Display:block;
Background: #eee;
border:0;
margin:0;
text-indent:0;
Color: #333;
Font-weight:normal;
Font-size:0.9em;
Height:auto;
Line-height:1em;
padding:5px;
width:180px;
Text-align:left;
}

. menu UL Li:hover ul li a:hover {
Background: #888;
Color: #fff;
}

If you want to support IE6, add the following:
. menu ul li a:hover {
width:215px;
}
. menu ul Li A:hover ul
visibility:visible;
}
. menu ul Li A:hover ul li a {
Display:block;
Background: #eee;
border:0;
margin:0;
text-indent:0;
Color: #333;
Font-weight:normal;
Font-size:0.9em;
Height:auto;
Line-height:1em;
padding:5px;
width:190px;
w\idth:180px;
Text-align:left;
}
. menu ul Li A:hover ul li a:hover {
Background: #888;
Color: #fff;
}

XHTML code in effect

The following is a reference fragment:
<div class= "Menu" >
<ul>
<li><a class= "Drop" href= ". /menu/index.html ">menu
<!--[if IE 7]><!-->
</a>
<!--<! [endif]-->
<table><tr><td>
<ul>
<li><a href= ". /menu/zero_dollars.html "Title=" "The Zero Dollar ads page" >zero dollars advertising page</a></li>
<li><a href= ". /menu/embed.html "title=" wrapping text around images ">wrapping text around images</a></li>
<li><a href= ". /menu/form.html "title=" Styling Forms ">styled form</a></li>
<li><a href= ". /menu/nodots.html "title=" removing Active/focus borders ">active focus</a></li>
<li><a href= ". /menu/shadow_boxing.html "title=" Multi-position drop Shadow ">shadow boxing</a></li>
<li><a href= ". /menu/old_master.html "title=" Image map for detailed information ">image map for detailed information</a></ Li>
<li><a href= ". /menu/bodies.html "title=" fun with background images ">fun with background images</a></li>
<li><a href= ". /menu/fade_scroll.html "title=" fade-out scrolling ">fade scrolling</a></li>
<li><a href= ". /menu/em_images.html "title=" em size images compared ">em image sizes Compared</a></li>
</ul>
</td></tr></table>
<!--[If LTE IE 6]>
</a>
<! [endif]-->
</li>
</ul>
</div>