0

我是网站设计/javascript/css 的新手，所以我的工作真的完成了！

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

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

1 回答 1

0

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

li:hover li{height:26px;}

编辑

ul.menu li ul{position:absolute;}
于 2013-07-08T10:17:45.867 回答