CSS Menu

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Wolf_22
Forum Contributor
Posts: 159
Joined: Fri Dec 26, 2008 9:43 pm

CSS Menu

Post by Wolf_22 »

I need the below to use percentages in width, margins, and padding.

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>
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).
Post Reply