Speaking of the Drop-down menu, you will think of JS script, the general Pull-down menu will need to be based on JavaScript script to achieve, and this time to provide you with a pure css+ a few simple pictures complete the refreshing, green, atmospheric drop-down menu, suitable for any site use
PS: The picture used three, some students will not get the code to their website, you just save the picture, and then upload to their website, and then the path to change the right, if even this also can not understand ... I'm really drunk.
About the color of the menu, the default is green, if you know a little bit PS, you can modify the picture for other colors, CSS also need to change the color code can be, if you do not know the color code, you can use color filter
<! 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=gb2312 "/>
<title> Pure css+ picture of the green two-level drop-down menu code, no JS script </title>
<style>
Body {font-family:5b8b4f53,arial narrow,arial,serif;background: #ffffff; font-size:12px;}
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,embed{padding:0; margin:0;}
Li{list-style-type:none;}
#menu {width:960px;margin:30px auto 0px;height:39px;background:url ('/uploads/allimg/090411/menu-bg.gif ') no-repeat ;}
#menu li {float:left;width:109px;line-height:39px;text-align:center;position:relative;border:none;}
#menu li:hover {background:url ("/uploads/allimg/090411/menu-hover.gif") No-repeat right top;}
#menu Li a {font-size:14px; color: #EEEEEE;d isplay:block;outline:0;text-decoration:none;}
#menu li:hover A {color: #161616;}
#menu li. Drop {background:url ("/uploads/allimg/090411/arrow.gif") No-repeat right 14px;margin-right:6px;}
#menu li:hover. Drop {background:url ("/uploads/allimg/090411/arrowhover.gif") No-repeat right 14px;}
#menu li:hover. nodrop {height:37px;line-height:37px;border-bottom:1px solid #2f8a0c;}
#menu li:hover. Dropdown_1column {left:0px;top:38px}
. col_1{display:inline;float:left;position:relative;margin-left:5px;margin-right:5px;width:130px;}
. dropdown_1column{margin:0px auto;float:left;position:absolute;left:-999em;text-align:left;border:1px Solid # 21910e;border-top:none;background: #F4F4F4; width:140px;}
#menu Li:hover Div A {font-size:12px;color: #444;}
#menu li:hover div a:hover{color: #21910e;}
#menu Li ul {list-style:none;padding:10px 5px;margin:0;}
#menu Li ul li {font-size:12px; line-height:26px;position:relative;padding:0;margin:0; float:none; text-align:left; width:130px;}
#menu Li ul li A{background:url ("/uploads/allimg/090411/subarrow.gif") No-repeat left 9px;padding-left:24px;}
#menu Li ul li:hover {background:none;border:none;padding:0;margin:0;}
</style>
<body>
<div id= "Menu" >
<ul>
<li><a href= "http://www.veryhuo.com" class= "Nodrop" > Home </a></li>
<li><a href= "http://www.veryhuo.com" class= "Drop" > Most fire Download station </a>
<div class= "Dropdown_1column" >
<div class= "Col_1" >
<ul class= "Simple" >
<li><a href= "#" > Website Construction </a></li>
<li><a href= "#" > Navigation bar code </a></li>
<li><a href= "http://www.veryhuo.com" > Most fire Download station </a></li>
<li><a href= "#" > E-commerce </a></li>
<li><a href= "#" > website production </a></li>
</ul>
</div>
</div>
</li>
<li><a href= "#" class= "Drop" > website construction </a>
<div class= "Dropdown_1column" >
<div class= "Col_1" >
<ul class= "Simple" >
<li><a href= "#" > Website Construction </a></li>
<li><a href= "#" > Navigation bar code </a></li>
<li><a href= "http://www.veryhuo.com" > Most fire Download station </a></li>
<li><a href= "#" > Website Promotion </a></li>
<li><a href= "#" > Website optimization </a></li>
<li><a href= "#" > website production </a></li>
</ul>
</div>
</div>
</li>
<li><a href= "#" class= "Drop" > Network marketing </a>
<div class= "Dropdown_1column" >
<div class= "Col_1" >
<ul class= "Simple" >
<li><a href= "#" > Website Construction </a></li>
<li><a href= "#" > Navigation bar code </a></li>
<li><a href= "http://www.veryhuo.com" > Most fire Download station </a></li>
<li><a href= "#" > E-commerce </a></li>
<li><a href= "#" > Website Promotion </a></li>
<li><a href= "#" > Website optimization </a></li>
<li><a href= "#" > website production </a></li>
</ul>
</div>
</div>
</li>
<li><a href= "#" class= "Drop" > Network marketing </a>
<div class= "Dropdown_1column" >
<div class= "Col_1" >
<ul class= "Simple" >
<li><a href= "#" > Website Construction </a></li>
<li><a href= "#" > Navigation bar code </a></li>
<li><a href= "http://www.veryhuo.com" > Most fire Download station </a></li>
<li><a href= "#" > E-commerce </a></li>
<li><a href= "#" > Website Promotion </a></li>
<li><a href= "#" > website production </a></li>
</ul>
</div>
</div>
</li>
<li><a href= "#" class= "Nodrop" > About Us </a></li>
<li><a href= "#" class= "Nodrop" > Contact Us </a></li>
</ul>
</div>
</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
