显示下拉子菜单

Question

我正在制作一个移动下拉菜单，在这个菜单中，有一些子菜单可以打开（如下拉菜单）并将列表向下推。我完成了大部分工作，但子菜单无法正确显示。它不是在列表的实体下，而是出现在它旁边。 （它将列表的其余部分向下推，这是一个优点。我发现如果我将子菜单位置设置为绝对位置，它会正确显示，但不会向下推列表的其余部分）

另外，如果我将“list-style-type”更改为无（我不想要项目符号），整个菜单都会中断...不知道为什么。

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 (oops)

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

Answer 1

我删除了.mobile-content a 上的float: left，我相信这解决了您的大部分问题，包括能够使用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>