Question

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

.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索引问题，但我不这么认为？

我不介意甚至从头开始重新编码我可能在jQuery中如果有人可以指向一个很好的教程的方向来为每个第一个菜单项设置单独的颜色/图像。

Answer 1

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

你肯定有后一个问题，即

<ul>
  <li/>
  <li>
    <a/>      <<< (read below first) in here...
  </li>
  <ul />     <<< this ul should be (see above arrows)
  <li/>
</ul>

CSS菜单包含第一个li级别和li：hover的单个图像

1 个答案: