javascript - 将第三级添加到 CSS 菜单

Question

我使用的是非常旧的门户网站，在 html 代码的开头没有定义/p>

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



<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>
            <ul>
               <li><a href="#">Mission Statment 1</a></li>
            </ul>
     </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>

如您所见，第 3 级“Mession Statment 1”没有出现，这是我的问题，有什么建议吗？？？

Answer 1

问题可能是由于这些行

$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout',  jsddm_timer);

在其中您仅将事件处理程序设置为直接 <li> #jsddm 的 children 元素。但是你的第三个<ul>不包含在这样的 <li> 中, 所以尝试改变上面几行

$('#jsddm li').bind('mouseover', jsddm_open);
$('#jsddm li').bind('mouseout',  jsddm_timer);

和

function jsddm_open() {   
    ...
    ddmenuitem = $(this).children('ul:first').css('visibility', 'visible');}