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“上，则使用类”item“查找所有”ul“后代的元素他们的显示为“阻止”。

你可以做类似的事情，但你需要根据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;
}

答案 1 :(得分：2)

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

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

'+'表示'直接跟随'

的兄弟姐妹

您可能还需要

.submenu:hover {
    display:block;
}

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

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

答案 2 :(得分：2)

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

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

答案 3 :(得分：1)

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

答案 4 :(得分：-1)

Answer 2