代码之家 › 专栏 › 技术社区 › geochanto

jQuery SlideDown子菜单上边距

joomla3.0 css html jquery

geochanto · 技术社区 · 10 年前

我有以下幻灯片菜单代码:

jQuery(window).ready(function(){
    jQuery('.menu>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });

    jQuery('.menu>li>ul>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });
});

它工作得很好,除非显示.menu ul-ul时,它会从父项向下滑动一级,因此不能悬停在它上面。关于如何通过jQuery或CSS对此进行永久修复,有什么建议吗?

以下是CSS文件:

.menu {
         padding:0;
         margin: 0;
}

.menu ul{
         list-style: none;
         margin: 0;
         padding: 0;       
}

.menu li{ /*these will be main menu items*/
  list-style: none;
  float: left;
  line-height: 37px;
  font-family: Arial;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.menu li ul { /*first drop-down*/
 left: -999em;
 position: absolute;
 width: 186px;
 z-index: 500;
 background: #666666;
 display: none;
}

.menu li:hover ul {
  left: auto;
}

.menu li ul ul {
 margin-left: 186px; 
 display: none;
}

.menu li ul li {
  text-align: left;
  width: 186px;
}

.menu a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  margin: 0;
  padding-left: 30px;
  padding-right: 30px;
}

.menu li.active a {
  background: #454545;
}

.menu a:hover{
 color: #FBF4B6;
 background: #333;
}

.menu li ul li a {
  padding-left: 30px;
  padding-bottom:2px;
  padding-top:2px;
  border-bottom: 1px solid #999;
}

.menu li.active ul li a:hover {
  background: #333;
}

1 回复 | 直到 10 年前

geochanto 10 年前

我终于找到了解决这个问题的方法: http://jsfiddle.net/297t6/

.menu
{
    margin:0;
    padding:0;
}
.menu > li
{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    position:relative;
}
.menu a
{
    text-decoration:none;
    color:#fff;
    background:red;
    display:block;
    padding:10px;
}
.menu > li ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    z-index: 999;
}
.menu > li ul ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    left:150px;
    top:0;
    z-index: 999;
}
.menu > li ul li
{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
}

复制了CSS和Javascript(它比我的干净得多),更改了类名,这很有效。