ドロップダウンメニューを表示

Question

私はモバイルドロップダウンメニューを作っています。このメニューには、ドロップダウンメニューのように開き、リストを押し下げるサブメニューがあります。私はこれのほとんどを行ったが、サブメニューが正しく表示されません。リストの実体の下に置かれるのではなく、そのリストの横に表示されます。 （リストの残りの部分をプッシュします。サブメニューの位置を絶対に設定すると、正しく表示されますが、リストの残りの部分が押し出されることはありません）

また、 "list-style-type"をnoneに変更することでした（私は箇条書きを望んでいません）、メニュー全体が壊れます...なぜそのような理由がわかりません。

HTML

<div id="dropdownmobile" class="mobile-content"> 
    <ul> 
    <li><a href="/test">Menu 1</a></li> 
    <li class="mobhasdrop"><a>Menu 2 - Click Me</a><img src="/img/logo.png"/> 
     <ul class="mobdropdown"> 
     <li><a href="">Dropdown 1</a></li> 
     <li><a href="">Dropdown 2</a></li> 
     <li><a href="">Dropdown 3</a></li> 
     </ul> 
    </li> 
    <li><a href="">Menu 3</a></li> 
    <li><a href="">Menu 4</a></li> 
    <li class="mobhasdrop"><a href="">Menu 5 - This one too</a><img src="/img/logo.png"/> 
     <ul class="mobdropdown"> 
     <li><a href="">Dropdown 1</a></li> 
     <li><a href="">Dropdown 2</a></li> 
     <li><a href="">Dropdown 3</a></li> 
     </ul> 
    </li> 
    <li><a href="">Menu 6</a></li> 
    </ul> 
</div> 

CSS

.mobile-content { 
    background-color: #000; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 100%; 
} 

.mobile-content ul { 
    margin-top: 32px; 
} 

.mobile-content ul li { 
    margin-top: 10px; 
} 

.mobile-content a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    text-align: center; 
    float: left; 
} 

.mobile-content img { 
    float: right; 
} 

.mobile-content li.mobhasdrop { 
    cursor: pointer; 
    width: 100%; 
} 

.mobdropdown { 
    background-color: #f00; 
    display: none; 
} 
.mobdropdown li{ 
    width: 100%; 
} 

Javascriptをここで

$("li.mobhasdrop").click(function(){ 
    $(this).find('.mobdropdown').slideToggle(); 
}) 

はjsfiddleだ - はJQuery migh tはデフォルト（おっと）

https://jsfiddle.net/xschoolboyx/ddL439zm/

Answer 1

では有効になっていない私はlist-style: noneを使用することができることを含め、あなたの問題のほとんどを固定信じる.mobile-content aにfloat: leftを、削除しました。また、対応するリンクの上に2つの<img>要素を移動して、float: rightが適切に機能するようにしました（そのプロパティを持つ要素は、関連する左揃え要素の上にある必要があります）。

$("li.mobhasdrop").click(function() { 
 
     $(this).find('.mobdropdown').slideToggle(); 
 
    })

ul { 
 
    list-style: none; 
 
} 
 
.mobile-content { 
 
    background-color: #000; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 
.mobile-content ul { 
 
    margin-top: 32px; 
 
} 
 
.mobile-content ul li { 
 
    margin-top: 10px; 
 
} 
 
.mobile-content a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    /*text-align: center;*/ 
 
    /*float: left;*/ 
 
} 
 
.mobile-content img { 
 
    float: right; 
 
} 
 
.mobile-content li.mobhasdrop { 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 
.mobdropdown { 
 
    background-color: #f00; 
 
    display: none; 
 
} 
 
.mobdropdown li { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dropdownmobile" class="mobile-content"> 
 
    <ul> 
 
    <li><a href="/test">Menu 1</a> 
 
    </li> 
 
    <li class="mobhasdrop"> 
 
     <img src="/img/logo.png" /> 
 
     <a>Menu 2 - Click Me</a> 
 
     <ul class="mobdropdown"> 
 
     <li><a href="#">Dropdown 1</a> 
 
     </li> 
 
     <li><a href="#">Dropdown 2</a> 
 
     </li> 
 
     <li><a href="#">Dropdown 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 3</a> 
 
    </li> 
 
    <li><a href="#">Menu 4</a> 
 
    </li> 
 
    <li class="mobhasdrop"> 
 
     <img src="/img/logo.png" /> 
 
     <a href="#">Menu 5 - This one too</a> 
 
     <ul class="mobdropdown"> 
 
     <li><a href="#">Dropdown 1</a> 
 
     </li> 
 
     <li><a href="#">Dropdown 2</a> 
 
     </li> 
 
     <li><a href="#">Dropdown 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 6</a> 
 
    </li> 
 
    </ul> 
 
</div>