Question

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

另外，如果我要更改＆＃34; list-style-type＆＃34;没有（我不想要子弹点），整个菜单中断...不确定原因。

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

我删除了float: left上的.mobile-content a，我认为这解决了您的大多数问题，包括能够使用list-style: none。我还将两个<img>元素移动到相应的链接上方，以便float: right在它们上正常工作（因为具有该属性的元素应该位于关联的左对齐元素之上）。

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

显示下拉子菜单

1 个答案: