jquery - 悬停后 CSS/jQuery 下拉菜单内容出现在区域之外

Question

我是网站设计/javascript/css 的新手，所以我的工作真的很忙!

This到目前为止，我遇到的问题是当您将鼠标悬停在事件选项卡上并在元素之间移动时，页面导航栏会溢出栏下的内容。我的代码(对不起，如果我忘记了什么)如下:

JavaScript:

<script>
 $(document).ready(function() {
   $("#menu > li:has(ul)").mouseenter(function(){
     $(this).children("ul").css("display", "none");
            $(this).children("ul").css("left", "auto").fadeIn('slow');
        }).mouseleave(function() {
            $(this).children("ul").delay(300).fadeOut('fast', function() {
                $(this).children("ul").css("left", "-9999em");
            });
        });
    });
</script>
<script>
    $("ul#menu > li").fadeTo("slow", 0.6);
    $("ul#menu > li").hover(
            function() {
                $(this).fadeTo("slow", 1.0);
            },
            function() {
                $(this).fadeTo("slow", 0.5);
            }
    );
    $(document).ready(function() {
        $("li.group").hover(
                function() {
                    $(this).find('ul:first').stop(true, true).fadeIn("fast");
                },
                function() {
                    $(this).find('ul').stop(true, true).fadeOut("fast");
                });
    });
</script>

CSS:

#navbar
{
    width: auto;
    height: 40px;
    background-color: #0F0F0F;
    alignment-adjust: auto;
}
ul {
    font-family: Arial, Verdana;
    font-size: 23px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    border-top: 1px solid #0F0F0F;
    padding: 5px 15px 5px 15px;
    background: 0F0F0F;
    margin-left: 1px;
    white-space: nowrap;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}
ul li a:hover {
    background: #1C1C1C;
}
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
  z-index:99;height:auto;
  height:50px;
}
li:hover a {
    background: #0F0F0F;
}
li:hover li a:hover {
    background: #1C1C1C;
}

HTML:

<div id="navbar">
<ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="activities.html">Activities</a>
        <ul>
            <li><a href="inthemix.html">In The Mix</a></li>
            <li><a href="teenbar.html">Teen Bar</a></li>
            <li><a href="outings.html">Outings and trips</a>
        </ul>
    </li>
    <li><a href="partners.html">Partners</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </li>
</ul>

Answer 1

编辑你的css文件并降低高度

li:hover li{height:26px;}

编辑

ul.menu li ul{position:absolute;}