我尝试构建一个Dropdown-Filter - 如果选择了过滤器中的Item，它应该显示在“Filter”-ToggleButton旁边 - 就像关闭状态一样。
但如果我将悬停在打开/关闭链接上，“选定项目”会跳到底部 - 我知道原因 但是我该如何防止这种情况 - “选定项目”如何保留在过滤按钮旁边？
JSBin - 示例：
http://jsbin.com/lucayaqeno/
<section class="filter dropdown">
<nav class="container">
<ul>
<li>
<a href="#" class="toggle" data-dropdown="dropdown1">Filter >
<span class="icon-chevron-right"><!-- --></span></a>
<form enctype="multipart/form-data" id="" method="post" action="" class="">
<div class="col-sm-6">
<h3>Channels</h3>
<ul class="row" role="menu">
<li>
<input type="checkbox" value="1" class="checkbox-widget list-field" name="channel:list" id="channel-1">
<label for="channel-1"><span class="label">Channel 1</span></label>
</li>
<li>
<input type="checkbox" value="2" class="checkbox-widget list-field" name="channel:list" id="channel-2">
<label for="channel-2"><span class="label">Channel 2</span></label>
</li>
<li>
<input type="checkbox" value="3" class="checkbox-widget list-field" name="channel:list" id="channel-3">
<label for="channel-3"><span class="label">Channel 3</span></label>
</li>
</ul>
</div>
</form>
</li>
<li>
<a href="">selected Filter</a>
</li>
<li>
<a href="">selected Filter</a>
</li>
</ul>
</nav>
</section>
<p>this content should be always visible - move/jump down</p>
如果有人对标记有更好的想法
感谢您的帮助！
答案 0 :(得分：1)
body {
background-color: white;
}
.filter {
background-color: #19679e;
font-size: 16px;
position: relative;
display: block;
}
.filter a,
.filter label {
color: #FFFFFF;
cursor: pointer;
}
.filter ul {
list-style: none;
padding: 0;
margin: 0;
}
.filter.dropdown form {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #19679e;
}
.filter.dropdown nav > ul > li {
display: inline-block;
}
.filter.dropdown nav > ul > li:first-child:hover form,
.filter.dropdown nav > ul > li:first-child a:hover form,
.filter.dropdown nav > ul > li:first-child > a:focus + form {
visibility: visible;
opacity: 1;
}
.filter.dropdown nav > ul > li:first-child a {
padding: 15px;
display: inline-block;
background-color: #4785b1;
}<section class="filter dropdown">
<nav class="container">
<ul>
<li>
<a href="#" class="toggle" data-dropdown="dropdown1">Filter >
<span class="icon-chevron-right"><!-- --></span></a>
<form enctype="multipart/form-data" id="" method="post" action="" class="">
<div class="col-sm-6">
<h3>Channels</h3>
<ul class="row" role="menu">
<li>
<input type="checkbox" value="1" class="checkbox-widget list-field" name="channel:list" id="channel-1">
<label for="channel-1"><span class="label">Channel 1</span></label>
</li>
<li>
<input type="checkbox" value="2" class="checkbox-widget list-field" name="channel:list" id="channel-2">
<label for="channel-2"><span class="label">Channel 2</span></label>
</li>
<li>
<input type="checkbox" value="3" class="checkbox-widget list-field" name="channel:list" id="channel-3">
<label for="channel-3"><span class="label">Channel 3</span></label>
</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Categories</h3>
<ul class="row" role="menu">
<li>
<input type="checkbox" value="1" class="checkbox-widget list-field" name="category:list"
id="category-1">
<label for="category-1"><span class="label">Category One</span></label>
</li>
<li>
<input type="checkbox" value="2" class="checkbox-widget list-field" name="category:list"
id="category-2">
<label for="category-2"><span class="label">Category Two</span></label>
</li>
<li>
<input type="checkbox" value="3" class="checkbox-widget list-field" name="category:list"
id="category-3">
<label for="category-3"><span class="label">Category Three</span></label>
</li>
<li>
<input type="checkbox" value=4" class="checkbox-widget list-field" name="category:list" id="category-4">
<label for="category-4"><span class="label">Category Four</span></label>
</li>
</ul>
</div>
<hr>
<div class="formControls row">
<div class="col-sm-8 pull-right smallhi text-right">
<small><a href="#">Reset</a></small>
<button class="btn-slash transparent inverted" name="form.buttons.send" type="submit">
<span class="icon"></span> Send
</button>
</div>
</div>
</form>
</li>
<li>
<a href="">selected Filter</a>
</li>
<li>
<a href="">selected Filter</a>
</li>
</ul>
</nav>
</section>
答案 1 :(得分：0)
使表单元素位置：绝对;并删除溢出：隐藏的部分标记
CSS
.filter.dropdown nav > ul > li:first-child:hover form, .filter.dropdown nav > ul > li:first-child a:hover form, .filter.dropdown nav > ul > li:first-child > a:focus + form
{
position: absolute;
visibility: visible;
opacity: 1;
width: 100%;
background-color: #ccc;
}
.filter {
background-color: #19679e;
font-size: 16px;
position: relative;
display: block;
}
答案 2 :(得分：0)
body {
background-color: white;
}
.filter {
background-color: #19679e;
font-size: 16px;
position: relative;
display: block;
}
.filter a,
.filter label {
color: #FFFFFF;
cursor: pointer;
}
.filter ul {
list-style: none;
padding: 0;
margin: 0;
}
.filter.dropdown form {
display: none;
}
.filter.dropdown .selected {
display: inline-block;
}
.filter.dropdown .selected > li {
display: inline-block;
}
.filter.dropdown nav > ul > li:first-child:hover form,
.filter.dropdown nav > ul > li:first-child a:hover form,
.filter.dropdown nav > ul > li:first-child > a:focus + form {
display: block;
}
.filter.dropdown nav > ul > li:first-child > a {
padding: 15px;
display: inline-block;
background-color: #4785b1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="filter dropdown">
<nav class="container">
<ul>
<li>
<a href="#" class="toggle" data-dropdown="dropdown1">Filter >
<span class="icon-chevron-right"><!-- --></span></a>
<ul class="selected">
<li><a href="">selected Filter</a></li>
<li><a href="">selected Filter</a></li>
</ul>
<form enctype="multipart/form-data" id="" method="post" action="" class="row">
<div class="col-sm-6">
<h3>Channels</h3>
<ul class="row" role="menu">
<li>
<input type="checkbox" value="1" class="checkbox-widget list-field" name="channel:list"
id="channel-1">
<label for="channel-1"><span class="label">Channel 1</span></label>
</li>
<li>
<input type="checkbox" value="2" class="checkbox-widget list-field" name="channel:list"
id="channel-2">
<label for="channel-2"><span class="label">Channel 2</span></label>
</li>
<li>
<input type="checkbox" value="3" class="checkbox-widget list-field" name="channel:list"
id="channel-3">
<label for="channel-3"><span class="label">Channel 3</span></label>
</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Categories</h3>
<ul class="row" role="menu">
<li>
<input type="checkbox" value="1" class="checkbox-widget list-field" name="category:list"
id="category-1">
<label for="category-1"><span class="label">Category One</span></label>
</li>
<li>
<input type="checkbox" value="2" class="checkbox-widget list-field" name="category:list"
id="category-2">
<label for="category-2"><span class="label">Category Two</span></label>
</li>
<li>
<input type="checkbox" value="3" class="checkbox-widget list-field" name="category:list"
id="category-3">
<label for="category-3"><span class="label">Category Three</span></label>
</li>
<li>
<input type="checkbox" value=4" class="checkbox-widget list-field" name="category:list"
id="category-4">
<label for="category-4"><span class="label">Category Four</span></label>
</li>
</ul>
</div>
<div class="col-sm-offset-6 col-sm-6">
<small><a href="#">Reset</a></small>
<button class="btn-slash transparent inverted" name="form.buttons.send" type="submit">
<span class="icon"></span> Send
</button>
</div>
</form>
</li>
</ul>
</nav>
</section>
<div class="container">this content should be always visible - move/jump down</div>