Question

我想要的是产品清单，mac，iPhone＆amp; ipad显示何时悬停，覆盖产品，但它不会这样做。

HTML

<div>
  <ul>
    <li>
      <a href="">COMPANY</a>
    </li>
    <li>
      <a href="">CONTACT</a>
    </li>
    <li class="lastitem">
      <a href="">PRODUCTS</a>
      <ul>
        <li><a href="">MAC</a>
        </li>
        <li><a href="">iPHONE</a>
        </li>
        <li><a href="">iPAD</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

li ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  position: absolute;
  left: -999em;
}

li:hover ul {
  left-side: auto;
}

li ul li {
  display: block;
}

Answer 1

这里：只需隐藏产品列表，并在悬停时使用〜来定位您需要影响的元素 http://jsfiddle.net/1fdcbwvL/1/

<div>
    <ul>
    <li>
        <a href="">COMPANY</a>
    </li>
    <li>
        <a href="">CONTACT</a>
    </li>
    <li class="lastitem">
        <a id="products" href="">PRODUCTS</a>
        <ul id="product-list">
            <li><a href="">MAC</a></li>
            <li><a href="">iPHONE</a></li>
            <li><a href="">iPAD</a></li>
        </ul>
    </li>
    </ul>
</div>

CSSS

 #product-list{
    display:none;
}
#products:hover ~ #product-list{
    display:block;
}

#product-list:hover{
    display:block;
}

html如何在悬停时显示隐藏列表？

1 个答案: