试图创建CSS导航和有问题的子元素

我想创建一个左侧的导航，并让它接近我需要的地方除了一个问题。请看Fiddle的例子。试图创建CSS导航和有问题的子元素

当鼠标悬停在“链接”项上时，单元格会改变颜色。但是，当它悬停在辅助项目上时，外部父母李也会改变颜色。我意识到这是因为外部李还有一类“链接”，但如果我把这个类关闭，那么背景是不正确的。

基本上，我希望子元素在整个容器中将边框拉伸到边框。也许ul列表不适合我想要实现的目标吗？

感谢任何帮助。

HTML

<div class="nav"> 
    <ul> 
     <li class="link active">Home</li> 
     <li class="link">Profile</li> 
     <li class="navhead">Messages</li> 
     <li class="link"> 
      <ul> 
       <li class="link">Open</li> 
       <li class="link">Closed Closed Closed Closed</li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

ul { 
    -webkit-padding-start: 0; 
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
} 
.nav { 
    font-family:Verdana; 
    font-size:12px; 
    width:200px; 
} 
.nav { 
    background-color: #F3E0A3; 
    cursor: default; 
    border: 1px solid #d2b48c; 
    border-collapse:collapse; 
} 
.nav li.navhead { 
    background-color: #F3E0A3; 
    border: 1px solid #d2b48c; 
    border-collapse:collapse; 
} 
.nav ul { 
    list-style-image: none; 
    list-style-position: outside; 
    list-style: none; 
} 
.nav li { 
    margin: 0; 
    padding: 0; 
    padding-left: 10px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.nav li .active { 
} 
.nav li.link { 
    background-color: #ECE9D8; 
} 
.nav li.link:hover { 
    cursor: pointer; 
    background-color: #e1dfd2; 
} 
.nav ul li ul { 
    padding-left: 10px; 
}

来源

2013-03-21 John Livermore

'-webkit-padding-start' ???什么是'保证金：0;填充：0;'为 – 2013-03-21 17:14:21

如果你把borde你看到为什么http://jsfiddle.net/btevfik/LZqud/5/ – btevfik 2013-03-21 17:14:38

在这里你去http://jsfiddle.net/btevfik/LZqud/6/ – btevfik 2013-03-21 17:21:33

http://jsfiddle.net/LZqud/7/

HTML：

<li class="link link-with-sub"> 
     <ul class="sub"> 
      <li class="sublink">Open</li> 
      <li class="sublink">Closed Closed Closed Closed</li> 
     </ul> 
    </li>

CSS：

.nav li.link { 
    background-color: #ECE9D8; 
} 
.nav ul li ul.sub { 
    margin-left: -10px; 
    padding-left:0; 
} 
.nav ul li ul.sub li { 
    padding-left: 20px; 
} 
.nav li.link:hover, .nav ul.sub li.sublink:hover { 
    cursor: pointer; 
    background-color: #e1dfd2; 
} 
.nav li.link, .nav li.link-with-sub:hover { 
    background-color: #ECE9D8; 
}

来源

2013-03-21 17:28:47

改变一个封装内一个链接类。所以它在盘旋时不会改变背景。

http://jsfiddle.net/btevfik/LZqud/6/

<li class="innerlink"> 
     <ul> 
      <li class="link">Open</li> 
      <li class="link">Closed Closed Closed Closed</li> 
     </ul> 
    </li>

CSS

.nav li.innerlink { 
background-color: #ECE9D8; 
}

来源

2013-03-21 17:22:46 btevfik

谢谢。这很接近，但我希望“开放”的悬停效果与“主页”的悬停效果相同。这是悬停延伸边界跨越最外面的父母边界。如何修改它以使其以这种方式工作？ – 2013-03-21 17:25:03

就这样简单，更换CSS的最后一个块，如下图所示，

来源：

.nav ul li ul { 
    padding-left: 10px; 
}

要：

.nav ul li ul li{ 
    margin-left: -10px; 
    padding-left: 20px; 
}

希望这是你需要的..

来源

2013-03-21 17:34:59

试图创建CSS导航和有问题的子元素

回答

相关问题