0

我正在制作一个 CSS 菜单。我正在尝试编辑现有代码，我需要为第一级的每个项目制作一个带有单独图像的 css 菜单，<li>如下所示：

.leftmenu a.link1 { padding-top: 42px; background:transparent url('../images/home_on.gif');   }
.leftmenu a.link2 { background:transparent url('../images/serv_off.gif'); }
.leftmenu a.link3 { background:transparent url('../images/know_off.gif'); }
.leftmenu a.link4 { background:transparent url('../images/exp_off.gif'); }
.leftmenu a.link5 { background:transparent url('../images/ref_off.gif'); }
.leftmenu a.link6 { background:transparent url('../images/links_off.gif'); }
.leftmenu a.link7 { background:transparent url('../images/contact_off.gif'); }
.leftmenu a.link8 { background:transparent url('../images/blog_off.gif'); }

.leftmenu a.link1:hover { background:transparent url('../images/home_on.gif') -163px -42px no-repeat; background-position:0 0; }
.leftmenu a.link2:hover { background:transparent url('../images/serv_on.gif') -163px -28px  no-repeat;   background-position:0 0;  }
.leftmenu a.link3:hover {background:transparent url('../images/know_on.gif') -163px -28px  no-repeat; background-position:0 0; }
.leftmenu a.link4:hover { background:transparent url('../images/exp_on.gif') -163px -28px  no-repeat; background-position:0 0; }
.leftmenu a.link5:hover { background:transparent url('../images/ref_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link6:hover { background:transparent url('../images/links_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link7:hover {background:transparent url('../images/contact_on.gif') -163px -28px  no-repeat; background-position:0 0;  }
.leftmenu a.link8:hover {background:transparent url('../images/blog_on.gif') -163px -28px  no-repeat; background-position:0 0;  }

现在我正在尝试向这个菜单添加一个弹出窗口，我能找到的唯一方法是这样的：

li.list2:hover + ul.sub-menu{  
display: block;
position: absolute;
left: 14px;
text-indent: 0px!important;

background-color: black;
margin: 0px;

list-style: none;
top: -20px;
border-radius: 10px;
}
ul.sub-menu{
display: none;
}

菜单中还添加了这个 css：

.leftmenu{ width:163px; margin-left:7px; position: relative; z-index: 0;}
.leftmenu ul{ margin:0px; padding:0px;  }
.leftmenu  a { display:block; width:163px; height:0; padding-top:28px; color: white;  text-indent:-3000px; }

这似乎工作正常，除了当我滚动设置为显示子菜单项的菜单项时，子菜单就会消失，也许这是一个 z-index 问题，但我不这么认为？

我什至不介意从头开始重新编码，如果有人可以指出我的方向，可以为每个第一个菜单项设置单独的颜色/图像样式，我可能会使用 jQuery。

4

1 回答 1

1

这要么是因为您在第一级菜单和子菜单项之间存在间隙，要么您的“嵌套 ul”没有嵌套在 li 中导致悬停行为。

你肯定有后一个问题，即

<ul>
  <li/>
  <li>
    <a/>      <<< (read below first) in here...
  </li>
  <ul />     <<< this ul should be (see above arrows)
  <li/>
</ul>
于 2013-01-05T14:40:39.050 回答