Effect:
650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M01/84/7A/wKioL1eRx6Lh0JBJAAAJw9Pt-6w330.png-wh_500x0-wm_3 -wmp_4-s_1332386858.png "title=" Qq20160722151325.png "alt=" Wkiol1erx6lh0jbjaaajw9pt-6w330.png-wh_50 "/>
Code:
<! DOCTYPE html>
<title>jquery implementation drop-down menu </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
*{margin:0px;padding:0px}
. nav-ul{list-style:none;border-bottom:8px solid #666; overflow:auto;}
. Nav-ul li{float:left;line-height:40px;text-align:center;position:relative;}
. Nav-ul Li a {text-decoration:none;color: #000;d isplay:block;padding:0 10px;}
. Nav-ul Li A:hover{color: #FFF; Background-color: #666}
. Nav-ul li a span{display:none;}
. nav-ul li a:hover span{display:block;}
. Nav-ul li A:hover{margin-top: -40px}
</style>
<body>
<ul class= "Nav-ul" >
<li><a href= "" > Home <span>home</span></a></li>
<li class= "Nav-ul-li" ><a href= "" > My courses <span>course</span></a></li>
<li><a href= "" > About Us <span>about</span></a></li>
</ul>
</body>
This article is from the "Yan" blog, please be sure to keep this source http://suyanzhu.blog.51cto.com/8050189/1828815
menu in English toggle