Отображение выпадающего подменю

Question

Я создаю выпадающее меню для мобильных устройств, и в этом меню есть подменю, которое откроется (как выпадающее меню) и нажмите вниз список. Я получил большую часть этого, но подменю отображается неправильно. Вместо того, чтобы находиться под объектом списка, он появляется рядом с ним. (Он подталкивает остальную часть списка вниз, что является плюсом. Я обнаружил, что если бы я установил положение подменю в абсолютном состоянии, оно выглядело бы правильно, но оно не оставило бы остальную часть списка вниз)

Кроме того, если я должны были изменить «тип стиля списка» на ни одного (я не хочу, чтобы пулевые точки), все меню разбивается ... Не знаете, почему.

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 т не быть включен по умолчанию (ой)

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

Answer 1

Я удалил float: left на .mobile-content a, что я считаю, устранил многие из ваших вопросов, в том числе возможности использовать list-style: none. Я также переместил два элемента <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>