html - CSS3 导航子菜单没有继承它的类

Question

我一直在玩 CSS3 试图真正理解它，但我无法使子菜单导航的行为正确。请看http://jsfiddle.net/jllcpp04/9Jpd6/7/一个工作的例子。子菜单上仍然有元素符号点，并且没有弹出到右侧。这是动态菜单的一部分，其宽度将根据将出现的办公室(基于用户配置文件)而变化。我不想为 div 位置设置上/右/左/下。我也不知道为什么 derivnav 没有覆盖嵌套的子菜单。

我的 HTML 代码:

 <div class="main_nav">
        <ul class="nav">
            <li><a href="#">Home</a>
            </li>
            <li>
                <div class="submenu"><a href="#" class="drop">Office</a>

                    <div class="subnav">
                         <h3>Near You</h3>

                        <ul>
                            <li>
                                <div class="deriv"><a href="#" class="dropr">New York</a>

                                    <div class="derivnav">
                                        <ul>
                                            <li><a href="#">Upper West Side</a>
                                            </li>
                                            <li><a href="#">Upper East Side</a>
                                            </li>
                                            <li><a href="#">Lower West Side</a>
                                            </li>
                                            <li><a href="#">Wallstreet</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                         <h3>Not Near You</h3>

                        <ul>
                            <li><a href="#">chicago</a>
                            </li>
                            <li><a href="#">philadelphia</a>
                            </li>
                            <li><a href="#">san francisco</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>

组件 CSS:

@charset"utf-8";

/* CSS Document */
 .main_nav {
    width:56%;
    text-align:center;
    float:left;
    display:inline-block;
}
.nav {
    list-style:none;
    height:43px;
    white-space:nowrap;
    margin: 0px auto 10px auto;
    min-width:775px;
    text-align:left;
}
.nav h3 {
    font-size:14px;
    margin:7px 0 14px 4px;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
.nav h4 {
    font-size:12px;
    margin:7px 0 14px 4px;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
.nav > li {
    border:none;
    text-transform:uppercase;
    float:left;
    position:relative;
    margin:5px 3px 5px 2px;
    padding:auto;
}
.nav li {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #333333;
    outline:0;
    text-decoration:none;
    padding-left:10px;
}
.nav li:hover > a, .nav li:hover > p {
    color:#cccc66;
}
.nav li .drop {
    padding-right:15px;
    background:url("drop-nonsel.png") no-repeat right 4px;
}
.nav li:hover .drop, .nav li .drop:hover {
    background:url("drop-sel.png") no-repeat right 4px;
}
.nav .subnav {
    float:left;
    position:absolute;
    text-align:left;
    padding:5px;
    margin: 5px 5px 5px 0;
    border:1px solid #CCC;
    border-top:none;
    white-space:nowrap;
    /* Gradient background */
    background:#FFFFFF;
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    opacity:0;
    transition:visibility 0s linear 0.2s, opacity 0.2s linear;
    visibility:hidden;
}
.nav .submenu:hover .subnav, .nav li .subnav:hover {
    top:auto;
    opacity:1;
    visibility:visible;
}
.nav .subnav > ul {
    padding:2px;
    margin:0 0 12px 0;
}
.nav .subnav > li {
    list-style:none;
    border-bottom:thin;
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
}
.nav .subnav > li:last-chid {
    border-bottom:none;
}
.deriv li .dropr {
    padding-right:10px;
    background:url("drop-right-nonsel.png") no-repeat right 6px;
}
.deriv li:hover .dropr, .deriv li .dropr:hover {
    background:url("drop-right-sel.png") no-repeat right 6px;
}
.subnav .derivnav {
    float:right;
    position:absolute;
    text-align:left;
    right:-150px;
    padding:5px;
    margin: 5px 5px 5px 0;
    border:1px solid #CCC;
    border-left:none;
    white-space:nowrap;
    /* Gradient background */
    background:#FFFFFF;
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    opacity:0;
    transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    visibility:hidden;
}
.subnav .derivnav > li {
    list-style:none;
    border-bottom:thin;
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
}
.subnav li .deriv:hover .derivnav, .subnav li .derivnav:hover {
    top:auto;
    opacity:1;
    visibility:visible;
}
.derivnav ul {
    padding:2px;
    margin:0 0 12px 0;
}
.derivnav li {
    list-style:none;
    border-bottom:thin;
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
}

我已经玩了几天了，似乎无法弄清楚。我的 CSS3 验证了，我的 html 代码也验证了。有什么想法吗？

谢谢! 乔恩

Answer 1

当我从这两行中删除 > 标记时，它对我有用:

旧版本

.nav .subnav > li {

.nav .subnav > li:last-chid {

新版本

.nav .subnav li {

.nav .subnav li:last-child {

CSS 选择器中的 > 意味着所选元素必须是前一个元素的直接子元素，而不仅仅是最近的后代元素。在您的标记中，.subnav 是一个 div，而不是 ul。 li 元素之前根本没有被选中，因此您的样式从未被应用。

如果您需要 .subnav 列表样式与 .deriv 样式完全分开，您可以像这样使用 > 运算符:

备用

.nav .subnav > ul > li {

My fork of the DEMO