Home > Developer > Web Develop
changing menu Effects:
When the mouse moves to the corresponding position on the menu, the Chinese language in that position becomes English.
The main use of CSS to control the style.
The code is as follows
1<! DOCTYPE html>234<title> changing menu </title>5<meta charset= "Utf-8" >6<style type= "Text/css" >7 . top_nav{8font-size:12px;9font-Weight:bold;Tenlist-style-Type:none; Oneborder-bottom:8px solid red; A Overflow:auto; - } - the . Top_nav li{ - float: Left; -margin-right:1px; - } + - . Top_nav Li a{ +text-Decoration:none; A Display:block; atline-height:20px; - width:80px; -Color: #666; - background: #ddd; -text-Align:center; - } in - . Top_nav a span{ to Display:none; + } - the . Top_nav li a:hover span{ * Display:block; $ }Panax Notoginseng - . Top_nav Li a:hover{ themargin-top:-20px; + background:red; A color: #fff; the + } - $ $</style> - -<body> the<div> -<ul class= "Top_nav" >Wuyi<li><a href= "#" > Home <span>Home</span></a></li> the<li><a href= "#" > Front-end Cooking <span>Front</span></a></li> -<li><a href= "#" > Sunshine Chef <span>Kichen</span></a></li> Wu<li><a href= "#" > Lighting <span>Photo</span></a></li> -<li><a href= "#" > Affairs Hall <span>Room</span></a></li> About</ul> $</div> -</body> -The main tips to use are:
1 if the English and Chinese are placed in two links will be very troublesome, so here all the English in the span tag, so that can be unified control.
2 when the mouse moved to the corresponding position when the Chinese disappeared, the English display, is the use of the Margin-top property, so that its value is -20px, exactly equal to the row height of a label, so that the Chinese from the current position disappears, corresponding to the English on the bottom appears.
3 When the menu is set to the bottom border, you will find that the border does not appear in the bottom, but a lot, because it is affected by the float, the container can not completely wrap the floating elements, so should be added Overflow:auto;
css+html Implementation of the changing menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
