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

debugcn 发表于 Dev

里奥·杜兰德

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

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

溶胶

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。