JQuery和CSS的下拉菜單

我使用的是非常老的門戶，其中<!DOCTYPE html>未在html代碼開始時定義，並且我設法使用jquery/css水平下拉菜單，我需要幫助將第三層添加到這裏的菜單是我的代碼JQuery和CSS的下拉菜單

#jsddm { 
    margin: 0; 
    padding: 0 
} 
#jsddm li { 
    float: left; 
    list-style: none; 
    font: 12px Tahoma, Arial 
} 
#jsddm li a { 
    display: block; 
    background: #324143; 
    padding: 5px 12px; 
    text-decoration: none; 
    border-right: 1px solid white; 
    width: 70px; 
    color: #EAFFED; 
    white-space: nowrap 
} 
#jsddm li a:hover { 
    background: #24313C 
} 
#jsddm li ul { 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    visibility: hidden; 
    border-top: 1px solid white 
} 
#jsddm li ul li { 
    float: none; 
    display: inline 
} 
#jsddm li ul li a { 
    width: auto; 
    background: #A9C251; 
    color: #24313C 
} 
#jsddm li ul li a:hover { 
    background: #8EA344 
}

，這裏是JavaScript代碼

<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var timeout   = 500; 
var closetimer  = 0; 
var ddmenuitem  = 0; 

function jsddm_open() 
{ jsddm_canceltimer(); 
    jsddm_close(); 
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');} 

function jsddm_close() 
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function jsddm_timer() 
{ closetimer = window.setTimeout(jsddm_close, timeout);} 

function jsddm_canceltimer() 
{ if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null;}} 

$(document).ready(function() 
{ $('#jsddm > li').bind('mouseover', jsddm_open); 
    $('#jsddm > li').bind('mouseout', jsddm_timer);}); 

document.onclick = jsddm_close; 
</script>

和下方是菜單項

<ul id="jsddm"> 
    <li><a href="#">About us </a> 
    <ul> 
     <li><a href="#">Mission </a></li> 
     <li><a href="#"> vision </a></li> 
     <li><a href="#">status </a></li> 

    </ul> 
    </li> 
    <li><a href="#"> Contact</a> 
    <ul> 
     <li><a href="#">Office </a></li> 
     <li><a href="#"> Support </a></li> 

    </ul> 
    </li> 
</ul>

來源

2012-01-31 Mohamed Badr

請添加HTML代碼，我可以幫 – KimKha 2012-01-31 04:54:53

我糾正後，加入JavaScript和HTML代碼，非常感謝你... – 2012-01-31 04:57:58

我認爲你必須添加以下代碼：

#jsddm li:hover ul { 
    visibility: visible; 
}

試試看。

來源

2012-01-31 06:28:14 KimKha

沒有這是不工作!!!! – 2012-01-31 07:46:26

JQuery和CSS的下拉菜單

回答

相關問題