Dropdown-Menü Breite von Inhalt

Question

Ich habe ein Dropdown-Menü, das ich ändern möchte, dass die Dropdown-Menü-Breite wird nach Inhalt sein. Ich möchte ändern, dass das Dropdown <li> in nur einer Zeile unter Haupt <li> nebeneinander sein wird.

Ich habe es auf jsfiddle hier, wo ich Sass habe, die ich benutze. http://jsfiddle.net/hhkrp71f/3/

Hier ist meine Lösung:

.header__links { 
 
    float: right; 
 
    margin-top: 40px; 
 
} 
 
.header__links nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header__links nav ul li { 
 
    font-weight: 100; 
 
    font-style: italic; 
 
    color: red; 
 
    float: left; 
 
    margin-left: 25px; 
 
} 
 
.header__links nav ul li a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
.header__links nav ul li a:hover { 
 
    color: red; 
 
    transition: color 0.7s ease; 
 
} 
 
.header__links nav ul li:hover ul { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
} 
 
.header__links nav ul li ul { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    -webkit-transition: 500ms ease; 
 
    -moz-transition: 500ms ease; 
 
    -o-transition: 500ms ease; 
 
    transition: 500ms ease; 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 20px 0 0; 
 
} 
 
.header__links nav ul li ul li { 
 
    margin: 0; 
 
    padding: 10px; 
 
    background-color: blue; 
 
}

<div class="header__links"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Test</a> 
 
     <ul> 
 
      <li><a href="#">Test Test Test</a></li> 
 
      <li><a href="#">Test Test</a></li> 
 
      <li><a href="#">Test Test Test</a></li> 
 
      <li><a href="#">Test Test</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Test</a></li> 
 
     <li><a href="#">Test</a></li> 
 
     <li><a href="#">Test</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

Answer 1

hinzufügen right: 0 zu Ihrer inneren ul.

.header__links { 
 
    float: right; 
 
    margin-top: 40px; 
 
} 
 
.header__links nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header__links nav ul li { 
 
    font-weight: 100; 
 
    font-style: italic; 
 
    color: red; 
 
    float: left; 
 
    margin-left: 25px; 
 
} 
 
.header__links nav ul li a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
.header__links nav ul li a:hover { 
 
    color: red; 
 
    transition: color 0.7s ease; 
 
} 
 
.header__links nav ul li:hover ul { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
} 
 
.header__links nav ul li ul { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    -webkit-transition: 500ms ease; 
 
    -moz-transition: 500ms ease; 
 
    -o-transition: 500ms ease; 
 
    transition: 500ms ease; 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 20px 0 0; 
 
    right: 0; 
 
} 
 
.header__links nav ul li ul li { 
 
    margin: 0; 
 
    padding: 10px; 
 
    background-color: blue; 
 
}

<div class="header__links"> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Test</a> 
 
     <ul> 
 
      <li><a href="#">Test Test Test</a></li> 
 
      <li><a href="#">Test Test</a></li> 
 
      <li><a href="#">Test Test Test</a></li> 
 
      <li><a href="#">Test Test</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Test</a></li> 
 
     <li><a href="#">Test</a></li> 
 
     <li><a href="#">Test</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>