如何使菜单在纯CSS中有子菜单 [英] How to make a menu have submenus in pure CSS

问题描述

我想知道如果我可以得到ul类productnav消失，直到鼠标悬停在产品按钮？

I want to know if i can get the ul class productnav to dissappear until the mouse hovers over the product button? Also, I want the productnav ul to go off to the side like a normal menu would.

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>

忽略任何遗漏/ div标记等。

Ignore any missing /div tags and such.

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显示在正常的东西旁边。谢谢！

And remember: I want a basic submenu thing going on; Hover over product, you get the .productnav ul showing up next to the normal stuff. Thanks!

推荐答案

纯CSS方式

HTML

Pure CSS Way

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

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 */

这篇关于如何使菜单在纯CSS中有子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！