我有一个非常令人困惑的问题,在显示类别'搜索时,li下移到下拉框下面,所有其他li都留在原处应该是什么建议?
只有在显示下拉列表时才显示“搜索”li并按预期工作。
http://i43.tinypic.com/2z686md.png
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: <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', '');
}
});
答案 0 :(得分:1)
以下是对您的代码的修复,只需将下拉类设为absolute
,不会影响页面上的其他元素。
答案 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;
}