具有更大居中下拉列表的垂直ul li导航
具有更大居中下拉列表的垂直ul li导航
提问于 2017-07-18 22:45:08
我想这应该很简单，我正在尝试做一个带有数字的小导航，这些数字在悬停时显示下面的名称，应该是这样的：
但我不知道如何保持它居中，而不是在数字之间有很大的空白处。这是一个JSFiddle
.dropdown {
font-size: 10pt;
width: 10px;
}
nav ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
width: auto;
}
nav a {
color: #444;
display: block;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li ul {
font-size: 10pt;
height: 20px;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
width: 100%;
}
nav li ul a {
background: #bbb;
}这里的结果要归功于@Ovakuro：JSFiddle
Stack Overflow用户
回答已采纳
发布于 2017-07-18 23:17:46
这是一个使用flexbox的布局解决方案。我已经简化了你的CSS相当多，让我知道如果你有任何问题。
nav .cf,
.dropdown {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav .cf li {
position: relative;
}
nav .cf li a {
color: #444;
padding: 0 10px;
text-decoration: none;
}
nav .cf li:hover .dropdown {
opacity: 1;
visibility: visible;
}
/* style your dropdown menu here */
.dropdown {
width: 100%;
list-style: none;
font-size: 10pt;
position: absolute;
top: 30px;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdown li {
display: flex;
}
nav .cf .dropdown li a {
padding: 10px 20px;
background: #bbb;
text-align: center;
white-space: nowrap;
}
/* triangle */
.dropdown:after {
bottom: 100%;
content: " ";
position: absolute;
border: solid transparent;
border-bottom-color: #bbb;
border-width: 10px;
}<nav>
<ul class="cf">
<li>
<a href="#">01</a>
<ul class="dropdown">
<li><a href="#">E-CAMPUS</a></li>
</ul>
</li>
<li>
<a href="#">02</a>
<ul class="dropdown">
<li><a href="#">PEGASEZBUZZ</a></li>
</ul>
</li>
</ul>
</nav>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45170078
复制相关文章
相似问题
腾讯云开发者
