html如何顯示懸停的隱藏列表？

Question

我想要的是產品清單，iPhone，iPhone & 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; 
}