-2

所以我想创建一个类似 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%;
}
4

2 回答 2

2

我很确定这就是你要找的东西很难弄清楚你想要什么，我为你做了一个例子，一定要在你需要的浏览器中检查 position:absolute 是否适合你：http: //jsfiddle.net/5Vkzg/

links to jsfiddle.net must be accompanied by code.

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

于 2013-05-14T23:38:31.260 回答
0

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

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。

于 2013-05-14T23:55:19.647 回答