如何使用css3实现一个圆形菜单

html-css022

如何使用css3实现一个圆形菜单,第1张

方法1： 用Css实现 css菜单显示效果 /** *菜单的构造,需要绑定到onload */ startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav")for (i=0i

<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6     <style> 7         ul{ 8             list-style: none 9         }10         .nav>li{11             float: left12         }13         ul a{14             display: block15             text-decoration: none16             width: 100px17             height: 50px18             text-align: center19             line-height: 50px20             color: white21             background-color: #2f3e4522         }23         .nav>li:first-child a{24             border-radius: 10px 0 0 10px25         }26         .nav>li:last-child a{27             border-radius: 0 10px 10px 028         }29         .drop-down{30             /*position: relative*/31         }32         .drop-down-content{33             padding: 034             display: none35             /*position: absolute*/36         }37         38         h3{39             font-size: 30px40             clear: both41         }42         .drop-down-content li:hover a{43             background-color:red44         }45         .nav .drop-down:hover .drop-down-content{46             display: block47         }48 </style>49 </head>50 <body>51     <ul class="nav">52         <li><a href="#">下拉菜单</a></li>53         <li class="drop-down"><a href="#">下拉菜单</a>54             <ul class="drop-down-content">55                 <li><a href="#">我是1</a></li>56                 <li><a href="#">我是2</a></li>57                 <li><a href="#">我是3</a></li>58             </ul>59             </li>60         <li><a href="#">下拉菜单</a></li>61         <li><a href="#">下拉菜单</a></li>62         <li><a href="#">下拉菜单</a></li>63     </ul>64     <h3>我是测试文字</h3>65 </body>66 </html>