javascript - 子菜单消失

Question

我在 JQuery 的帮助下有一个子菜单，但是当我离开主 LI 转到子菜单时，子菜单消失了。根据我的研究，我发现很多时候这是一个 CSS 问题，但我看不出我的 CSS 有什么问题。我唯一想知道的另一件事是悬停功能是否可行？请看一下。

这是我的 CSS 和 JavaScript 用于相关部分:

<script>
$(document).ready(function () {
    $('.nav #about').hover(function (e) {
        $('.nav2').slideDown('normal');
    }, function () {
        $('.nav2').slideUp('normal');
    });
});
</script>


#wrapper
{
margin:9% 10% 1% 10%;
height:40em;
border: solid 3px black;
background-color:#B2B2D9;
overflow:hidden
}           /* Allows inner div to expand to full height of WRAPPER div */



#main
{
height:100%;
background-color:white;
margin-right:2%;
margin-bottom:20%;
margin-left:15%;
padding-top:1em;
padding-left:2em;
}


#col1
{
background-color:#000033;
width:15%;
height:100%;
float:left;
color:#FFF000;
font-family: bold;
font-size: 100%;
padding:0;
}


ul.nav li 
{
position:relative;
width:100%;
}

ul.nav a
{
display: block;
background-color:#B2B2D9;
margin-right:2%;
margin-bottom:1%;
margin-left:1%;
text-decoration:none;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
border-top-width: 3%;
border-right-width: 3%;
border-bottom-width: 3%;
border-left-width: 3%;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 2%;
}


ul.nav
{
position:relative;
width:100%;
list-style-type: none;
line-height:1.5em;
padding:0px;
}

ul.nav2 a
{
display: block;
background-color:#000033;
padding:6%; 
margin:0;
text-decoration:none;
color:white;
border-top-color:#FFFFFF;    
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
}


ul.nav2
{
position:absolute;
top:0;
left:100%;
display:none;
font-size:100%;
list-style-type: none;
width:7em;
line-height:1.5em;
padding:0px;
}

ul.nav2 li
{ 
line-height:1.3em;
}

这是有问题的页面部分:

<div id="col1">

<ul class="nav">
<li><a href="http://www.alan.com">Home</a></li>
<li><a id="about" href="http://www.alan.com">About</a>

  <ul class="nav2">
  <li><a href="bio.html">Bio</a></li>
  <li><a href="edu.html">Education</a></li>
  </ul>

</li>

<li><a href="http://www.alan.com">New Listings</a></li>
<li><a href="http://www.alan.com">Featured Home</a></li>
<li><a href="http://www.alan.com">Town Facts</a></li>
<li><a href="http://www.alan.com">Contact Me</a></li>
</ul>


</div>


<div id="main">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

任何帮助都会很棒!

Answer 1

如果您移动 id="about"到 <li>元素它应该更像你期望的那样工作(<li> 是你的子菜单容器，而不是 <a> 标签)

<li id="about"><a href="http://www.alan.com">About</a>