0

我想知道我是否可以让 ul 类 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>

忽略任何丢失的 /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 出现在正常内容旁边。谢谢!

4

3 回答 3

7

纯 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/(水平菜单)

于 2012-11-11T03:32:35.383 回答
1

Steve Gibson 写了一个关于如何做 css 菜单的例子。他使用无序列表。

GRC 的无脚本纯 CSS 菜单系统

 /*==============================================================================

    GRC multi-level script-free pure-CSS menuing system stylesheet.
   This code is hereby placed into the public domain by its author
   Steve Gibson. It may be freely used for any purpose whatsoever.

    Computed Geometries:    with a default 12px font, 1.0em == 12px and
    1px == 0.08333em.
    Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.

==============================================================================*/

/*====== GLOBAL OVERRIDES FOR MAJOR ITEMS AND DIFFERING BROWSER DEFAULTS =====*/

body { color:#009; background:#fff; font-family: verdana, tahoma, arial, helvetica, sans-serif, MS Sans Serif; }
body, table, img, button, iframe, ul, li  { margin:0; padding:0; border:0; }
table { text-align:left; }
iframe { width:0; height:0 }

ul { margin-left:20px; }       /* kill default 50px left padding and set 20px */
li { margin-bottom:1em; }          /* set default inter-item vertical spacing */
.tightlist li { margin-bottom:0.25em; }     /* tighter list for simple bullets */


/* our default page-width div */
.pagecontainer { width:85%; text-align:left; font-size:10pt;}


 /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/

.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
    position:relative;
    border:0;
    margin:0;
    padding:0;
    width:100%;
    height:55px;/* 36px masthead height + 18px button height + 1px lower border*/
    min-width:560px;
}

/* suppress our whole menu when not an interactive mode (when printing, etc.) */
@media print, projection { .menuminwidth0 { d\isplay:none; } }

* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
    position:relative;  /* we can simulate a minimum width by creating a large */
    float:left;          /* border in this first div, then placing our content */
    height: 1px;          /* into a second nested div (see 2nd nested div next */
    border-left:560px solid #fff;    /* CSS box-model borders are a fixed size */
}

* html .menuminwidth2 {    /* used to simulate min-width capability for IE5/6 */
    position:relative;
    margin-left:-560px;
    height: 1px;
}

#masthead {
    position:relative;      /* position our child objects relative to this div */
    float:left;
    vertical-align:top;          /* protect from super-large user text sizing */
    border:0;
    margin:0;
    padding:0;
    width:100%;                                  /* grey-fill the entire width */
    height:36px;                  /* set the overall height above the menu-bar */
    background:#F3F3F3;                          /* a very light shade of grey */
}

#mastheadlogo {
    float:left;
    vertical-align:top;
    border:0;
    padding:0;
    margin:6px 0 0 7px;
}

#focus {                                                 /* GRC's focus label */
    position:absolute;
    border:0;
    margin:0;
    padding:0;
    top:15px;
    left:301px;
    width:121px;
    height:13px;
}

#search {                                                    /* search button */
    position:absolute;
    border:0;
    margin:0;
    padding:0;
    top:7px;
    right:6px;
    width:60px;
    height:19px;
}

#text {                                                 /* search text field */
    position:absolute;
    border:1px solid #404040;
    margin:0;
    padding:0 0 0 2px;
    top:7px;
    right:65px;
    width:12em;
/*  height:1.215em;         we'll define this at the bottom of our style sheet */
    font-size:14px !important;
    background:#fefefe;
}

#yah {                                    /* the "You are here" label graphic */
    position:absolute;
    top:5px;
    right:99px;
    width:87px;
    height:9px;
}

 /*========================= TOP OF THE MENU CASCADE =========================*/

.menu {
    position:relative;        /* establish a menu-relative positioning context */
    float:left;                                     /* play nicely with others */
    margin:0;
    padding:0;
    border:0;
    height:18px;                                  /* the menu's overall height */
    width:100%;         /* we always want our menu to fill the available space */
    background:#f3f3f3;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;         /* this (and also below) sets the menu's font size */
    border-bottom:1px solid black;        /* give us a black border underneath */
}

.menu img {
    vertical-align: top;      /* prevent images from being pushed down by text */
}

.menu ul {
    padding:0;
    margin:0;
    border:0;
    list-style-type:none;          /* we don't want to view the list as a list */
    line-height:1.5em;           /* globally set the menu's item spacing. note */
}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */

.menu li {
    float:left;    /* this creates the side-by-side array of top-level buttons */
    position:relative;    /* create local positioning contexts for each button */
    margin:0;
}

.menu ul li table {
    margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
    m\argin:0;               /* re-zero the table margins for everyone but IE5 */
    border-collapse:collapse;      /* IE5 needs this for the sub-menus to work */
    font-size:12px;        /* this sets the base font size for our entire menu */
}

.drop {
    display:block;
    padding:0px 0.33em;        /* this sets the l/r margins for our menu item */
    margin:0;
    text-align:right;   /* this right alignment goes with the float:left below */
    cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
    cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
}

.drop span {        /* this simultaneously left and right aligns the text and */
    float:left;       /* the >> in the drop-down menus which link to sub-menus */
}

.rightmenu {
    position:relative;  /* establish a local positioning context for YAH label */
    float:right;                  /* and right-align it at the top of our page */
}

#research {            /* this rightmost "Research" button must be positioned */
    position:absolute;       /* absolutely so that the YAH (you are here) text */
    top:0px;               /* label will slide underneath it under Opera v8.54 */
    left:364px;    /* which has a z-order sequencing bug with abs-pos elements */
}

/*======================== TOP LEVEL MENU DEFINITIONS ========================*/

.menu ul li ul {
    display:none;                  /* initially hide the entire list hierarchy */
    padding:1px;                               /* this is our box border width */
}

.menu ul li a,
.menu ul li a:visited {                    /* unselected top-level menu items */
    display:block;
    float:left;
    text-decoration:none;
    height:18px;
}

.menu ul li:hover a,
.menu ul li a:hover {                        /* selected top-level menu items */
    border-top:1px solid #000;    /* these 2 lines create the push-in illusion */
    height:16px;
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul,
.menu ul li a:hover ul {                           /* 2nd level drop-down box */
    display:block;
    position:absolute;
    margin:0;
    top:18px;              /* place us just up underneath the top-level images */
    left:-1px;       /* left-align our drop-down to the previous button border */
    height:auto;      /* the drop-down height will be determiend by line count */
    width:13.5em;
    color:black;                        /* this sets the unselected-text color */
    background:black;         /* this sets our menu's effective "border" color */
}

.menu ul li:hover ul.leftbutton,
.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
    left:0px;
}

.menu ul li:hover ul.skinny,
.menu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
    width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
}

.menu ul.rightmenu li:hover ul,
.menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
    left:auto;
    right:0;         /* nudge the right menu right to line up under the border */
}

* html .menu ul.rightmenu li a:hover ul {         /* IE5/6 needs a tweak here */
    right:-1px;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
    border:0;
    margin:0;
    padding:0;
    height:auto;
    color:#000;               /* this sets the unselected drop-down text color */
    background:#d8d8d8;       /* this sets the drop-down menu background color */
    width:13.5em;
}

.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
    color:black;
    background:white;
}

.menu ul li:hover ul.skinny li a,
.menu ul li a:hover ul.skinny li a,
.menu ul li:hover ul.skinny li a:hover,
.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
    width:8.08333em;
}

/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
    visibility:hidden;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
    visibility:visible;
    position:absolute;
    margin-top:-1px;          /* bring the top edge of the 3rd level menu up one */
    top:0;
    left:8.08333em;
    width:14em;
}

.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
    width:14em;
    background:#d8d8d8;
}

.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
    width:14em;
    background:white;
}

#text {           /* the Mac's standard Safari browser will not see this code */
    height:1.215em;#           /* ...  but every other browser will and should */
} /* Safari barfs on the illegal pound sign (#) after the rule's property val */
于 2012-11-11T02:50:40.797 回答
1

ul.menu 是所有其他人的父级,但与您的 html 方法不同:子菜单(ul标签)位于父级菜单项(li标签)内,这更符合 html 要求(w3 建议一个问题,或者只是在验证器中测试它)。因此,您的示例将变为以下内容:

<div class="sidebar1" align="center">
<ul class="nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="#">Products</a>
      <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>
  <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>

还有我会使用的css(即使你可以去掉尺寸,只要它们都是一样的,我认为):

.nav li
{
    position:relative;
    float:left;
    width:180px;
    height:30px;
    padding:0;
    margin:0;
    list-style: none;
}

.nav ul
{       
    display:none;
    position:absolute;
    padding:0;
    margin:5px 0 0 0;
}

.nav ul li ul
{
    left:100%;
    top:0;
    margin:0px;
}

/* hiding or showing on second generations */
.nav li:hover ul ul, .nav li:hover ul ul ul
{
    display: none;
}

.nav li:hover ul, .nav ul li:hover ul, .nav ul ul li:hover ul
{
    display: block;
}

ul这适用于您的 s 中最多三个递归级别ul.nav,但您可以通过修改最后两个 css 块的选择器来扩展它。

但我仍然认为用 javascript 中的悬停事件替换出现在悬停时:hover.over类会带来更好的感觉,因为您可以设置超时以在悬停菜单后保持菜单显示一小会儿。导航到子菜单时,允许使用指针进行更自然的移动,使用 css 方法,您必须留在li标签内。

于 2012-11-11T03:29:16.033 回答