中心对齐下拉菜单中的每个导航项

我有一个div具有特定的尺寸，800px宽和50px高，里面我有一个无序列表中的6个元素，对齐到这个div的中心，一切工作正常。中心对齐下拉菜单中的每个导航项

然后，我想从每个元素创建一个下拉列表。现在我有第二个ul对齐容器的左侧div。

我试图保持它对齐到每个元素的中心，并且ul元素不能是相同的宽度。这是我到目前为止：jsFiddle。有什么建议么？

#bar { 
 
    width: 800px; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
    height: 50px; 
 
    background-color: lime; 
 
    position: absolute; 
 
    top: 20px; 
 
} 
 
.test-navbar ul { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style: none; 
 
    background-color: ; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
} 
 
.test-navbar li { 
 
    display: inline-block; 
 
    width: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.test-navbar a { 
 
    text-align: center; 
 
    padding: 9px; 
 
    margin: 0; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #313131; 
 
    font-family: 'Oswald', sans-serif; 
 
    margin-top: 0px; 
 
    font-size: 23px; 
 
    background-color: ; 
 
} 
 
.test-navbar a:hover { 
 
    color: #f50057; 
 
} 
 
.test-navbar ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0%; 
 
    background: #fff; 
 
    margin-left: 0px; 
 
    text-align: center; 
 
    width: 200px; 
 
    line-height: 40px; 
 
    padding: 10px; 
 
} 
 
.test-navbar ul ul li { 
 
    float: none; 
 
    width: 100%; 
 
    background-color: ; 
 
} 
 
.test-navbar ul ul a { 
 
    line-height: 0px; 
 
    padding: 5px 5px; 
 
    width: 100%; 
 
    background-color: ; 
 
} 
 
.test-navbar ul li:hover > ul { 
 
    display: block; 
 
}

<div id="bar"> 
 
    <div class="test-navbar"> 
 
    <ul> 
 
     <li> 
 
     <a href="#">PASION</a> 
 
     <ul> 
 
      <li><a href="">EXTRA FROM PASION1</a></li> 
 
      <li><a href="">EXTRA FROM PASION2</a></li> 
 
      <li><a href="">EXTRA FROM PASION3</a></li> 
 
      <li><a href="">EXTRA FROM PASION4</a></li> 
 
      <li><a href="">EXTRA FROM PASION5</a></li> 
 
      <li><a href="">EXTRA FROM PASION6</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">EXTRA AREA</a></li> 
 
     <li><a href="#">VIDEO</a></li> 
 
     <li> 
 
     <a href="#">ANOTHER LINK</a> 
 
     <ul> 
 
      <li><a href="">EXTRA FROM PASION1</a></li> 
 
      <li><a href="">EXTRA FROM PASION2</a></li> 
 
      <li><a href="">EXTRA FROM PASION3</a></li> 
 
      <li><a href="">EXTRA FROM PASION4</a></li> 
 
      <li><a href="">EXTRA FROM PASION5</a></li> 
 
      <li><a href="">EXTRA FROM PASION6</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">LINK5 STYLE</a></li> 
 
     <li><a href="#">BYE</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

来源

2016-04-01 Eugenio

您可以使用相对+绝对位置，用变换花样。

.test-navbar li { 
    position: relative; 
} 
.test-navbar ul ul { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

jsFiddle

来源

2016-04-01 17:57:57 Stickers

谢谢@Pangloss它的作品！我会研究你做了什么来更好地理解它，谢谢！ – Eugenio

我有点糊涂了您的问题，但我相信你想达到以下效果：http://demos.inspirationalpixels.com/dropdown-with-html-css-demo/

要做到这一点，你可以按照本教程：http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css

这里是JS小提琴：https://jsfiddle.net/8apu5yp6/

HTML：

<div class="menu-wrap"> 
    <nav class="menu"> 
     <ul class="clearfix"> 
      <li><a href="#">Home</a></li> 
      <li> 
       <a href="#">Movies <span class="arrow">&#9660;</span></a> 

       <ul class="sub-menu"> 
        <li><a href="#">In Cinemas Now</a></li> 
        <li><a href="#">Coming Soon</a></li> 
        <li><a href="#">On DVD/Blu-ray</a></li> 
        <li><a href="#">Showtimes &amp; Tickets</a></li> 
       </ul> 
      </li> 
      <li><a href="#">T.V. Shows</a></li> 
      <li class="current-item"><a href="#">Photos</a></li> 
      <li><a href="#">Site Help</a></li> 
     </ul> 
    </nav> 
</div>

CSS：

body { 
    background:#bf5c71 url('body-bg.jpg'); 
} 

.clearfix:after { 
    display:block; 
    clear:both; 
} 

/*----- Menu Outline -----*/ 
.menu-wrap { 
    width:100%; 
    box-shadow:0px 1px 3px rgba(0,0,0,0.2); 
    background:#3e3436; 
} 

.menu { 
    width:1000px; 
    margin:0px auto; 
} 

.menu li { 
    margin:0px; 
    list-style:none; 
    font-family:'Ek Mukta'; 
} 

.menu a { 
    transition:all linear 0.15s; 
    color:#919191; 
} 

.menu li:hover > a, .menu .current-item > a { 
    text-decoration:none; 
    color:#be5b70; 
} 

.menu .arrow { 
    font-size:11px; 
    line-height:0%; 
} 

/*----- Top Level -----*/ 
.menu > ul > li { 
    float:left; 
    display:inline-block; 
    position:relative; 
    font-size:19px; 
} 

.menu > ul > li > a { 
    padding:10px 40px; 
    display:inline-block; 
    text-shadow:0px 1px 0px rgba(0,0,0,0.4); 
} 

.menu > ul > li:hover > a, .menu > ul > .current-item > a { 
    background:#2e2728; 
} 

/*----- Bottom Level -----*/ 
.menu li:hover .sub-menu { 
    z-index:1; 
    opacity:1; 
} 

.sub-menu { 
    width:160%; 
    padding:5px 0px; 
    position:absolute; 
    top:100%; 
    left:0px; 
    z-index:-1; 
    opacity:0; 
    transition:opacity linear 0.15s; 
    box-shadow:0px 2px 3px rgba(0,0,0,0.2); 
    background:#2e2728; 
} 

.sub-menu li { 
    display:block; 
    font-size:16px; 
} 

.sub-menu li a { 
    padding:10px 30px; 
    display:block; 
} 

.sub-menu li a:hover, .sub-menu .current-item a { 
    background:#3e3436; 
}

来源

2016-04-01 17:52:29 Bojan

好吧@Paulie_D，我在HTML CSS，显示做，随着一个的jsfiddle。 – Bojan

/* NAV BAR */ 

.test-navbar { 
    background-color: #333; 
    margin-bottom: 2px; 
    height: 40px; 
    color: white; 
    border-radius: 10px; 
} 

.test-navbar ul { 
    list-style: none; 
    overflow: hidden; 

} 

.test-navbar ul li { 
    float: left; 
    border-right: 2px solid #dede0e; 
    font-size: 1.5em; 

} 
.test-navbar ul li a { 
    color: white; 
    display: block; 
    text-decoration: none; 
    padding: 6px 10px; 

} 
.test-navbar ul li:hover { 
    background-color: #000000; 

} 

/* DROP DOWN MENU */ 

.test-navbar ul ul { 
    display: none; 
    list-style: none; 
    color: blueviolet; 
    background: #a80000; 
    position: absolute; 

} 
.test-navbar ul ul li { 
    float: none; 
    font-size: 1em; 
    border: none; 
    position: relative; 
    top: 100%; 
    left: 0; 
    border-top:3px solid white; 
} 
.test-navbar ul ul li a { 
    border-right: none; 
    padding: 0 20px; 
} 
.test-navbar ul li:hover > ul 
{ 
    display: block; 
}

尝试这个

这是从我的演示nevbar

来源

2016-04-01 17:57:15 MaxySpark

中心对齐下拉​​菜单中的每个导航项

回答

相关问题

中心对齐下拉菜单中的每个导航项