css/jquery - 在懸停時添加下拉菜單

我想知道如何在我的按鈕懸停時製作簡單的下拉菜單。css/jquery - 在懸停時添加下拉菜單

我的按鈕：

<ul class="menu-links right" style="margin-left:-25px"> 
     <li class="menu-black"><a href="javascript:void(0)" class="dropHover">?</a></li> 
    </ul>

當用戶將鼠標懸停在「dropHover」我希望有以下新的無序列表懸停。這怎麼可能？

謝謝。

來源

2012-03-17 oliverbj

你可以做一個簡單的下拉菜單/子菜單只是簡單的CSS。理論是，您可以通過添加display:none或將其遠離屏幕並使用left位置（如left:-9999）來隱藏下拉菜單/子菜單，然後當您將鼠標懸停在菜單項上時，重置該位置或顯示屬性以顯示菜單，如下所示：

這是一個基本的css菜單的結構。

CSS

.menu { 
    width: 960px; 
    background-color: Black; 
    color: #fff; 
    margin: 0 auto; 
    height:auto; 
    font-family: Segoe UI, Arial; 
    font-weight:bold; 
    min-height:15px; 
} 
.nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.nav > li { 
    float: left; 
} 

.nav li:hover a { 
    background-color:#404040; 
    color: #fff; 
} 

.nav a { 
    background-color: Black; 
    color: #fff; 
    display: block; 
    padding: 4px 12px; 
    text-decoration: none; 
    line-height:20px; 
    font-size:12px; 
    font-family: Segoe UI, Arial; 
    white-space: pre; 
} 

.nav { 
    zoom:1; /* ie hasLayout fix */ 
} 

.nav li { 
    position:relative; 
} 

.nav li ul { 
    display:none; 
    position:absolute; 
    top:100%; 
} 

.nav li ul li:hover a { 
    background-color:#777; 
} 

.nav li:hover ul { 
    display:block; 
} 

/* Clearfix */ 

.nav:before, .nav:after { 
    display:table; 
    content:""; 
} 

.nav:after { 
    clear:both; 
}

然後，您可以添加您的下拉菜單/子菜單，爲您的主菜單項目的子項。

HTML

<div class="menu"> 
    <ul class="nav"> 
     <li> 
      <a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a> 
      <ul> 
       <li><a href="#">SubItemOne looooooooooooooooooooooonger</a></li> 
       <li><a href="#">SubItemOne</a></li> 
       <li><a href="#">SubItemOne</a></li> 
       <li><a href="#">SubItemOne looooooooooong</a></li> 
      </ul> 
     </li> 
     <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> 
     <li> 
      <a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a> 
      <ul> 
       <li><a href="#">SubItemOne looooooooooooooooooooooonger</a></li> 
       <li><a href="#">SubItemOne</a></li> 
       <li><a href="#">SubItemOne</a></li> 
       <li><a href="#">SubItemOne looooooooooong</a></li> 
      </ul> 
     </li> 
     <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> 
     <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> 
    </ul> 
</div>

Demo

來源

2012-03-17 11:48:10