像微軟的CSS菜單

-2

所以我想創建一個像www.microsoft.com上的菜單。但是，我只想在CSS中做到這一點，沒有腳本，我希望菜單在懸停時下拉，而不是點擊。這是我的。像微軟的CSS菜單

HTML：

<html> 
    <head> 
    <link rel="stylesheet" href="test5.css" type="text/css"> 
    </head> 
    <body> 
    <nav> 
     <ul> 
     <li><a href="#">one</a></li> 
     <li>two</a> 
      <ul> 
      <li><a href="#">three</a></li> 
      <li><a href="#">four</a></li> 
      <li><a href="#">five</a> 
       <ul> 
       <li><a href="#">six</a></li> 
       <li><a href="#">seven</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li>eight</a> 
      <ul> 
      <li><a href="#">nine</a></li> 
      <li><a href="#">ten</a></li> 
      </ul> 
     </li> 
     <li><a href="#">eleven</a></li> 
     </ul> 
    </nav> 
    </body> 
</html>`

CSS：

*{ 
    margin:0; 
    padding:0; 
}  

nav ul ul { 
    display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
} 

nav ul { 
    background: #888; 
    list-style: none; 
    position: fixed; 
    display: inline-table; 
    width:100%; 
} 

nav ul:after { 
    content: ""; clear: both; display: block; 
} 

nav ul li { 
    float: left; 
    width:25%; 
} 

nav ul li:hover { 
    background: #4b545f; 
} 

nav ul li:hover a { 
    color: #fff; 
} 

nav ul li a { 
    display: block; 
    padding: 25px 40px; 
    color: #757575; 
    text-decoration: none; 
    width:100%; 
}

來源

2013-05-14 joker

您剛剛向我們展示了您的HTML和CSS。你還沒有問過關於它們的任何問題。你有什麼麻煩？ – Paulpro

請張貼jsfiddle（jsfiddle.net）。這對於以視覺形式查看所需內容非常重要。 – Ian

你有什麼嘗試？你有什麼問題？如果您對預先製作的解決方案感興趣......我相信如果您搜索它們，它們就會存在。 – Jasper

我敢肯定這是你在找什麼，這是一個有點難以弄清楚到底是什麼你我想爲你做一個例子，一定要檢查你需要的瀏覽器的位置：絕對適合你：http://jsfiddle.net/5Vkzg/

links to jsfiddle.net must be accompanied by code.

至少希望你可以從中建立起來。

來源

2013-05-14 23:38:31 daniel

這是一個稍微不同的方法。

http://jsfiddle.net/3EZLp/1/

HTML：

<div id="nav"> 
    <div id="navBar"> 
     <div class="navItemArea"> 
      <div class="navItem">Home</div> 
      <div class="navUnder"> 
       Put more stuff here 
      </div> 
     </div> 
     <div class="navItemArea"> 
      <div class="navItem">About</div> 
      <div class="navUnder"> 
       More stuff 
      </div> 
     </div> 
    </div> 
</div>

CSS中的jsfiddle。

來源

2013-05-14 23:55:19 npage

像微軟的CSS菜單

回答

相關問題