html - 水平双层 CSS 菜单(包含 jsfiddle)

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/