效果如下：
代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>导航</title> 6 <style type="text/css"> 7 .dao{ 8 list-style: none; 9 padding-left: 1px; 10 } 11 .dao li{ 12 float: left; 13 width: 84px; 14 margin-top: 100px; 15 background: #FFAE00; 16 text-align: left; 17 color: white; 18 border-right: 1px solid #fff; 19 color: black; 20 text-decoration: underline; 21 font-size: 10px; 22 line-height: 24px; 23 } 24 .dao li:hover{ 25 font-size: 1.5em; 26 } 27 li input{ 28 width: 84px; 29 } 30 li button{ 31 background: #FFEB3D; 32 margin-left: 18px; 33 34 } 35 </style> 36 </head> 37 <body> 38 <ul class="dao"> 39 <li>·首页</li> 40 <li>·家用电器</li> 41 <li>·手机教程</li> 42 <li>·日用百货</li> 43 <li>·书籍</li> 44 <li>·帮助中心</li> 45 <li>·免费开店</li> 46 <li>·全球咨询</li> 47 <li> </li> 48 <li><input type="text"></li> 49 <li><button type="submit">搜 索</button></li> 50 </ul> 51 </body> 52 </html>