Question

我在使用这个css菜单时遇到了一些麻烦（我对整个HTML / CSS事情都很陌生，所以我拼凑了一些来自Wordpress和其他网站的代码）。一切正常，除非发生以下情况：

我将鼠标悬停在菜单项
下拉菜单淡入
我将光标移出下拉菜单
它移动到菜单元素的最左侧并淡出

我不明白为什么它向左移动并且没有停留在预定的位置，我需要一些帮助来摆脱它。

这是CSS代码：

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

#cssmenu {clear: both; padding: 0; display: block; margin: 0; border: 0; float: left;   z-index: 99999;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding-left: 0;}
#cssmenu ul {position: relative; z-index: 99999; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 99999; cursor: default; opacity: 1;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 99999; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }

#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }

#cssmenu {

position: fixed;
  top: 0;
  left: 180px;

width:100%;
  background: #020202;
  border-bottom: 4px solid #08c1c3;
  font-family: 'Droid Serif', serif;
  font-size: 14px; 
}

  #cssmenu > ul { *display: inline-block; }

  #cssmenu:after, #cssmenu ul:after {
    content: '';
    display: block;
    clear: both; 
}


#cssmenu a {
display: block;
background: #020202;
color: #CCC;
opacity: 1;
padding: 0 20px; 
z-index: 99999;
}


#cssmenu ul ul {
  border-top: 4px solid #08c1c3;
  text-transform: none;
  min-width: 190px;
float: left;
opacity: 0;
  position: absolute;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.4s, opacity 0.4s ease-in;
  -moz-transition: visibility 0s 0.4s, opacity 0.4s ease-in;
  -o-transition: visibility 0s 0.4s, opacity 0.4s ease-in;
  transition: visibility 0s 0.4s, opacity 0.4s ease-in;

    z-index: 99999;
}

#cssmenu ul ul a {
    background: #020202;
    color: #CCC;
    border: 1px solid #08c1c3;
    border-top: 0 none;
    line-height: 1.25;
    padding: 16px 20px; 
z-index: 99999;
width: 150px;
}


#cssmenu ul li:hover > ul {
display: block;
opacity: 1;

-webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition:  opacity 0.4s ease-in;
    visibility: visible;

    }


#cssmenu ul ul li {
 }


#cssmenu > ul > li > a { line-height: 48px;  }

/* #cssmenu ul ul li:first-child > a { border-top: 1px solid #08c1c3; }

#cssmenu ul ul li:hover > a { background: #333; }  */

#cssmenu ul ul li:last-child > a {

          box-shadow: 0 1px 0 #08c1c3; 
}


#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
      background: #333;
      color: #08c1c3;
      opacity: 1;
} /* Top level of menu */

    #cssmenu ul li.has-sub > a:after {
      content: "\00BB";
    float: right;
    margin-left: 5px;
}

    #cssmenu ul li.last ul {
      left: auto;
      right: 0; 
}
      #cssmenu ul li.last ul ul {
        left: auto;
        right: 99.5%;
}

这是一个示例菜单：

<div id='cssmenu'>
  <ul>
     <li class='active'><a href='index.html'>Home</a></li>
     <li class='has-sub '><a href='#'>A</a>
        <ul>
           <li><a href='#'>A-a</a></li>
           <li><a href='#'>A-b</a></li>
        </ul>
     </li>
     <li class='has-sub '><a href='#'>B</a>
        <ul>
           <li><a href='#'>B-a</a></li>
           <li><a href='#'>B-b</a></li>
           <li><a href='#'>B-c</a></li>
        </ul>
     </li>
     <li><a href='#'>C</a></li>
     <li><a href='#'>About</a></li>
  </ul>
</div>

Answer 1

您需要在列表项上设置position:relative作为默认状态，而不是悬停状态：

#cssmenu ul li {
    position: relative;
}

否则，当您将鼠标悬停时，子菜单相对于菜单容器而不是其父级

<强> Updated fiddle

CSS下拉菜单元素向左移动？

1 个答案: