Question

我一直试图用两种颜色（黑色和白色）显示简单的下拉菜单。当我选择子选项卡时，我在父选项卡中看不到任何内容。请查看Tab1和Tab3。

在Tab3中，如果我选择了大孩子，我无法选择任何父母的视图。我的代码如下。

CSS文件：

*   { margin: 0; padding: 0; }
body    { font: 14px Helvetica, Sans-Serif; } 
#page-wrap  { width: 800px; margin: 25px auto; } 
a   { text-decoration: none; }
ul  { list-style: none; }
p   { margin: 15px 0; }

label {
    vertical-align: top;
    display: inline-block;
}

.ui-custom-calender-icon {
    background: url("images/calender_icon.png") no-repeat #ECECED;
    height: 25px;
    width: 25px!important;
    border-radius:  2px!important;
}

/* 
 *  LEVEL ONE
 */
ul.dropdown { position: relative; }
ul.dropdown li      { font-weight: bold; float: left; zoom: 1; background: #505050;}
ul.dropdown a:hover { color: #505050; }
ul.dropdown a:active    { color: #505050; }
ul.dropdown li a    { display: block; padding: 4px 8px; border-right: 1px solid #ffffff;color: #ffffff; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover    { color: #505050;background: #ffffff;  position: relative; }
ul.dropdown li.hover a  { color: #ffffff; background: #505050;}

/* 
 *  LEVEL TWO
 */
ul.dropdown ul      { width: 220px; visibility: hidden; z-index: 100; position: absolute; top: 100%; left: 0; background: #505050;}
ul.dropdown ul li       { font-weight: normal; background: #505050; color: #505050;border-bottom: 1px solid #fff; float: none; }

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a     { border-right: none; width: 100%; display: inline-block; } 

/* 
 *  LEVEL THREE
 */
ul.dropdown ul ul       { left: 100%; top: 0; }
ul.dropdown li:hover > ul   { visibility: visible; }

HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title> My Custom MenuBar </title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
    </head>
    <body>
            <div id="content">
                <div id="menubar">
                    <ul class="dropdown">
                        <li><a href="#">TAB 1</a>
                            <ul class="sub-menu">
                                <li><a href="#">CHILD 1</a></li>
                                <li><a href="#">CHILD 2</a></li>
                                <li><a href="#">CHILD 3</a></li>
                                <li><a href="#">CHILD 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">TAB 2</a></li>
                        <li><a href="#">TAB 3</a>
                            <ul class="sub_menu">
                                <li><a href="#" onclick="">CHILD 1</a>
                                    <ul clas="sub_menu">
                                        <li><a href="#" onclick="">GRAND CHILD 1</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <script type="text/javascript" src="dropdownPlain.js" defer="defer"></script>
    </body>
</html>

Answer 1

Demo

编辑前四行

 ul.dropdown    { position: relative; }
    ul.dropdown li      { font-weight: bold; float: left; zoom: 1; background: #505050; position: relative; }
    ul.dropdown li a    { display: block; padding: 4px 8px; border-right: 1px solid #ffffff; }

Answer 2

您的问题来自您的以下css代码行：

ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #ffffff; color: #ffffff; }

这里提到的文字颜色为白色＆＃39;在悬停，这很好。直到悬停状态从＆＃39;标签变换＃＆＃39;元素到其子元素或下拉菜单项的任何一个。由于当前悬停项目已更改，因此您的以下其他css代码行适用：

ul.dropdown li.hover, ul.dropdown li:hover  { color: #505050;background: #ffffff;  position: relative; }

哪个正在改变任何＆＃39; li＆＃39;背景颜色为白色。现在，此时背景和文本颜色都是白色，因此您的父元素文本不可见。

<强>更新

关注css可以解决您的问题：

ul.dropdown li:hover { color: #ffffff; background: red; position: relative; }
ul.dropdown li:hover a { color: #ffffff; }
*change background color from red to anyother of your choice, but not to white :)

应该解决你的问题。

选择子选项卡时无法查看父选项卡的文本

2 个答案: