Pure CSS Mouseover Menu without Javascript

Submitted by Anonymous (not verified) on Mon, 04/13/2009 - 17:58

CSS Menu without JavaScript, Pure-CSS, Hidden, Mouseover-EffectMany internet users are online with javascript-disabled clients(because of security or performance reasons). And you want use a nice mouseover multi-level menu on your homepage. CSS ist the perfect solution for this. All modern browsers like Mozilla Firefox, Microsoft Internet Explorer, Opera, Google Chrome, Apple Safari support css. Just copy & save code below as anything.html to see how this hidden menu works. You can use images, flash instead of links. Click here for a Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#cssm1 *  { padding:0; margin: 0; }

#cssm1 {position: absolute;  z-index: 99;  top:20px; left: 35px; position: fixed; left:10; top:20; float: left;  margin:0; line-height: 30px; }

#cssm1 a { display: block; border-bottom: 2px solid #fff; background: #abc; text-decoration: none; padding: 3px 10px; }
#cssm1 a:hover { background: #789; }

#cssm1 ul li, #cssm1 ul li ul li  { width: 120px; }

#cssm1 ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 120px;
}

#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
display:block;
}

#cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
position: absolute;
left: 120px; top: 10;
}

#cssm1 ul li ul, #cssm1 ul li ul li ul { clear: left; margin-top: -30px; }

#cssm3 { background-color: #c3f; padding: 3px; text-align: center; }
#cssm1:hover #cssm3 { display:none; }

</style>

</head><body>

<div id="cssm1">
<ul>
<li><a href="#">Africa</a></li>
<li><a href="#">America</a></li>
<li><a href="#">Asia</a></li>
<li><a href="#">Europe &nbsp; &nbsp; &#187;</a>
<ul>
<li><a href="#">France</a></li>
<li><a href="#">Germany &nbsp; &nbsp; &#187;</a>
<ul>
<li><a href="#">Berlin</a>
<li><a href="#">Hamburg</a>
<li><a href="#">Dortmund</a>
</ul>
</li>
</ul>
</li>

</ul>

<div id="cssm3">M<br />E<br />N<br />U</div>
</div>
</body></html>

Add new comment