1

我需要一些聪明人的帮助。我已经为此绞尽脑汁,我已经很接近了,但只是无法让我的子菜单项在悬停时下降到右侧。

我可能有冲突或重复的 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/

4

3 回答 3

0

您只是为块显示设置了一个错误的选择器:

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

它应该读

#menu ul li:hover ul li { display: block; }
于 2013-07-09T18:41:28.627 回答
0

尝试

去除

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

并添加

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

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

这是一个 js-fiddle http://jsfiddle.net/tousif123/brBj5/

于 2013-07-09T18:37:22.243 回答
0

使用 display:none 和 display:block 不是很方便。

最终,如果您有时间和耐心,最好的办法就是使用剪辑技术。它会在不需要时隐藏内容,但也会保持可访问性:

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

于 2013-07-09T18:48:42.073 回答