如何使用css制作此导航栏？

Question

我在Photoshop中设计了这个导航栏，我失去了如何将它转换为纯CSS导航栏，任何人都有任何想法？

TIA。

Link to bigger image

Answer 1

退房web designer wall，它有我见过的纯CSS下拉菜单（查看源代码，看看CSS代码）的最佳范例之一。通过对颜色&款式进行一些小修改，您应该能够重新创建您的设计。

Answer 2

它不是完全完成，我跑出来的时候的下拉工作，或添加搜索，但它应该是在正确的方向上显著步：

CSS：

nav { 
      display:block; margin:0; padding:0; width:978px; height:53px; 
      border-bottom:1px solid #abd2f9; border-top:1px solid #f0f9fe; border-left:1px solid #d1e7fc; border-right:1px solid #d1e7fc; 
      -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; 
      background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(238,248,255,1)), color-stop(100%, rgba(207,234,253,1))); 
      background:-moz-linear-gradient(top,rgba(238,248,255,1), rgba(207,234,253,1) 100%); 
      background:linear-gradient(top, rgba(238,248,255,1), rgba(207,234,253,1) 100%); 
     } 
     nav ul { 
      display:block; margin:0; padding:0 45px; list-style:none; 
     } 
     nav ul li { 
      float:left; display:block; margin:0; padding:0; 
     } 
     nav ul li a { 
      display:block; margin:0 16px 0 0; padding:0 16px; height:53px; line-height:53px; color:#444; text-decoration:none; 
     } 
     nav ul li a:hover { 
      background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(207,234,253,1)), color-stop(100%, rgba(238,248,255,1))); 
      background:-moz-linear-gradient(top,rgba(207,234,253,1), rgba(238,248,255,1) 100%); 
      background:linear-gradient(top, rgba(207,234,253,1), rgba(238,248,255,1) 100%); 
     } 

     nav ul li ul { 
      display:none; padding:0; 
     } 
     nav ul li ul li { 
      float:none; 
     } 

HTML ：

<nav> 
    <ul> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">INFORMATION</a> 
      <ul> 
       <li><a href="#">NEWS</a></li> 
       <li><a href="#">FAQ</a></li> 
       <li><a href="#">EVENTS</a></li> 
       <li><a href="#">HELP</a></li> 
      </ul> 
     </li> 
     <li><a href="#">COURSES</a></li> 
     <li><a href="#">CONTACT US</a></li> 
    </ul> 
</nav>