Question

我有一个我正在处理的下拉菜单，并且遇到了我找不到的过程中的错误。这是一个Wordpress网站，因此主题已经制作;但在尝试更改菜单布局时，我遇到了一个小错误。

该网站目前位于http://redballoontoystore.com/e。我知道你想要代码，但我不知道我复制和粘贴的代码是否会有错误。我想用firebug来找到问题。当我将鼠标悬停在“玩具”上时，掉落的菜单全部搞砸了。

基本结构是

<div id="categories">
 <ul>
  <li>
   <ul class="sub-menu">
    <li>
     <ul class="sub-menu">
      <li></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

有些CSS是

#main_navigation {
  z-index: 10;
  position: relative;
  margin-bottom: 30px;
}
#main_navigation > .s_wrap > .s_col_12 {
  position: relative;
  border-top: 1px solid #e6e6e6;
}
#categories {
  clear: both;
  <?php if ($language == 'ltr'): ?>
  float: left;
  <?php else: ?>
  float: right;
  <?php endif; ?>
  padding: 13px 0 0 0;
}
#categories > ul {
  margin-bottom: 14px;
}
#categories > ul > li,
#categories > ul > li > a
{
  position: relative;
  height: 32px;
  line-height: 32px;
}
#categories > ul > li > a {
  padding: 0 10px;
}
#categories > ul > li:hover > a,
#categories > ul > li > a:hover
{
  color: #fff;
}
#categories > ul > li > .sub-menu,
#cart_menu .s_submenu
{
  width: 200px;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

ul.sub-menu > li > ul {                                         /*Added by David*/
    width: 100%;
    padding: 0px 15px;
    clear: left;
}

#categories .sub-menu > li {
  <?php if ($language == 'ltr'): ?>
  float: left;
  clear: left;
  <?php else: ?>
  float: right;
  clear: right;
  <?php endif; ?>
  width: 185px;
  line-height: 20px;
}
#categories .sub-menu > li:before {
  top: 13px;
}
#categories .sub-menu > li > a {
  display: block;
  padding: 5px 0;
}
#categories .sub-menu > li:hover {
  position: relative;
}
/*****#categories .sub-menu li:hover > ul {****/
/*****  display: block;                    ****/                        /*Commented out by David*/
/****}                                     ****/
#categories .sub-menu > ul {
  position: absolute;
  /*top: -10px;*/
  left: 96%;
  /*display: none;*/
}
#categories .s_submenu li.s_selected > a {
  font-weight: bold;
}

Answer 1

我发现了这个问题。

#categories .sub-menu ul {
  position: relative;
  /*top: -10px;*/
  /*left: 96%;*/
  /*display: none;*/
  clear:left;
}

我认为不需要clear:left，但我会将其保留在那里。

CSS3下拉菜单中的错误

1 个答案: