Javascript,css,html下拉菜单鼠标悬停

Question

我在菜单上使用了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"有关，但我不明白。

你们能帮帮我吗?

谢谢。

Answer 1

首先，注意在css的这一行有一个错误:

1 # sub1{左:0 px;: 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和一个min-width??我不确定这是否会验证W3C…也许它会导致CSS冲突如果你同时调用它们是为了在IE6中正确查看它，我建议你使用一个hack的宽度和所有其他浏览器只留下"min-width"。

最后一个奇怪的问题:在jquery中，为什么要使用。stop方法?为什么不直接使用。animate方法?你可以这样做:

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

我希望这些东西能对你有所帮助。此外，在jquery中，你只调用#sub1，而不是其他，所以我认为jquery应该工作得很好。

如果你仍然有问题，让我们知道…因为据我所知，我只发现了那些细节。

认为,