CODEWITHSUNDEEP
javascripthtmlcss
Narendra Chitrakar
Narendra Chitrakar

Reputation: 185

multi layered drop down menu

i just started programming three months ago.so,i'm just learning things 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}

Upvotes: 0

Views: 586

Answers (1)

DARIUS
DARIUS

Reputation: 11

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

Upvotes: 1

Related Questions