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{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 和一个 min-width？我不确定这是否适用于 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 应该运行良好。

如果您仍然遇到问题，请告诉我们...因为据我所知，我只找到了这些细节。

问候，