multi layered drop down menu_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-27 14:09 出处：网络

i just started programming three months ago.so,i\'m just learning 开发者_如何学Pythonthings i want to learn multi layered drop down menu and i downloaded this file which seemed very high-class for my

相关专题：css javascript

i just started programming three months ago.so,i'm just learning 开发者_如何学Pythonthings i want to learn multi layered drop down menu and i downloaded this file which seemed very high-class for my knowledge and i think its no use for me now i have managed to make a simplest possible drop down menu and i tried to turn it into multilayer but i can't add css to the new layer it pops randomly i want to organise it like a multi layer drop down menu

javascript

<script type="text/javascript" >
function show(id)
{
var a=document.getElementById(id);
a.style.visibility="visible";
}
function hide(id)
{
var a=document.getElementById(id);
a.style.visibility="hidden";
}
</script>

HTML

<body>
<ul id="naren">
<li><a href="#" onmouseover="show('n1')" onmouseout="hide('n1')">HOME</a>
<div id="n1" onmouseover="show('n1')" onmouseout="hide('n1')">

<a href="#" >narendra chitrakar</a>
<a href="#" onmouseover="show('n2')" onmouseout="hide('n2')">narendra chitrakar</a>
<a href="#" >narendra chitrakar</a>
<a href="#" >narendra chitrakar</a>

</li></div>

<li><a href="#" onmouseover="show('n2')" onmouseout="hide('n2')">PROFILE</a>
<a href="#" >narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

<a href="#" onmouseover="show('sm1')" onmouseout="hide('sm1')">narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>
</li></div>


<li><a href="#" onmouseover="show('n3')" onmouseout="hide('n3')">ABOUT US</a>
<div id="n3" onmouseover="show('n3')" onmouseout="hide('n3')">

<a href="#" >narendra chitrakar</a>

<a href="#" onmouseover="show('sm1')" onmouseout="hide('sm1')">narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

</li></div>

<div id="sm1" onmouseover="show('sm1')" onmouseout="hide('sm1')" >
<span id="span1" onmouseover="show('n2')" onmouseout="hide('n2')"> 
<a href="#" >this</a>`
<a href="#" >isdasdasd</a>`
<a href="#" >skjlkdf</a>
<a href="#" >phpand mysql</a>
<a href="#" >narendra chitrakar</a></span>
</div>`</ul>

CSS

#naren li
{
margin: 0;
padding: 0;
list-style:none;
float: left;
font: bold 20px arial;
background:#F00;
    color:#CF0;
}




#naren li a:hover
{
color:#03F;
background:#FFFF99;
}



#naren li a
{   display: marker;
margin: 0 1px 0 0;
width: 60px;
background: #8B8874;
color: #FFF;
text-align: center;
text-decoration: none;
padding:0 20px 0 20px;
}

#naren div{
visibility:hidden;
padding:0;
position:fixed;
overflow-style:auto;
white-space:nowrap;
margin:0;
}
#naren div a
{   position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 11px arial;


}


#naren div a:hover
{   background: #49A3FF;
    color: #FFF}

Download JQuery. You will be able to add many effects to construct an attractive drop down menu and stack them in so many ways. Instead of hiding div's, you could keep them visible but empty till you call a .click() function to activate the input of the DIV.

Download Jquery