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像素;顶：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中你为什么要定义一个和另一个最小宽度？我不确定这是否会验证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应该运行良好。

如果您仍有问题，请告诉我们......因为据我所知，我只发现了这些细节。

此致

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

1 个答案: