纯CSS下拉菜单

Question

纯CSS下拉菜单

3

我正在尝试制作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;
}

- FlyingCat

2

只是为了让你知道，IE6不支持R.Hill建议的大多数选择器。>，+也不支持，而且:hover伪选择器只在a标签上受支持。 - Strelok

Pfft，谁关心IE 6，甚至IE？ - Delan Azabani

IE6，Strelok？谁在乎。除非你的用户群体是中国人，否则你的用户中可能连0.5%都没有使用IE6。我已经不记得上次在我的网站统计数据中看到IE6弹出窗口的时间了。 - Mike

5个回答

2

div.subMenu 不是 'a' 标签的后代元素。请尝试以下操作：

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

“+”符号表示“直接后续同级元素”。

您可能还需要：

.submenu:hover {
    display:block;
}

或者将它们结合起来：

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

- R. Hill

非常感谢，Hill。当我将鼠标悬停在test2 a上时，子菜单会显示出来，但是如果我尝试将鼠标悬停在子菜单上，它就会消失，即使我添加了.submenu:hover { display:block; }。有什么想法吗？+1 虽然..:D - FlyingCat

我认为这是因为 .submenu 不支持 :hover 状态？ - FlyingCat

你必须确保鼠标直接从'a'到'div'，而不在中间任何其他地方停留，否则会导致你的'a'标签和'div.subMenu'回到非悬停状态，这样菜单就会消失。从CSS来看，我不确定你的子菜单将出现在哪里。它应该与'a'标签（包括边距）相接触。 - R. Hill

再次感谢。uhleeka的解决方案似乎修复了我的问题。 - FlyingCat

顺便问一下，有没有办法让我的test2悬停背景图片保持显示，即使我将鼠标移动到我的子菜单上？ - FlyingCat

2

这是一个跨浏览器的纯CSS下拉菜单，甚至可以在IE6中使用。它使用了CSS hack和条件HTML标记，但它可以正常工作！

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

- Strelok

感谢提供链接和评论。我会尝试解决IE6的问题。 - FlyingCat

1

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

- Andrew Cooper

抱歉，应该更详细地说明一下。Steve是一位安全研究员和开发人员。由于固有的安全问题，他不喜欢JavaScript，因此为他的网站创建了一个仅基于CSS的菜单系统。我相信网站上有一系列页面记录了菜单系统。我在各种版本的IE和Firefox中使用过该网站，没有出现任何问题。 - Andrew Cooper

JavaScript不是一个安全问题。只要你使用一个好的浏览器和操作系统，比如Ubuntu上的Firefox，就不应该有问题。 - Delan Azabani

-1

请前往我的http://collins.class401.com/nav文件夹，下载所有的CSS、GIF和JS文件（不用担心，即使没有JavaScript也可以使用），查看自述文件并查看演示。

这正是您要寻找的东西。

- isildur4

我猜那个投票反对的巨魔甚至都没有看一眼它这适用于IE 5+（甚至是IE5 Mac）和四个真正的浏览器无论是否使用javaqscript而且我已经包括了不能使用:hover的浏览器的支持所以继续投票反对吧巨魔 - isildur4

你可能需要重新考虑一下你的态度。在这里尝试提供帮助是非常受欢迎的，但是你在某些回答和评论中展示的行为方式并不是我们想要看到的。请花点时间阅读FAQ；同时，http://meta.stackoverflow.com/提供了很多关于这个网站如何运作的信息。欢迎来到Stack Overflow。 - balpha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- uhleeka · Accepted Answer

您的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"下所有具有"class"为"item"的后代元素，并将它们的"display"设置为"block"。

你也可以做类似的事情，但需要根据LI元素的id为每个子菜单添加一行CSS代码：

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

"#test2" 指的是任何具有id为 "test2" 的元素。

"div.subMenu" 指的是任何具有class为 "subMenu" 的元素 (在此情况下是一个div)，因为它在 "#test2" 之后，所以这个div元素必须是 "#test2" 的子代。

为了保持你的背景图像在悬停时不变，你需要对css和html进行一些更改。首先，在 "A" 上指定一个类 (因为我们不想引用所有作为 #test2 子元素的 "A" 元素，只想引用指定的 "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;
}