Question

所以我已经破解了这个CSS菜单教程，我几乎完成了自定义它，但是我遇到了2个问题。每当我查看包含两个附加列表链接的“关于”菜单时，转换都会起作用，但随后内容会向左移动并淡出。第二个是，我试图让底部边框使用CSS过渡向上滑动，但它只是淡化了颜色。我尝试改变高度，边缘底部，底部但没有骰子。我已附上代码和fiddle

HTML

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>About Us</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>The School</span></a>
         </li>
         <li class='has-sub'><a href='#'><span>Instructors</span></a>
         </li>

      </ul>
   </li>
   <li><a href='#'><span>Classes</span></a></li>
   <li><a href='#'><span>Schedule</span></a></li>
   <li><a href='#'><span>News</span></a></li>
   <li><a href='#'><span>Programs</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

 a {
    -webkit-transition: all 0.2s linear 0.2s;
    -moz-transition: all 0.2s linear 0.2s;
    -ms-transition: all 0.2s linear 0.2s;
    -o-transition: all 0.2s linear 0.2s;
    transition: all 0.2s linear 0.2s;}

#cssmenu { width: 840px; padding: 0; margin: 0; border: 0; }  
#cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; }
#cssmenu ul { position: relative;  z-index: 597; }

#cssmenu ul li { text-align:center; width: 120px; float: left; min-height: 1px; vertical-align: middle; }
#cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; }
#cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; }
#cssmenu ul ul li { float: none; width: 200px;  }
#cssmenu ul li:hover > ul { visibility: visible; }
#cssmenu ul ul li { bottom: 100; left: 0; margin-top: 0; font-weight: normal; }

#cssmenu a { display: block; line-height: 1em; text-decoration: none; }

#cssmenu { background: #000; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; font-size: 12px; }
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after { display: block; clear: both; }
#cssmenu ul ul a {background: #333;color: #FFF; border: 1px solid #fff; border-top: 0 none; line-height: 150%; padding: 16px 20px; }
#cssmenu ul ul li { position: relative; }

#cssmenu ul ul li:nth-child(1) > a { background: #333; border-bottom: 1px solid #FFF }
#cssmenu ul ul li:nth-child(1) > a:hover { color: #fff; background: #333}
#cssmenu ul ul li:nth-child(2) > a { background: #333; border-bottom: 1px solid #FFF;}
#cssmenu ul ul li:nth-child(2) > a:hover { color: #fff; background: #333; }



#cssmenu ul li:nth-child(1) > a { border-bottom: 5px solid #fff; }
#cssmenu ul li:nth-child(2) > a { border-bottom: 5px solid #ff6; }
#cssmenu ul li:nth-child(3) > a { border-bottom: 5px solid #f60; }
#cssmenu ul li:nth-child(4) > a { border-bottom: 5px solid #00f; }
#cssmenu ul li:nth-child(5) > a { border-bottom: 5px solid #0c6; }
#cssmenu ul li:nth-child(6) > a { border-bottom: 5px solid #63c; }
#cssmenu ul li:nth-child(7) > a { border-bottom: 5px solid #f00; }

#cssmenu ul li:nth-child(1) > a:hover { color: #000; background: #fff; }
#cssmenu ul li:nth-child(2) > a:hover { color: #000; background: #ff6; }
#cssmenu ul li:nth-child(3) > a:hover { background: #f60; }
#cssmenu ul li:nth-child(4) > a:hover { background: #00f; }
#cssmenu ul li:nth-child(5) > a:hover { background: #0c6; }
#cssmenu ul li:nth-child(6) > a:hover { background: #63c; }
#cssmenu ul li:nth-child(7) > a:hover { background: #f00; }

#cssmenu ul ul li.has-sub > a:after                     {position: absolute;top: 50%;right: 15px;margin-top: -8px; }
#cssmenu ul li.has-sub > a:after                        { margin-left: 5px; }
#cssmenu a                                              { background: #000; color: #fff;padding: 0 20px; line-height: 45px;  }

Answer 1

尝试将position: relative;添加到#cssmenu ul li。这将解决您的问题，子菜单浮动到左侧。

至于产生从底部上升的颜色的效果，你可以在<div>内创建一个绝对定位的<li>，起始高度为5px，并且一旦你增加它就覆盖整个盒子徘徊。

修改

这是一个小例子。 http://jsfiddle.net/bbZS8/

我只是在第二个标签上加了解效果，（关于我们）。

#yellow-test { position: absolute; bottom: -5px; left: 0; height: 5px; width: 100%; background-color: #FF6; color: #FF6; overflow: hidden; line-height: 45px; -webkit-transition: height .25s ease; -moz-transition: height .25s ease; -o-transition: height .25s ease; transition: height .25s ease; } #cssmenu ul li:hover > div { height: 50px; color: #000; }

这并不完美，但却为开始调整提供了一个很好的起点。

菜单转换效果与子菜单

1 个答案: