奇怪的下拉行为

Question

我有一个非常令人困惑的问题，当类显示时，类的搜索下移下来，所有其他李留在他们应该在哪里，有什么建议吗？

只有当显示下拉菜单时，否则'搜索'li出现并按预期工作。

http://i43.tinypic.com/2z686md.png

EXAMPLE

HTML：

<ul class="nav"> 
    <li class="first"><a href="/">HOME</a></li> 
    <li> 
     <a href="#">CATEGORIES<span class="arrow"></span></a> 
     <div class="dropdown"> 
      <div class="error">Unable to find category listings.</div> 
     </div> 
    </li> 
    <li class="search"> 
     SEARCH:&nbsp;<input type="text" name="search"> 
    </li> 
</ul> 

CSS：

ul.nav .dropdown { 
    position: relative; 
    width: 98%; 
    height: 130px; 
    margin-top: 38px; 
    margin-left: -2%; 
    padding: 2%; 
    color: #FFFFFF; 
    background: #0F2F54; 
    opacity: 0.95; 
    z-index: 1; 
} 
ul.nav li .dropdown { 
    display: none; 
} 
ul.nav li:hover .dropdown { 
    display: block; 
} 
.dropdown ul.category li a { 
    width: 23%; 
    color: #FFFFFF; 
    font-size: 20px; 
    border-right: none; 
} 
.dropdown ul.category li a:hover { 
    background: none; 
    text-decoration: underline; 
} 
ul.nav li.search { 
    float: right; 
    height: 32px; 
    margin-right: 2%; 
    padding: 6px 10px 0 10px; 
    border-left: 1px #336198 solid; 
    border-right: 1px #336198 solid; 
    display: inline; 
} 
ul.nav li.search input { 
    width: 200px; 
    padding: 4px; 
} 

的Javascript：

$("ul.nav .dropdown").on({ 
    mouseenter: function() { 
     $(this).prev().css('background', '#0F2F54'); 
    }, 
    mouseleave: function() { 
     $(this).prev().css('background', ''); 
    } 
}); 

Answer 1

这是修复您的代码，只是使下拉类为absolute不会影响页面上的其他元素。

fiddle

Answer 2

使下拉的位置absolute; DEMO

Answer 3

在你的CSS .dropdown类有position:relative这意味着它赞成相对于与其相邻的元件将其更改为绝对会让.dropdown对齐按照绝对位置。

ul.nav .dropdown { 
    position: absolute; 
    width: 98%; 
    height: 130px; 
    margin-top: 38px; 
    margin-left: -2%; 
    padding: 2%; 
    color: #FFFFFF; 
    background: #0F2F54; 
    opacity: 0.95; 
    z-index: 1; 
}