奇怪的下拉行为

时间:2014-01-23 09:59:07

标签: jquery html css menu

我有一个非常令人困惑的问题,在显示类别'搜索时,li下移到下拉框下面,所有其他li都留在原处应该是什么建议?

只有在显示下拉列表时才显示“搜索”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', '');
    }
});

3 个答案:

答案 0 :(得分:1)

以下是对您的代码的修复,只需将下拉类设为absolute,不会影响页面上的其他元素。

fiddle

答案 1 :(得分:0)

制作下拉列表的位置absolute; DEMO

答案 2 :(得分:0)

在您的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;
}