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

我添加DEMO

.nav li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #333333;
    outline:0;
    text-decoration:none;
    padding-left:10px;
}

Answer 2

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

旧版

.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

CSS3 Navigation子菜单不继承其类

2 个答案:

旧版

新版本

交替