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