CSS下拉菜单 [英] CSS only drop down menu

问题描述

我想让CSS下拉菜单（不涉及javascript）。根据
http://pixelspread.com/blog/289/ css-drop-down-menu 我只需要添加

I am trying to make CSS drop down menu (no javascript involved). According to http://pixelspread.com/blog/289/css-drop-down-menu I only need to add

#menuBar #test2 a:hover .subMenu{display:block;}   

使子菜单显示。但是，在我的代码，它不工作。有人可以帮我这个问题吗？非常感谢！

to make the sub menu show up. However, in my code, it doesn't work. Could someone help me about this issue? Thanks a lot!

我的html

<ul id="menuBar">
   <li id="test1">test1</li>
   <li id="test2"><a href="#">Pro1</a>
     <div class="subMenu">
        <ul>
           <li><a href="#">sub1</a></li>  
           <li><a href="#">sub2</a></li>
           <li><a href="#">sub3</a></li>
         </ul>
         <ul>
            <li><a href="#">Volleyball</a></li>
            <li><a href="#">Walking</a></li>
            <li><a href="#">Water Shoes</a></li>
         </ul>
       </div> <!--end of submenu-->
     </li>
  </ul>

我的Css

 #menuBar #test2 a{
background:url("../images/btTest.jpg") no-repeat bottom;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}

#menuBar #test2 a:hover{
background:url("../images/btTest.jpg") no-repeat top;
}

#menuBar #test2 a:hover .subMenu{  
// I add .subMenu after a:hover and have two a:hover for #test2 a
// I know it won't work but not sure what to do now.
//thanks for the help.
display:block;
}


.subMenu{  // the hidden menu
position:absolute;
top:35px;
left:0px;
z-index: 99999;
width:550px;
background-color:black;
display:none;
}

推荐答案

设置允许多个子菜单与单个css语句。如果你看看Mcinerney的HTML：

Your HTML structure isn't set up to allow multiple sub-menus with a single css statement. If you look at Mcinerney's HTML:

<div id="menu">
  <ul id="item1">
    <li class="top">menu item</li> 
    <li class="item"><a href="#">menu item 1</a></li> 
    <li class="item"><a href="#">menu item 2</a></li> 
    <li class="item"><a href="#">menu item 3</a></li> 
  </ul> 
</div>

和他的css：

#menu ul:hover .item{display:block;}

翻译为如果你将鼠标悬停在具有idmenu的元素的后代ul上，然后找到所有具有类item的所述ul的后代，并将它们的显示设置为块。

it translates to "If you hover over a "ul" that is a descendant of an element with id, "menu", then find all elements that are descendants of said "ul" with the class, "item" and set their display to "block".

您可以做类似的操作，但是您需要根据LI元素的id为每个子菜单添加一行css：

You can do something similar, but you will need to add a line of css for each sub-menu based on the id of the LI element:

#test2:hover div.subMenu { display: block; }

＃test2指的是id为test2的任何元素。

"#test2" refers to any element with an id of "test2".

div.subMenu因为它在＃test2之后，所以div元素必须是＃test2的后代。

"div.subMenu" refers to any element (in this case a div) with a class designation of "subMenu". Because it comes after "#test2", the div element must be a descendant of "#test2".

为了保持你的背景图像悬停，你需要对css和html进行一些修改。首先，在A上指定一个类（因为我们不想引用所有作为＃test2的子元素的A元素，只是指定的元素）：

In order to keep your background-image on hover, you'd need to make some changes to the css and html. First, designate a class on the "A" (because we don't want to reference all "A" elements that are children of #test2, just the designated one):

<li id="test2"><a href="#" class="top">Pro1</a> ...

然后修改您的css，以便在悬停在＃test2 ＃test2 a）：

Then modify your css so that the background is set upon the hover over #test2 (not #test2 a):

#test2:hover a.top {
  background:url("../images/btTest.jpg") no-repeat top;
}

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