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

时间：2017-07-18 14:45:08

标签： css hover uinavigationbar

我认为这很简单，我试图使用数字进行小型导航，在悬停时显示如下名称：enter image description here

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

4 个答案:

答案 0 :(得分：1)

据我所知，唯一的方法是为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>

答案 1 :(得分：1)

这接近你想要的吗？

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>

答案 2 :(得分：1)

以下是使用flexbox的布局解决方案。我已经简化了你的CSS了，如果你有任何问题，请告诉我。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

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

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>

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

相关问题
最新问题