Html CSS3导航子菜单未继承其类

我一直在玩CSS3，试图真正理解它，但我无法使子菜单导航的行为正确。请参阅以获取一个工作示例。子菜单上仍然有项目符号，并且没有弹出到右侧。这是动态菜单的一部分，其宽度将根据显示的办公室（基于用户配置文件）而变化。我不希望为div位置设置top/right/left/bottom。我也不明白为什么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>

我已经玩了几天了，似乎还没弄明白。我的CSS3进行验证，我的html代码也进行验证。有什么想法吗

谢谢！ 乔恩

我加上

---

当我从这两行中删除

标记时，它对我起到了作用：

旧版本 新版本 CSS选择器中的

意味着所选元素必须是前一个元素的直接子元素，而不仅仅是最近的子元素。在标记中，

.subnav

是

div

，而不是

ul

。以前没有选择

li

元素，因此您的样式从未应用过

如果需要将

.subnav

列表样式与

.deriv

样式完全分开，可以使用

操作符，如下所示：

候补

---

次要细节首先，如果您将

li{list style type:none；}

添加到CSS like中，要点就会消失。我试过了，效果很好，但是当我查看类继承时，子菜单derivnav没有被继承，这就是问题所在！谢谢你迈出了第一步！你能为你想要完成的结果制作一个小图像吗>第三个子菜单显示在右边，因此使用该演示-子菜单（第三级）不会出现在div的右边。这是我删除右位置限定符时发生的一个示例。有没有办法让它显示在右边？这里：，我删除了

float:right

，并调整了

right

属性以将其向后滑动。我不知道这是否是添加多个菜单项的正确解决方案。我还删除了

.subnav

上的右上角舍入和

.deriv

上的左下角舍入。谢谢！这是非常有帮助的！

@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;
}

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

.nav .subnav > li {

.nav .subnav > li:last-chid {

.nav .subnav li {

.nav .subnav li:last-child {

.nav .subnav > ul > li {