仅 CSS 下拉菜单

Question

我正在尝试制作 CSS 下拉菜单（不涉及 JavaScript）。根据 http://pixelspread.com/blog/289/css-drop-down- menu 我只需要添加

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

即可显示子菜单。但是，在我的代码中，它不起作用。有人可以帮我解决这个问题吗？多谢！

我的 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;
}

Answer 1

您的 HTML 结构未设置为允许使用单个 css 语句使用多个子菜单。如果您查看 Mcinerney 的 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;}

它会翻译为“如果您将鼠标悬停在 id 为“menu”的元素的后代“ul”上，则查找属于该“ul”后代的所有元素类“item”并将其显示设置为“block”

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

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

“#test2”指的是id 为“test2”的任何元素。

“div.subMenu”引用类名称为“subMenu”的任何元素（在本例中为 div），因为它位于“#test2”之后，因此 div 元素必须是。 “#test2”的后代。

为了使背景图像保持悬停状态，您需要对 css 和 html 进行一些更改，首先在“A”上指定一个类（因为我们不希望这样）。引用 #test2 子级的所有“A”元素，仅指定指定的元素）：

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

然后修改 css，以便在将鼠标悬停在 #test2 上时设置背景（而不是 #test2 a）：

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

Answer 2

div.subMenu 不是“a”标签的后代。尝试：

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

“+”意味着“直接跟随的兄弟”

您可能还需要

.submenu:hover {
    display:block;
}

或者只是将它们组合起来：

#menuBar > li > a:hover + .subMenu, .submenu:hover {  
    display:block;
}

Answer 3

这是一个跨浏览器 CSS 下拉菜单，也适用于 IE6。它使用 CSS hacks 和条件 HTML 标记，但它有效！

http://www.cssplay.co.uk/menus/final_drop.html

Answer 4

Steve Gibson 的网站上有一个纯 CSS 菜单的很好的例子 - http://www.grc.com。

Answer 5

前往我的 http://collins.class401.com/nav 文件夹，下载所有 css以及 gif 和 js（不用担心，它也可以在没有 javascript 的情况下工作）并查看自述文件并查看演示，

这正是您想要的