文章/答案/技术大牛

发布

社区首页 >问答首页 >具有更大居中下拉列表的垂直ul li导航

问具有更大居中下拉列表的垂直ul li导航
EN

Stack Overflow用户

提问于 2017-07-18 22:45:08

回答 4查看 67关注 0票数 2

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

但我不知道如何保持它居中，而不是在数字之间有很大的空白处。这是一个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

hover

uinavigationbar

css

回答 4

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>

票数 1

Stack Overflow用户

发布于 2017-07-18 22:58:20

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

我使用的是transform translate，但是如果你需要完全向后兼容，你可以在js中做到这一点。同样，你可能会在屏幕边上遇到问题，再说一次，js是你的朋友。

注意:我在css中添加了新的/* */，所以你可以看到我做了什么。;)干杯

.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>

票数 1

Stack Overflow用户

发布于 2017-07-18 23:02:26

这接近你想要的了吗？

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45170078

复制

相似问题

问具有更大居中下拉列表的垂直ul li导航
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有更大居中下拉列表的垂直ul li导航EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有更大居中下拉列表的垂直ul li导航
EN