具有较大居中下拉菜单的垂直 ul li 导航答案

【问题标题】：Vertical ul li navigation with bigger centered dropdown具有较大居中下拉菜单的垂直 ul li 导航
【发布时间】：2017-07-18 14:45:07
【问题描述】：

我认为这很简单，我正在尝试用数字制作一个小型导航，在悬停时在下方显示一个名称，应该是这样的：

但我不知道如何保持居中并且数字之间没有很大的边距。这是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

【问题讨论】：

标签： css hover uinavigationbar

【解决方案1】：

这是使用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>

【讨论】：

【解决方案2】：

据我所知，这样做的唯一方法是为 ul 子级设置宽度，以便您可以在之后将其居中。如果您需要超出父母的宽度，这是必要的。

我使用transform translate，但是如果您需要完全向后兼容，您可以在js中执行此操作。另外，这样你可能会遇到屏幕侧面的问题，再次，js是你的朋友。

注意：我在 css 中添加了 /* new */，这样你就可以看到我做了什么。 ;) 干杯

.dropdown {
    font-size: 10pt;
    width: 10px;
}
nav ul {
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    position: relative; /* new */
}

nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    width: auto;
}

nav a {
    color: #444;
    display: block;
    padding: 1em;
    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;

    left: 50%; /* new */
    transform: translateX(-50%); /* new */
    width: 200px; /* new */
}

nav li:hover ul {
    opacity: 1;
    top: 50px;
    visibility: visible;
}

nav li ul li {
    width: 100%;
}

nav li ul a {
    background: #bbb;
}

<nav>
  <ul class="cf">
    <li><a class="dropdown" href="#">01</a>
      <ul>
        <li><a href="#">E-CAMPUS</a></li>
      </ul>
    </li>
    <li><a class="dropdown" href="#">02</a>
      <ul>
        <li><a href="#">PEGASEZBUZZ</a></li>
      </ul>
    </li>
  </ul>
</nav>

【讨论】：

感谢 Kiwad 的回答！

【解决方案3】：

这接近你想要的吗？

body {
  background-color: black;
}

.dropdown {
    font-size: 20pt;
    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: gray;
    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;
    margin-top: -10px;
}

nav li ul li {
    width: 100%;
}

nav li:hover ul:before {
    content: "";
    position: absolute;
    bottom: -10px;
    border-style: solid;
    border-color: #EDEDED transparent;
    display: block;
    top: -8px;
    bottom: auto;
    right: 15px;
    border-width: 0 10px 10px;
}

nav li ul a {
    background: #EDEDED;
    width: 100px;
    margin-left: -25px;
    margin-bottom: 100px;
    padding: 10px;
    color: #0050F7;
}

.dropdown:hover {
  color: white;
}

<nav>
  <ul class="cf">
    <li><a class="dropdown" href="#">01</a>
      <ul>
        <li><a href="#">E-CAMPUS</a></li>
      </ul>
    </li>
    <li><a class="dropdown" href="#">02</a>
      <ul>
        <li><a href="#">PEGASEZBUZZ</a></li>
      </ul>
    </li>
  </ul>
</nav>

【讨论】：

谢谢瑞奇！三角形突然消失了一点
我的是硬编码的，ovokuro 的 flexbox 解决方案非常干净。我今天学到了一些东西！我不知道人们如何看待讲话泡泡，但现在我知道了。好问题@Leshautsdurant :)

【解决方案4】：

或者，如果您希望悬停标签始终居中，您可以使用：

body {
  margin: 0;
  padding: 0;
}
.container {
  background-color: black;
  width: 500px;
  height: 300px;
}
ul {
  list-style: none;
  color: #666;
  font-size: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
  padding-top: 20px;
  position:relative;
}
ul li {
  display: inline-block;
  padding: 0 12px;
}
.hover {
  position:absolute;
  top:70px;  
  text-align:center;
  width:100%;
  left:0;
  display:none;
}
.hover span {
  display: inline-block;
  background-color:#fff;
  color:blue;
  font-size:30px;
  padding:12px 20px;
}
li:hover {color:#bbb;}
li:hover .hover {display:block;}
.hover:before {
  content:"";
  display:inline-block;
   width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;  
  border-bottom: 5px solid #fff;
  padding:0;
  position:absolute;
  top:-5px;
}
.hv1:before {left:154px;}
.hv2:before {left:214px;}
.hv3:before {left:278px;}
.hv4:before {left:340px;}

<div class="container">
  <ul>
    <li>01
      <div class="hover hv1"><span>This is the first 1</span></div>
    </li>
    <li>02
      <div class="hover hv2"><span>Tag2 here</span></div>
    </li>
    <li>03
      <div class="hover hv3 "><span>Tag3 much much longer</span></div>
    </li>
    <li>04
      <div class="hover hv4 "><span>Tag4</span></div>
    </li>
  </ul>



</div>

请注意，您需要一个足够空间让箭头显示的文本

【讨论】：

感谢阿尔瓦罗的回答！