[英]How to put li side by side in drop down menu?
我试图让这个下拉菜单中的是并排的,而不是一个名单..但对我来说,做到这一点我不得不删除position:absolute
从#navigation > .nav-body > .menu > ul > li > .drop-ul
仍然不行,因为它弄乱了所有代码..我怎样才能并排? 我会尝试 jQuery 但不知道如何。
<section id="navigation">
<div class="nav-body">
<section class="menu">
<ul>
<li>
<a href="/"><span class="icon"></span>home</a>
</li>
<li>
<a href="/"><span class="icon"></span>second</a>
<ul class="drop-ul">
<a href="/guide-keto-diet">
<li>
sub 1
</li>
</a>
<a href="/">
<li>
sub 2
</li>
</a>
<a href="/">
<li>
sub 3
</li>
</a>
<a href="/">
<li>
sub 4
</li>
</a>
<a href="/">
<li>
sub 5
</li>
</a>
</ul>
</li>
<li><a href="/"><span class="icon"></span>cat 1</a></li>
</ul>
</section>
</div>
我最近为一个网站构建了一个纯 CSS 下拉菜单。 它的结构与你的相似。 列表项 ( li
) 并排排列。 代码已通过验证,没有错误或警告。
HTML
<nav id="main-nav">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul class="main-nav-sub">
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
<li><a href="#">Menu 2.5</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="main-nav-sub">
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<ul class="main-nav-sub">
<li><a href="#">Menu 5.1</a></li>
<li><a href="#">Menu 5.2</a></li>
<li><a href="#">Menu 5.3</a></li>
<li><a href="#">Menu 5.4</a></li>
</ul>
</li>
</ul>
</nav>
CSS
#main-nav > ul {
list-style-type: none;
padding: 0;
border: 1px solid #999;
position: absolute;
}
#main-nav > ul > li {
float: left;
background-color: #000;
}
.main-nav-sub {
list-style-type: none;
padding: 0;
margin: 0;
}
#main-nav > ul > li+li {
border-left: 1px solid #999;
}
.main-nav-sub > li {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
background-color: #000;
}
.main-nav-sub > li:first-child {
border-top: 1px solid #999;
}
#main-nav > ul > li > a,
.main-nav-sub > li > a {
text-decoration: none;
white-space: nowrap;
display: block;
color: #fff;
font-family: verdana, sans-serif;
font-size: .8em;
font-weight: bold;
padding: 10px 20px;
}
#main-nav > ul > li:hover > a {
color: #000;
background-color: #fff;
}
.main-nav-sub > li:hover > a {
color: #000;
background-color: #fff;
}
.main-nav-sub {
position: absolute;
z-index: -999;
opacity: 0;
filter: alpha(opacity=0); /* IE older versions */
zoom: 1; /* IE older versions */
}
#main-nav > ul > li:hover > .main-nav-sub {
z-index: 100;
opacity: 1;
filter: alpha(opacity=100); /* IE older versions */
zoom: 1; /* IE older versions */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
演示: http : //jsfiddle.net/x9upvtp0/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.