PDA

View Full Version : 2 levels css menu problem


fattat
05-20-2009, 02:02 PM
i try to do a horizontal 2 levels drop down menu
but here maybe have some script wrong or missing..

can anyone help me look for it??
in the dreamweaver the layout is quite messy,
but in browser is looking nice..


this menu is pure with css code..doesnt consist any javascript code..







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Simple drop line menu</title>




<style type="text/css">

/* for this demo only */
#nav {margin:0 auto;}

/* the styling */
#nav {width:750px; height:20px; background:#000; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a,
#nav .current a {display:block; height:20px; float:left; background:#000; padding:0 10px 0 10px; text-decoration:none; font-size:12px; line-height:20px; white-space:nowrap; border-right:1px solid #fff; color:#fff;}
* html #nav .select a, * html #nav .current a {width:1px; height:21px;}


#nav .select a:hover,
#nav .select li:hover a {background:#888; cursor:pointer; color:#ff0;}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#666; color:#ff0;}


#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#888; color:#ff0;}

#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#666; color:#ff0;}

#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:750px; top:20px; left:0; background:#888; margin-top:0; padding:0; z-index:100; color:#fff; font-size:11px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}

#nav .sub_active {display:block; position:absolute; width:750px; top:20px; left:0; background:#666; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}

#nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#666; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#888; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}
</style>

</head>

<body>



<div id="nav">


<ul class="select"><li><a href="simple_dropline.html?current=one&amp;sub=none">John Constable
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="simple_dropline.html?current=one&amp;sub=a">The Hay Wain</a></li>
<li><a href="simple_dropline.html?current=one&amp;sub=b">Brighton Beach</a></li>
<li><a href="simple_dropline.html?current=one&amp;sub=c">Malvern Hall</a></li>
<li><a href="simple_dropline.html?current=one&amp;sub=d">Salisbury Cathedral</a></li>
<li><a href="simple_dropline.html?current=one&amp;sub=e">Weymouth Bay</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>




<ul class="select"><li><a href="simple_dropline.html?current=two&amp;sub=none">Joseph Mallord William Turner
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="simple_dropline.html?current=two&amp;sub=a">Fishermen at Sea</a></li>
<li><a href="simple_dropline.html?current=two&amp;sub=b">The Shipwreck</a></li>
<li><a href="simple_dropline.html?current=two&amp;sub=c">The Vale of Ashburnham</a></li>
<li><a href="simple_dropline.html?current=two&amp;sub=d">Crossing the Brook</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>


<ul class="select"><li><a href="simple_dropline.html?current=three&amp;sub=none">Henri Matisse
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="simple_dropline.html?current=three&amp;sub=a">The Girl with Green Eyes</a></li>
<li><a href="simple_dropline.html?current=three&amp;sub=b">The Dream</a></li>
<li><a href="simple_dropline.html?current=three&amp;sub=c">Woman in Blue</a></li>
<li><a href="simple_dropline.html?current=three&amp;sub=d">The Yellow Dress</a></li>
<li><a href="simple_dropline.html?current=three&amp;sub=e">The Piano Lesson</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>


<ul class="current"><li><a href="simple_dropline.html?current=four&amp;sub=none">Paul Cezanne
</a></li></ul><ul class="sub_active"><li><a href="simple_dropline.html?current=four&amp;sub=a">The Large Bathers</a></li>
<li><a href="simple_dropline.html?current=four&amp;sub=b">Onions and Bottles</a></li>
<li><a href="simple_dropline.html?current=four&amp;sub=c">Mardi Gras</a></li>
<li><a href="simple_dropline.html?current=four&amp;sub=d">Still Life</a></li>
<li><a href="simple_dropline.html?current=four&amp;sub=e">Boy in a Red Waistcoat</a></li>
</ul>

</div>




</script>
</body>
</html>

Corrosive
05-20-2009, 03:37 PM
Code is nicely wrapped there fattat :wink: