有更大的中心下拉

Question

我認爲這將是簡單的垂直UL李導航，我試圖與該數字下方顯示懸停名字的小導航應該是這樣的：

但我不知道如何保持中心位置，數字之間沒有大的空白。這裏是一個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

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

Answer 2

據我所知，要做到這一點的唯一方法是將寬度設置爲UL孩子，讓你也可以在中央。如果你需要超越父母的寬度，這是必要的。

我使用轉換翻譯，但如果你需要完全向後兼容，你會在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>

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

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

通知你需要覆蓋足夠的空間文本箭頭顯示