gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:41:57 25 4
gpt4 key购买 nike

我一直在玩 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 代码也验证了。有什么想法吗?

谢谢!乔恩

最佳答案

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

旧版本

.nav .subnav > li {

.nav .subnav > li:last-chid {

新版本

.nav .subnav li {

.nav .subnav li:last-child {

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

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

备用

.nav .subnav > ul > li {

My fork of the DEMO

关于html - CSS3 导航子菜单没有继承它的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24758687/

25 4 0