javascript - javascript，css，html下拉菜单鼠标悬停

我在菜单上使用了javascript，因此当我将鼠标悬停在菜单上时，它应该会下拉。但是，不仅仅是下拉菜单，页脚和菜单也随之下降。

CSS：

.navmenu  {position:relative;float:left;cursor: pointer;margin-right:2px;width:200px;min-width:200px;}
.navmenu a{top:0px;left:0px;padding: 0;color: #000;text-decoration: none;position:relative;}
nav .wrapper{width:150px;min-height:128px;display:block;}
ul.subnav {top:0px;padding: 0px 5px 5px 15px;margin: 0px;list-style: none;position: relative;max-width: 150px; width: 150px;  left: 0; display: none;z-index:150;  }
ul.subnav li{padding:5px; width:120px;text-decoration: none;}
.imagem1{top:0px;left:-15px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem3{top:0px;left:-15px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem2{top:-3px;left:-3px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem4{top:-3px;left:-20px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem5{top:1px;left:-44px;margin:0;padding:0;position:absolute;z-index:180;}
.menuname{min-height:40px;z-index:150;}
.menuname img {border:0;}
#placaparque{left:20px;top:-17px;z-index:150;}
#placainfo{left:-15px;top:-10px;z-index:150;}
#placacons{left:-15px;top:-5px;z-index:150;}
#placaactiv{left:-10px;top:-8px;z-index:150;}
#placaanim{left:-65px;top:-6px;z-index:150;}
1#sub1{left:0px;top:0;}
1#sub3{left:0px;z-index:150;}
#fundo1{position:relative;background-image:url('images/fundo.png');left:38px;width:150px;min-height:128px;}
#fundo2{position:relative;background-image:url('images/fundo.png');left:0px;width:150px;min-height:128px;}
#fundo3{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#fundo4{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#fundo5{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}

#parq{left:-20px;}
#acti{left:-30px;}
#info{left:-65px;}
#cons{left:-110px;}
#anim{z-index:100;left:-155px;}

HTML：

<nav id="mainMenu">
    <div id="parq" class="navmenu" >
        <div " id="wrapper" class="wrapper">
            <div id="fundo1" class="fundo">
                <ul id="sub1" class="subnav">
                    <?php /*wp_list_categories('include=16');*/ ?>
                    <?php wp_nav_menu( array( 'menu' => 'Menu Parque' ) ); ?>
                </ul>
            </div>
            <img class="imagem1" src="<?php bloginfo('template_directory'); ?>/images/comboioparque.png"/>
        </div>

JavaScript：

$(function () {
    var divnav = $(this); //menu1
    $("#parq").hover(function () {
        $("#sub1").stop(true, true).delay(200).slideDown(300);
        $(".imagem1").stop(true, true).fadeOut(200);
    }, function () {
        $(".imagem1").stop(true, true).delay(200).fadeIn(200);
        $("#sub1").stop(true, true).slideUp(300);
});

我只希望“菜单”下拉菜单。我不希望其余菜单项和页脚也下降。我知道它与“ z-index”有关，但我没有关注。

你们能帮我吗？

谢谢。

最佳答案

首先，请注意，css的这一行中存在错误：

1＃sub1 {left：0px; top：0;}

应该是这样的：

#sub1{left:0px;top:0px;} /*and by the way, why have you added a number one before the id??*/

html的这一行中也有错误：

<div " id="wrapper" class="wrapper">

应该是这样的：

<div id="wrapper" class="wrapper">

在.navmenu的CSS中，为什么要定义一个with，同时还要定义一个最小宽度？我不确定这是否可以验证W3C ...也许会导致您的CSS冲突
如果您要同时调用它们两者以便在IE6中正确查看，我建议您对宽度使用hack，对于所有其他浏览器，只需保留“最小宽度”即可。

最后一个奇怪的问题：在jquery中，为什么要使用.stop方法？为什么不只使用.animate方法呢？您可以执行以下操作：

$(document).ready(function(){
 $("#btn1").click(function(){
  $("#box").animate({height:"300px"});
 });
 $("#btn2").click(function(){
  $("#box").animate({height:"100px"});
 });
});

希望所有这些事情对您有所帮助。此外，在jquery中，您只能调用＃sub1而不是其他名称，因此我认为jquery应该可以正常工作。

如果您仍然遇到问题，请告诉我们...因为据我了解，我只是发现了这些细节。

问候，