0

所以我已经破解了这个 CSS 菜单教程,我几乎完成了自定义它,但是我有 2 个问题。每当我浏览包含两个附加列表链接的“关于”菜单时,转换工作但随后内容向左移动并淡出。第二个是,我正在尝试使用 CSS 过渡让底部边框向上滑动,但它只是淡入颜色。我尝试更改高度、边距底部、底部但没有骰子。我附上了代码和小提琴

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;  }
4

1 回答 1

1

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

至于产生从底部上升的颜色效果,您可以创建一个起始高度为 5px 的绝对定位<div>在内部,<li>并在悬停时增加它以覆盖整个框。

编辑

这是一个示例小提琴。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;
}

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

于 2013-08-06T20:46:47.253 回答