Question

我需要一些聪明人的帮助。我已经把我的大脑弄得一团糟了，我很接近，但是在悬停时我的子子菜单项不能直接向右移动。

我可能有冲突或反复的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;  }

这是一个小提琴手 http://jsfiddle.net/tousif123/TfhLb/

Answer 1

尝试

删除

#menu ul li ul li {
    display: none;
}

并添加

ul.column-1 li ul
{
display:none;
}

ul.column-1 li:hover ul
{
    display:block;
}

这是一个小伙伴 http://jsfiddle.net/tousif123/brBj5/

Answer 2

你的块显示只有一个错误的选择器：

#menu ul li ul li ul li hover>* {display:block; }

应该阅读

#menu ul li:hover ul li { display: block; }

Answer 3

使用display：none和display：block不是很容易访问。

最终，如果你有时间和耐心，最好的办法就是使用剪辑技术。它会在不需要时隐藏内容，但也可以访问：

http://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html

下拉菜单项不会下拉

3 个答案: