Question

所以我想创建一个像www.microsoft.com上的菜单。但是，我想只用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%;
}

Answer 1

我很确定这是你正在寻找的东西有点难以弄清楚你想要什么，我为你做了一个例子，一定要检查你需要的浏览器位置：绝对适合您：http://jsfiddle.net/5Vkzg/

links to jsfiddle.net must be accompanied by code.

至少希望你可以从中构建。

Answer 2

这是一种略有不同的方法。

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>

Jsfiddle中的CSS。

CSS菜单就像微软一样

2 个答案: