如何使菜单在纯CSS中有子菜单

Question

我想知道我是否可以让ul class productnav消失,直到鼠标悬停在产品按钮上？此外,我希望productnav ul像普通菜单一样偏向一边.

HTML:

<div class="sidebar1" align="center">
<ul class="nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="#">Products</a></li>
      <ul class="productnav">
         <li><a href="#">Products Overview</a></li>
         <li><a href="#">Unibook Enterprise</a></li>
         <li><a href="#">Unibook Standard</a></li>
         <li><a href="#">Univoice 2.0</a></li>
         <li><a href="#">Univoice lite</a></li>
         <li><a href="#">Pricing</a></li>
         <li><a href="#">Demo</a></li>
      </ul>
  <li><a href="#">Solutions</a></li>
  <li><a href="#">Markets</a></li>
  <li><a href="#">About UDI</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

忽略任何missing/div标签等.

CSS:

ul.nav {
    margin-top: 10px;
    margin-left: 2px;
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #FFF; /* this creates the top border for the links - all         others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the     content below */
}
ul.nav li {
    border-bottom: 1px solid #FFF; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links    retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the   whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px;  /*this width makes the entire button clickable for IE6. If you don't   need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #CFCFCF;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and   text color for both mouse and keyboard navigators */
    background-color: #1075C7;
    color: #FFF;
}

/*-----------------------------*/

ul.productnav {
    margin-top: 10px;
    margin-left: 2px;
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #FFF; /* this creates the top border for the links - all     others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the   content below */
}
ul.productnav li {
    border-bottom: 1px solid #FFF; /* this creates the button separation */
}
ul.productnav a, ul.productnav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the   whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px;  /*this width makes the entire button clickable for IE6. If you don't   need to support IE6, it can be removed. Calculate the proper width by subtracting the   padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #CFCFCF;
}
ul.productnav a:hover, ul.productnav a:active, ul.productnav a:focus { /* this changes   the background and text color for both mouse and keyboard navigators */
    background-color: #1075C7;
    color: #FFF;
}

并记住:我想要一个基本的子菜单事情; 将鼠标悬停在产品上,您会看到.productnav ul出现在正常的东西旁边.谢谢!

Answer 1

纯CSS方式

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

小提琴:
http://jsfiddle.net/vMuxA/(垂直菜单)
http://jsfiddle.net/vMuxA/1/(水平菜单)