Question

我试图制作一个双层菜单，发现这个有用的代码由Stu Nicholls制作。但是，他使用图像来显示标签：

http://www.cssplay.co.uk/menus/dropline-current-override.html

但我不想使用图像，因为使用图像对颜色的处理方式有点限制。我已将代码放入jsfiddle：

http://jsfiddle.net/ak3vV/

我希望它的行为与此完全相同，并突出显示当前选择：

http://jsfiddle.net/AvoSonic/QBBkS/1/

编辑： Item2当前已被选中，因此会以某种颜色突出显示当你将鼠标悬停在其他物品上时（item1，item3等），它们会以不同的颜色突出显示结束编辑

我一直在努力摆弄它，但似乎无法让它变得非常正确......当它不应该被突出显示时，它们总会被突出显示应该是..

见下文：我不想使用tab.gif

 #droplineMenu ul ul li a:hover {background:url(tab.gif) right top; line-height:60px; }
 #droplineMenu ul ul li a:hover b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

 #droplineMenu ul ul li:hover > a {background:url(tab.gif) right top; line-height:60px; }
 #droplineMenu ul ul li:hover > a b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

 #droplineMenu ul ul li.current a {background:url(tab.gif) right top; line-height:60px;}
 #droplineMenu ul ul li.current a b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

请注意，我是css的新手，所以对于菜单栏来说这是一个很大的例子，有点令人困惑..

Answer 1

我已经更新了你的css如下。

#photo {display:block; margin:0 auto;}

#droplineMenu {height:66px; position:relative; background-color:#b0c4de; text-align:center; width:960px; margin:0 auto; z-index:100; }
#droplineMenu ul {padding:0; margin:0; list-style:none; }
#droplineMenu table {border-collapse:collapse; width:0; height:0; margin-top:-1px; margin-bottom:-1px; }
#droplineMenu ul ul li {float:left; }
#droplineMenu ul ul li a {display:block; float:left; }
#droplineMenu ul ul div {position:absolute; left:-9999px; overflow:hidden; }

#droplineMenu ul#menuOuter {display:inline-block; } 
#droplineMenu ul#menuOuter li.lv1-li {display:inline-block; height:66px; }

#droplineMenu ul ul li a {height:66px; line-height:66px; padding:0 20px 0 0; font-size:14px; font-family: tahoma, sans-serif; color:#fff; text-decoration:none; text-transform:uppercase; }
#droplineMenu ul ul li a b {display:block; height:66px; float:left; padding:0 0 0 20px; font-weight:normal; cursor:pointer; }
#droplineMenu ul ul li a:hover {background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li a:hover b {color:#fc0; background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li div{background-color:#00ffff;}
#droplineMenu ul ul li:hover > a {background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li:hover > a b {color:#fc0; background-color:#00ffff; line-height:60px; }

#droplineMenu ul ul li.current a {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul ul li.current a b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

#droplineMenu ul ul li.current div {left:0; top:66px; width:960px; text-align:center;} /*change this for currently selected */

#droplineMenu ul ul :hover div {left:0; top:66px; width:960px; text-align:center; height:40px;}
#droplineMenu ul ul li.current div b {display:block; width:960px; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.6; padding:0; line-height:40px;}
#droplineMenu ul ul li div b {display:block; width:960px; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.6; padding:0; line-height:40px;}

#droplineMenu ul ul li div ul {display:inline-block; } /*Change this for submenu*/
#droplineMenu ul ul li div ul li {display:inline-block; display:inline;}

#droplineMenu ul ul div a {background-image:none; height:40px; line-height:40px; font-size:12px; padding:0 20px;}
#droplineMenu ul ul div a:hover {background-image:none; color:#fc0; line-height:40px;}

#droplineMenu ul#menuOuter li.lv1-li a:hover {direction:ltr;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div {left:-9999px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div {left:-9999px;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover div {background-color:#ff00ff;left:0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover div {left:0;background-color:#ff00ff;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a {background-color:#ff00ff; color:#fff; line-height:66px;} 
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a b {background-color:#ff00ff; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a {background-color:#ff00ff; color:#fff; line-height:66px;} 
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a b {background-color:#ff00ff; color:#fff; line-height:66px;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a {background-color:#ff00ff; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a b {color:#fc0;background-color:#ff00ff; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover {background-color:#ff00ff; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover b {color:#fc0;background-color:#ff00ff; line-height:60px;}

#droplineMenu ul ul li.current div ul li a {background-image:none; color:#fff; line-height:40px; }
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover ul li a {background-image:none; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover ul li a {background-image:none; line-height:40px;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li a:hover {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li a:hover {color:#fc0;}

#droplineMenu ul ul li.current div ul li.current_sub a {background-image:none; color:#fc0; line-height:40px;}
#droplineMenu ul ul li.current div ul li.current_sub a:hover {background-image:none; line-height:40px;}
#droplineMenu ul ul li a:hover div b,
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover div b {display:block; width:960px; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.6; padding:0; line-height:40px;}

检查下面的Jsfiddle以供参考

http://jsfiddle.net/w4QW2/

水平双层CSS菜单（包括jsfiddle）

1 个答案: