Question

我刚开始编程三个月前。所以，我只是在学习东西我想学习多层下拉菜单，我下载了这个文件，这对我的知识来说似乎非常高级，我认为现在对我没用我设法做了一个最简单的下拉菜单，我试图把它变成多层，但我不能将CSS添加到新的图层，它随机弹出我想组织它像多层下拉菜单

的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>

＆LT; 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}

Answer 1

下载JQuery。您将能够添加许多效果来构建一个有吸引力的下拉菜单，并以多种方式堆叠它们。除了隐藏div之外，你可以让它们保持可见但是空，直到你调用.click（）函数来激活DIV的输入。

Download Jquery

多层下拉菜单

1 个答案: