Html 仅CSS下拉菜单

我正在尝试制作CSS下拉菜单（不涉及javascript）。根据 我只需要补充一下

#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>

---

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

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

“+”表示“的直接跟随兄弟”

您可能还需要

.submenu:hover {
    display:block;
}

或者把它们结合起来：

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

---

史蒂夫·吉布森（Steve Gibson）的网站上有一个仅使用CSS的菜单的好例子-。

您的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>

它转换为“如果您将鼠标悬停在id为“menu”的元素的后代“ul”上，则使用类“item”查找作为所述“ul”的后代的所有元素，并将其显示设置为“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”元素，只引用指定的一个）：

---

这是一个只支持跨浏览器CSS的下拉菜单，在IE6中也可以使用。它使用CSS技巧和条件HTML标记，但它可以工作

转到我的文件夹，下载所有css和GIF以及js（别担心，它也可以在没有javascript的情况下工作），查看自述文件并查看演示

---

---

这正是您要查找的内容

非常感谢Hill。当我悬停test2 a时，子菜单会显示出来，但如果我尝试添加子菜单，它将消失。子菜单：悬停{display:block；}你知道会发生什么吗？？？+1虽然…：我认为这是因为。子菜单不支持：悬停状态？你必须确保鼠标直接从“a”移动到“div”，而不在中间移动任何其他位置，否则会导致你的a标记和div.子菜单返回到非悬停状态，在这种情况下，菜单将消失。看着CSS，我不得不说我不确定您的子菜单将出现在哪里。它应该接触a标签（包括页边距）再次感谢。uhleeka的解决方案似乎解决了我的问题。顺便说一句，为了让我的test2悬停背景图像显示出来，即使我将鼠标移动到我的子菜单？？？正如你所知，IE6不支持R.Hill建议的大多数选择器。>，+不受支持，以及：除了

a

.Pfft之外，任何东西都不支持悬停伪选择器，谁在乎IE6，甚至IE？IE6，Strelok？？？谁在乎。除非你是为了迎合中国人，否则你可能连0.5%的用户都不会在IE6上。我不能告诉你我最后一次在我的任何网站统计数据中看到IE6弹出的时间。太棒了。它修复了当我悬停到我的子菜单时，我的“子菜单”将消失“谢谢你。我希望我能给你们两个公认的答案……+1当然你的第一个解决方案很好。更新后的答案在我的情况下可能不起作用。顺便说一句，即使我将鼠标移动到子菜单？？我的错误，你知道如何保持我的test2始终显示悬停背景图像吗。您的html结构与您引用的示例不同。您能更改它吗？很抱歉造成混乱…已修复。。。我仍在试图找出如何使我的#菜单#测试2当我将鼠标移动到子菜单时，背景图像保持悬停状态…：（感谢您的链接和评论。我将尝试修复IE6问题。对不起，应该更具描述性。Steve是一名安全研究员和开发人员。出于固有的安全考虑，他不喜欢javascript，因此为他的网站创建了一个仅CSS的菜单系统。我相信网站上有一系列页面记录了菜单系统em也是。我在不同版本的IE和firefox中使用过这个网站，没有任何问题。JavaScript不是一个安全问题。只要你使用一个好的浏览器和操作系统，比如Ubuntu上的firefox，就不会有问题。我猜投票否决它的巨魔甚至懒得去看它。这在IE 5+（甚至是IE5 mac）中也能工作，以及4款真正的浏览器，有或没有javaqscript，我已经包括了对不能使用的浏览器的支持：hover，所以投票否决它。你可能想重新考虑你的态度。当你试图在这里提供帮助时，这是非常感谢的，但你在一些答案和评论上显示的行为不是我们喜欢的请看这里。请花一点时间阅读；还提供了许多有关此网站如何工作的信息。欢迎使用Stack Overflow。

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

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

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

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