我无法在水滴中并排显示导航列。
请参阅此处http://fiddle.jshell.net/Dnamixup/ML57B/1/
另外我认为我有我的立场:亲戚在错误的地方,这可能是问题?
谢谢你们
<div class="nav-wrap">
<ul class="nav">
<li><a href="#">Canvas Prints</a>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Canvas</a>
</li>
<li><a href="#">Banksy Canvas</a>
</li>
<li><a href="#">City Canvas</a>
</li>
</ul>
</div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Canvas</a>
</li>
<li><a href="#">Banksy Canvas</a>
</li>
<li><a href="#">City Canvas</a>
</li>
</ul>
</div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Canvas</a>
</li>
<li><a href="#">Banksy Canvas</a>
</li>
<li><a href="#">City Canvas</a>
</li>
</ul>
</div>
</li>
<li><a href="#">Wall Stickers</a>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Stickers</a>
</li>
<li><a href="#">Banksy Stickers</a>
</li>
<li><a href="#">City Stickers</a>
</li>
</ul>
</div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Stickers</a>
</li>
<li><a href="#">Banksy Stickers</a>
</li>
<li><a href="#">City Stickers</a>
</li>
</ul>
</div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Stickers</a>
</li>
<li><a href="#">Banksy Stickers</a>
</li>
<li><a href="#">City Stickers</a>
</li>
</ul>
</div>
</li>
<li><a href="#">Art Prints</a>
</li>
<li><a href="#">Wall Murals</a>
</li>
<li><a href="#">Personalised Photos</a>
</li>
</ul>
/* NAV RESET */
.nav {
margin:0;
padding:0;
list-style:none;
}
.nav a {
text-decoration:none;
}
.nav li ul {
list-style:none;
}
/* NAV STYLE */
.nav li {
float:left;
padding:10px;
position:relative;
}
.nav li div {
display:none;
position:absolute;
}
.nav li:hover > div {
display:block;
}
.nav .nav-column {
float:left;
}
答案 0 :(得分:0)
你走了。
<强> WORKING DEMO 强>
CSS更改:
.nav li div {display:none;position:absolute; left:-39px;}
为了让它并排坐下,你走了。
<强> WORKING DEMO - 2 强>
CSS更改:
.nav li div {display:none;position:absolute; left:-39px; width:470px;}
希望这有帮助。
答案 1 :(得分:0)
.nav-column {float:left;border:1px solid red;}
.nav-column ul{ list-style-type: none;padding:0;margin:0;}
.nav-column ul li{border:1px solid #999;}
答案 2 :(得分:0)
这是一个更新的小提琴,因此您可以在2列,3等显示下拉列表
上面的答案和这都有帮助,谢谢大家!
<div class="nav-wrap">
<ul class="nav">
<li><a href="#">Canvas Prints</a>
<div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Canvas</a>
</li>
<li><a href="#">Banksy Canvas</a>
</li>
<li><a href="#">City Canvas</a>
</li>
</ul>
</div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Canvas</a>
</li>
<li><a href="#">Banksy Canvas</a>
</li>
<li><a href="#">City Canvas</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Wall Stickers</a>
<div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Stickers</a>
</li>
<li><a href="#">Banksy Stickers</a>
</li>
<li><a href="#">City Stickers</a></li>
</ul>
</div>
<div class="nav-column">
<ul>
<li><a href="#">Abstract Stickers</a>
</li>
<li><a href="#">Banksy Stickers</a>
</li>
<li><a href="#">City Stickers</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Art Prints</a>
</li>
<li><a href="#">Wall Murals</a>
</li>
<li><a href="#">Personalised Photos</a>
</li>
</ul>
/* NAV RESET */
.nav {
margin:0;
padding:0;
list-style:none;
}
.nav a {
text-decoration:none;
}
.nav li ul {
list-style:none;
}
/* NAV STYLE */
.nav li {
float:left;
padding:10px;
position:relative;
}
.nav > li > div {
display:none;
position:absolute;
width:470px;
}
.nav li:hover > div {
display:block;
}
.nav .nav-column {
float:left;
width:160px;
}