CSS Menu
Posted: Sat Sep 19, 2009 11:39 pm
I need the below to use percentages in width, margins, and padding.
Could someone please help me understand why this won't work? I mean, technically, it DOES work, but aesthetically, it does not because the sub menu pops open permanently if percentages are used (it's supposed to be a hover menu).
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Minimal Drop-down CSS-based-only Menu</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
#w{width:80%;}
#controls{width:20%;color:#009;background-color:#666;}
ul#ul_parent{margin-right:1px;width:100%;overflow:hidden;float:left;background-color:#ccc;}
ul#ul_parent a{padding-left:5px;color:#009;}
ul#ul_parent li.li_parent{margin:-32767px -125px 0 0;width:250px;float:left;}
ul#ul_parent li.li_parent a.a_parent{position:relative;margin-top:32767px;width:120px;z-index:50;display:block;float:left;background:transparent;}
ul#ul_parent li.li_parent a.a_parent:hover,ul#ul_parent li.li_parent a.a_parent:focus,ul#ul_parent li.li_parent a.a_parent:active{margin-right:1px;}
ul.ul_child{margin-top:-25px;padding:25px 0 0 0;float:left;list-style:none;}
ul.ul_child li a{width:120px;float:left;clear:left;display:block;background:#ccc;}
ul.ul_child a:hover,ul.ul_child a:focus,ul.ul_child a:active{margin-right:1px;background:transparent;}
</style>
</head>
<body>
<div id="w">
<div id="controls">
<ul id="ul_parent">
<li class="li_parent">
<a class="a_parent" href="#top1">Control Panel</a>
<ul class="ul_child">
<li><a class="l" href="#top1a">Cameras</a></li>
<li><a class="r" href="#top1b">Lenses</a></li>
<li><a class="l" href="#top1c">Flashguns</a></li>
<li><a class="r" href="#top1c">Flashguns</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>