多層下拉菜單

我剛剛開始編程三個月ago.so，我只是學習東西我想學習多層下拉菜單，我下載這個文件，這似乎是非常高級的我的知識和我現在認爲它沒有用處我已經設法做出一個最簡單的下拉菜單，我試圖把它變成多層，但我不能將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>

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

來源

2011-08-10 Narendra Chitrakar

下載JQuery的。您將能夠添加許多效果來構建一個有吸引力的下拉菜單並以多種方式堆疊它們。除了隱藏div之外，您可以保持它們可見但是爲空，直到您調用.click（）函數來激活DIV的輸入爲止。

Download Jquery

來源

2011-08-10 06:24:10 DARIUS

謝謝你的建議，我已經使用jquery它已經兩天開始，我已經很興奮，我很plesed如果你能建議我一個網站，我能找到的jQuery的例子你能給我一個激活input.i沒有任何其他想法，而隱藏元素，使其再次出現的例子 –

多層下拉菜單

回答

相關問題