Some time ago to do a small project encountered a way of navigation and then suddenly think of a long time ago saw the shape of the ladder irregular navigation, try to do a bit. The results met a few problems, and then in a colleague's reminder to finally complete, record and share with you.
Web Teaching Network
First look at the picture (the image is just roughly done)
Effect Display:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Author" content= "Linxz"/>
<title> Untitled Document </title>
<style type= "Text/css" >
* {margin:0;padding:0;font:normal 12px/25px "song Body";}
Body {background: #f8f8f8;}
UL {list-style:none;width:300px;height:25px;margin:20px Auto;}
Li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
A {color: #fff; Float:left;width:86px;height:25px;top:0;left:0;background:url (/files/allimg/080407/2038022.gif) Center Center No-repeat;
a:hover {color: #000; Background:url (/files/allimg/080407/2038021.gif) 0 0 no-repeat;width:86px;position:relative;}
</style>
<body>
<ul>
<li><a href= "#" title= "menu" > Menu </a></li>
<li><a href= "#" title= "menu" > Menu </a></li>
<li><a href= "#" title= "menu" > Menu </a></li>
</ul>
</body>
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
