【发布时间】：2013-07-09 18:16:48
【问题描述】：
我需要一些聪明人的帮助。我已经为此绞尽脑汁，我已经接近了，但是无法让我的子菜单项在悬停时向右下降。
我可能有冲突或重复的 css，但我已经删除了部分并放回了其他部分，并且......我只需要看看是否有什么东西跳出来给你们，我相信它会...... - 我感觉就像我很接近，但.. 没有雪茄。我拿了两个菜单并尝试使用每个菜单的一部分（有能力做 2 列，其他有子菜单）所以我知道这可以进一步简化。
我真的很感激 - 我知道它在这一点上一团糟，我已经深入研究了这个简单的 html 部分，但如果你能看到问题所在 - 我是寻找玩具 1 和玩具 3 的 uls 以在悬停时下拉。谢谢。
html
<!-- drop menu-->
<ul id="menu">
<li><a href="toys.aspx">TOYS</a>
<div class="menu-container-1">
<ul class="column-1">
<li><a href=""><span>Toy 1</span></a>
<ul>
<li><a href="">sub menu basic 1</a></li>
</ul>
</li>
<li><a href="">Toy 2</a></li>
<li><a href=""><span>Toy 3</span></a>
<ul>
<li><a href="">sub menu basic 3</a></li>
</ul>
</li>
<li><a href="">Toy 4</a></li>
</ul>
</div>
</li>
</ul>
这里是css：
#menu li {
float:left;
display:block;
position:relative;
text-align:center;
padding:4px 18px;
margin:0px 27px 0 0;
border:none; }
#menu li:hover {
border-width:0 0 0 1px;border-style:solid;border-color:#F1F7FC;
padding:4px 18px 4px 17px;
display:block; }
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:16px/1.8em;
color: #000;
display:block;
outline:0;
text-decoration:none;
font-weight:500; }
#menu li:hover a {
color:#161616; }
/* menu containers here */
#menu .menu-container-1,#menu .menu-container-2,#menu .menu-container-3,#menu .menu-container-4 {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px 3px 5px;
border:1px solid #D8E9F8; /* border around dropdown */
border-top:none;
/* rounded corners */
border-radius:0 5px 5px 5px;
-moz-border-radius:0 5px 5px 5px;
-webkit-border-radius:0 5px 5px 5px;
/* gradient */
background:#ffffff;
background: -moz-linear-gradient(center top, #ffffff, #FAFCFE) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#FAFCFE));
box-shadow:inset .4px -2px 3px 2px #EFFFFF; }
#menu .menu-container-1 {
width:165px; }
#menu .menu-container-2 {
width:340px; }
#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
top:auto;left:-1px; }
/* columns */
#menu .column-1, #menu .column-2 {
display:inline; float:left;position:relative;margin:0;}
/*added 7/9 for span arrow sub menu */
#menu span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
#menu ul span{
background-image:url("https://www.kqimageserver.com/other/arrowsub.png");padding-right:12px;}
/*thought might be sub menu */
#menu ul ul {
position:absolute;left:80%;top:0;}
#menu .column-1 {
width:165px;}
#menu ul li ul li{ display:none;}
#menu ul li ul li ul li hover>* {display:block; }
/* attempts to get sub menu to show on hover */
#menu .column-1 ul li ul li:hover>*{
display:block;position:absolute;left:80%;top:0;}
#menu li:hover div a {
box-shadow: 0 1px 0 #eeeeee, 0 2px 0 #eeeeee; /*lines between list items */
color: #000;
font-size: 13px;
padding-left: 6px;
font-weight:500;
width: 159px; }
#menu li:hover div a:hover {
background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));
color: #000;
background:#deeff7;}
#menu li ul {
/*box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; */
list-style:none;
padding:0;
margin-bottom:7px;}
#menu li ul li {
float: none;
font-size: 12px;
line-height: 24px;
margin: 0;
padding: 0;
position: relative;
text-align: left;
width: 130px;}
#menu li ul li:hover {
background: none;
border: medium none;
margin: 0;
padding: 0; }
这是一个 js-fiddle http://jsfiddle.net/tousif123/TfhLb/
【问题讨论】：
标签： html css drop-down-menu