Question

好的，首先，我需要获得什么，

enter image description here

2011,2010年，直到你徘徊PORTFOLIO才能看到showreels（但是当你第一次点击它时会在iphone中显示，但现在没关系）

现在，HTML;只是一个简单的UL与sub UL的

<div id="nav">
                            <ul>
                                <li><a href="portfolio.html">PORTFOLIO</a>
                                    <ul class="left">
                                        <li><a href="#">2011</a></li>
                                        <li><a href="#">2010</a></li>
                                        <li><a href="#">SHOWREELS</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">LOCATIONS</a>
                                    <ul class="left">
                                        <li><a href="#"><img src="/img/westlich.png" alt="Westlich-t" /></a></li>
                                        <li><a href="#"><img src="/img/sudlich_pink.png" alt="Sudlich-t" /></a></a></li>
                                        <li><a href="#"><img src="/img/sudlich_orange.png" alt="Sudlich-t" /></a></a></li>
                                    </ul>
                                </li>
                                <li><a href="#">TEAM</a></li>
                                <li><a href="#">JOBS</a></li>
                                <li><a href="#">KONTAKT</a></li>                


</ul>
                </div>

现在，CSS

#nav ul{

}
/*Elemento del men� de navegaci�n, ejemplo: kontact*/

#nav ul li{
    float:left; clear:both; height:40px;
}
#nav ul li a{ color:#000;background:#fff;width:auto;padding: 10px;margin-bottom: 4px; font-weight:bold;}
#nav ul li ul{
     width:100%;
     display:block;
     float:left;
     clear:both;
     z-index:100;
     margin-bottom:100px;
}

/*Sublista del men� de navegacion, de la izda; por ejemplo, portfolio*/
#nav ul li ul.left{
    float:left;

}
/*Sublista del men� de navegacion, de la izda; como Locations*/

#nav ul li ul li{
    width:100%;
}
#nav ul li ul li a{
    width:auto;
    color:#fff;
    background-color:#000;
}

现在，Javascript;当父LI悬停时，使子UL可见

function menu_desplegable(){
$("#nav ul li ul").css({display: "none"}); // Opera Fix
$("#nav ul li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);

        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });

}

$(document).ready(function() {
  menu_desplegable();
});

正如你可以test here下拉效果一样，但它不会移动<li>;例如，如果你悬停组合，你可以看到<li>的其余部分下面的子列表，我需要它们移动，

我该如何解决这个问题？我想我可以用CSS修复它，但我很丢失。特别是因为它甚至不尊重更高的z-index：S

Answer 1

您正在限制#nav ul li的高度，这会阻止它的增长。我会在一秒钟内粘贴一个jsfiddle。

Answer 2

改变4件事：

使用.show()和.hide()代替.css({visibility: "hidden"})。后者将隐藏元素，但在页面上为其保留空间，从而产生空白。您需要.show()和.hide()，因为它们会使用隐藏元素的display: none并删除它在页面上占用的空间。

删除此样式声明：

#nav ul li
{
    height: 40px;
    clear: both;
    float: left;
}

从subnav ul（#nav ul li ul）中删除底部边距样式定义。

将display: inline-block;添加到#nav ul li a。

修正了它：http://jsfiddle.net/gilly3/3QffD/2/

但你可以真正清理你的css（从链接中查看css）。大多数这些样式是不必要的，只会使调试更难。特别是我发现很多float，clear和width: 100%是不必要的甚至是有害的。除非你确定需要，否则尽量避免这些。

这是删除了大部分css的我的版本：http://jsfiddle.net/gilly3/3QffD/

Answer 3

这实际上是在没有Javascript的情况下通过在CSS中使用：hover选择器实现的。这是一个例子：

http://jsfiddle.net/ebiewener/7d7sr/

然而，问题的真正原因是你的CSS：

#nav ul li{
    float:left; clear:both; height:40px;
}

通过为li提供40px的固定高度，当您将鼠标悬停在其上时，页面不会向下移动以下li标签，因为它仍然认为它们是40px。因此，不要使用#nav ul li {height:40px}，而是将40px应用于其包含的锚标记的高度：#nav ul li a {height:40px}。这将允许包含li的高度在显示其子ul时展开。

在悬停<li>时，内部<ul>必须滑动下一个<li> </li> </ul> </li>

3 个答案: