如何创建鼠标悬停菜单？

Question

我是新来的CSS和Html。 我想要制作这样的菜单 https://community.oracle.com/welcome 如何创建它？

Answer 1

以下是您要查找的菜单的示例代码。

$('a.hamburger-menu, .dropdown-menu').on('mouseover', function(){ 
 
    $(this).parent().addClass('open-dd'); 
 
}); 
 
$('a.hamburger-menu, .dropdown-menu').on('mouseout', function(){ 
 
    $(this).parent().removeClass('open-dd'); 
 
});

nav{display: block; width: 100%; background: #eee; padding: 20px; 
 
    position: relative} 
 
nav a{color: #555} 
 
.dropdown-menu{width: 200px; background: wheat; position: absolute; display: none} 
 
.dropdown-menu:before{content: ""; display: block;  border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    border-bottom: 7px solid wheat; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 8px;} 
 
.dropdown-menu ul{padding: 0; margin: 5px 0 0 0} 
 
.dropdown-menu ul li{display: block} 
 
.dropdown-menu ul li a{color: #333; text-decoration: none; padding: 5px 25px; display: block} 
 
.dropdown-menu ul li a:hover{background: #e6b965} 
 
nav.open-dd .dropdown-menu{display: block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 
<nav> 
 
    <a href="#" class="hamburger-menu"><i class="fa fa-navicon fa-2x"></i></a> 
 
    <div class="dropdown-menu"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About us</a></li> 
 
     <li><a href="#">Company</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">Site map</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Contact us</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>