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

问题描述

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

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

显示子菜单.但是，在我的代码中，它不起作用.有人可以帮我解决这个问题吗?非常感谢！

我的html

<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><li><a href="#">排球</a></li><li><a href="#">步行</a></li><li><a href="#">水鞋</a></li>

<!--子菜单结束-->

我的 CSS

 #menuBar #test2 a{background:url("../images/btTest.jpg") 无重复底部；显示:块；右边框:1px 实心 #ffffff;宽度:112px；高度:37px；}#menuBar #test2 a:hover{背景:url(../images/btTest.jpg")无重复顶部；}#menuBar #test2 a:hover .subMenu{//我在 a:hover 之后添加 .subMenu 并且有两个 a:hover 用于 #test2 a//我知道这行不通，但不知道现在该做什么.//谢谢您的帮助.显示:块；}.subMenu{//隐藏菜单位置:绝对；顶部:35px；左:0像素；z-索引:99999；宽度:550px；背景颜色:黑色；显示:无；}

解决方案

您的 HTML 结构未设置为允许使用单个 css 语句创建多个子菜单.如果您查看 Mcinerney 的 HTML:

<ul id="item1"><li class="top">菜单项</li><li class="item"><a href="#">菜单项1</a></li><li class="item"><a href="#">菜单项2</a></li><li class="item"><a href="#">菜单项3</a></li>

和他的css:

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

它转换为如果您将鼠标悬停在作为具有 id 的元素的后代的ul"上，菜单"，然后找到所有属于该ul"的后代的元素，具有类item"和 set他们的显示阻止".

您可以做类似的事情，但您需要根据 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 {背景:url(../images/btTest.jpg")无重复顶部；}

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!

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

My 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;
}

解决方案

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>

and his css:

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

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".

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" refers to any element with an id of "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".

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

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屋！