Forums

creativeideas

Hi All,

I am trying to make multi level CSS menu ....it is working fine with liitle problem when i click my inner link to open the 2 level menu it will suddenly get disable after clicking the link ..
sending my code plz have a look....click on wine and then on linkc..
Plz its really urjent for me

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
<style>
#cssonclickswitch li {width:90px;float:left; padding:5px;}
#cssonclickswitch a { padding:0 10px 0 0px; width:60px; border:1px #ccc solid; display:block; cursor:pointer; position:relative; background:#fff;}
onclickswitch a:hover,#cssonclickswitch a:focus:hover {color: #cff;background:black;}
#cssonclickswitch a:active,#cssonclickswitch a:focus {color:#fff;background-color:red;}
#cssonclickswitch a span {display: none;  #top:20px; #left:0px;}
#cssonclickswitch a:active span ul,#cssonclickswitch a:focus ul{ margin:0px; padding:0px; list-style-type:none;}
#cssonclickswitch a:active span ul li,#cssonclickswitch a:focus ul li{  width:78px; padding:6px; display:block; margin:0px;}
#cssonclickswitch a:active span,#cssonclickswitch a:focus span {display: block;position: absolute; width:90px;color:#000;border:1px solid #03C; margin:0px;}
#cssonclickswitch a:active span span,#cssonclickswitch a:focus span span {display: none;}
#cssonclickswitch a:active span li:active span,#cssonclickswitch a:focus span li:focus span {display: block;position: absolute; width:90px;color:#000;border:1px solid #03C; margin:0px; left:100%}

</style>

</head>

<body>
<h1>CSS onclick</h1>
<ul id=\"cssonclickswitch\">
<li><a href=\"#n\">Wine<span> <ul>
    <li>Linka</li>
    <li>Linkb</li>
    <li>Linkc
    <span> <ul>
    <li>Linkt1</li>
    <li>Linkt2</li>
    </ul></span>
        </li>
    </ul></span></a></li>
<li><a href=\"#n\">Beer
<span> <ul>
    <li>Linka</li>
    <li>Linkb</li>
    <li>Linkc    </li>
    </ul></span>

</a></li>
<li><a href=\"#n\">Whisky
<span> <ul>
    <li>Linka</li>
    <li>Linkb</li>
    <li>Linkc</li>
    </ul></span>

</a></li>
</ul>
</body>
</html>

Robskiwarrior

hey well done for getting that far, it can really melt your head trying to get a CSS menu to work simply because of drilling down through the layers lol

Is there a reason for the SPANS wrapping the ULs? Just wondering before I try and make it work... :)

creativeideas

hey i got the solution for 2nd level i just use hover inplace of active and focus and play little bit with position and it will wrk fine :)

Robskiwarrior

Well done :) glad to hear you got it sorted :)

treehouse : what would you like to learn today?

Forums

Multilevel menu using css....HELP ME