Javascript 多层下拉菜单_Javascript_Html_Css

Javascript 多层下拉菜单

javascript html css

Javascript 多层下拉菜单,javascript,html,css,Javascript,Html,Css,我三个月前才开始编程。所以，我只是在学习我想学习多层下拉菜单，我下载了这个文件，它对我的知识来说似乎是非常高级的，我想它现在对我没有用了我已经设法做了一个最简单的下拉菜单，我试图把它变成多层，但我不能添加css到新的层它弹出随机我想组织它像一个多层下拉菜单 javascript <script type="text/javascript" > function show(id) { var a=document.getElementById(id); a.style.visibi

我三个月前才开始编程。所以，我只是在学习我想学习多层下拉菜单，我下载了这个文件，它对我的知识来说似乎是非常高级的，我想它现在对我没有用了我已经设法做了一个最简单的下拉菜单，我试图把它变成多层，但我不能添加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>

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

谢谢你的建议我已经开始使用jquery了两天了，我已经非常兴奋了。如果你能给我推荐一个网站，在那里我可以找到jquery的例子，你能给我一个激活输入的例子吗？除了隐藏元素使其再次出现，我没有其他想法

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

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

#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}