在锚标记悬停时显示下拉菜单

Question

我有以下ul和li结构，在悬停锚标签时我想将ul项目显示为下拉菜单。     

            
•                 什么是新的                 
                      
  • 列出第一项
                      
  • 列出第一项
                      
  • 列出第一项
                      
  • 列出第一项
                      
  • 列出第一项
                  
              
        

但是我无法获得任何css代码。所以请帮我写一下css代码。

Answer 1

我在jsfiddle上为你构建了结构。正如您在锚链接上特别要求悬停事件一样，我已经为您构建了它。

这是小提琴：https://jsfiddle.net/mcz4u8pg/1/

这是代码：

#main {
  list-style: none;
  margin: 0;
  padding: 0;
}
#main > li {
  float: left;
  padding: 5px 10px;
  border: 1px solid red;
  margin: 10px;
}
.sub {
  display:none;
}
li > a:hover ~ .sub {
  display:block
}
.sub {
  clear:both;
  list-style:none;
  margin:0;
  padding:0;
}

<ul id="main">
  <li><a href="">1</a></li>
  <li><a href="">2</a>
    <ul class="sub">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
    </ul>
  </li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
</ul>

Answer 2

.mainmenu li a:hover ul.submenu { display:block;}