Center align Dropdown-Menü in jedem Nav Artikel

Question

Ich habe eine div mit einer bestimmten Größe, 800px breit und 50px groß, innen habe ich eine ungeordnete Liste von 6 Elementen, ausgerichtet auf das Zentrum dieser div, funktioniert alles gut so weit.

Dann möchte ich eine Dropdown-Liste von jedem Element erstellen. Gerade jetzt habe ich die zweite ul auf der linken Seite des Behälters div ausgerichtet.

Ich versuche, es auf die Mitte jedes Elements ausgerichtet zu halten, und die ul Elemente können nicht die gleiche Breite sein. Hier ist, was ich bisher habe: jsFiddle. Irgendwelche Vorschläge?

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

Answer 1

Sie relativ + absolute Positionen verwenden können, mit Tricks verwandeln .

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

jsFiddle

Answer 2

Ich bin ein wenig verwirrt durch Ihre Frage, aber ich glaube, Sie versuchen, den folgenden Effekt zu erzielen: http://demos.inspirationalpixels.com/dropdown-with-html-css-demo/

zu tun, dass Sie dieses Tutorial folgen: http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css

Hier ist ein JS Fiddle: 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; 
} 

Answer 3

/* 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; 
} 

Diese

Probieren Sie es aus meiner Demo nevbar

war