内容別のドロップダウンメニューの幅

Question

私はドロップダウンメニューを持っています。私は変更したい、そのドロップダウン<li>は、メインの<li>の隣の唯一の行になります。

私はここでjsfiddleに持っています。ここでは私が使っている草があります。

.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

は、あなたの内側のulにright: 0を追加：http://jsfiddle.net/hhkrp71f/3/

は、ここに私のソリューションです。

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