在我的网页，我想在我的菜单创建一个无序列表内的无序列表，这样有第二个下拉菜单。 的问题是，第二个下拉菜单显示的同时与第一。
.menu { border: none; border: 0px; margin: 0px; padding: 0px; font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; } .menu ul { background: #333333; height: 35px; list-style: none; margin: 0; padding: 0; } .menu li { float: left; padding: 0px; } .menu li a { background: #333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat; color: #cccccc; display: block; font-weight: normal; line-height: 35px; margin: 0px; padding: 0px 25px; text-align: center; text-decoration: none; } .menu li a:hover, .menu ul li:hover a { background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat; color: #FFFFFF; text-decoration: none; } .menu li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200; /*top:1em; /*left:0;*/ } .menu li:hover ul { display: block; } .menu li li { background: url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px; } .menu li:hover li a { background: none; } .menu li ul a { display: block; height: 35px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left; } .menu li ul a:hover, .menu li ul li:hover a { background: #2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat; border: 0px; color: #ffffff; text-decoration: none; } .menu p { clear: left; }
<div class="menu"> <ul> <li><a href="/search/label/game">Games</a> <ul id="1"> <li><a href="/search/label/minecraft">minecraft</a> <ul id="2"> <li><a href="/search/label/Project">Projects</a> </li> <li><a href="/search/label/Texture Pack">Texture Packs</a> </li> <li><a href="/search/label/Skin">Skins</a> </li> <li><a href="/search/label/Mod">Mods</a> </li> <li><a href="/search/label/Other">Other Stuff</a> </li> </ul> </li> </ul> </li> </ul> </div>
以获得子菜单的工作，关键是要使用子组合子 （ > ）到目标的直接后裔。
孩子组合子描述两个元素之间的关系的童年。 一种儿童组合子由与“大于号”（U + 003E，>）字符，并分离简单选择的两个序列。
（ http://www.w3.org/TR/css3-selectors/#child-combinators ）
下面的改变是必需的：
- 添加
.menu li ul ul设定left: 100%; 和top: 0; 。 这将告诉所有的子菜单可以靠着它的父菜单的右侧边缘。 - 更改
.menu li:hover ul到.menu li:hover > ul 。 这将确保只有直接子ul ，当用户将鼠标悬停在父示li 。 - 更改
.menu li ul a:hover, .menu li ul li:hover a到.menu li ul li:hover > a 。 这将确保只有直接孩子a当用户将鼠标悬停在父s的高亮li 。
.menu { border: none; border: 0px; margin: 0px; padding: 0px; font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; } .menu ul { background: #333333; height: 35px; list-style: none; margin: 0; padding: 0; } .menu li { float: left; padding: 0px; } .menu li a { background: #333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat; color: #cccccc; display: block; font-weight: normal; line-height: 35px; margin: 0px; padding: 0px 25px; text-align: center; text-decoration: none; } .menu li a:hover, .menu ul li:hover a { background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat; color: #FFFFFF; text-decoration: none; } .menu li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200; } .menu li ul ul { top: 0; left: 100%; } .menu li:hover > ul { display: block; } .menu li li { background: url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px; } .menu li:hover li a { background: none; } .menu li ul a { display: block; height: 35px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left; } .menu li ul li:hover > a { background: #2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat; border: 0px; color: #ffffff; text-decoration: none; }
<div class="menu"> <ul> <li><a href="/search/label/game">Games</a> <ul id="1"> <li><a href="/search/label/minecraft">minecraft</a> <ul id="2"> <li><a href="/search/label/Project">Projects</a> </li> <li><a href="/search/label/Texture Pack">Texture Packs</a> </li> <li><a href="/search/label/Skin">Skins</a> </li> <li><a href="/search/label/Mod">Mods</a> </li> <li><a href="/search/label/Other">Other Stuff</a> </li> </ul> </li> </ul> </li> </ul> </div>
