【发布时间】：2010-05-28 15:23:21
【问题描述】：
试图让嵌套链接在嵌套跨度内工作是徒劳的。 This 是下面代码的工作测试页面，用于解释我正在尝试做的事情。
关于如何让这个在有效的 html 中工作的任何想法？我想这要么是嵌套顺序，要么是样式语法，但我不知所措。任何想法都非常感谢。
<div id="greyback">
<ul id="scrollbox">
<li class="listcat">List header</li>
<li><a class="menu" href="#freeze">List item 1<span><b>This text has popped up because you have clicked the list item, which has an "a" tag and now has :focus. That "a" tag is the first of two.</b><br><br>What I am trying to do is to set the second "a" tag as a DIFFERENT "embedded" link in this box<span style="color: blue; background-color: yellow;">eg, here<a href="http://www.conservationenterprises.com" target="blank">This is the second (nested) "a" tag in this html nest. It is a link to an external site. Instead of this being an always-visible link, I want it to sit within the yellow box in the first span (click the List item 1 to display).</a></span>
</a></span>
</li>
</a></span>
</li>
</ul>
</div>
和 CSS：
#scrollbox {margin: 0 auto; margin-top: 1em; margin-bottom: 1em; width:19em; height:auto; max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500;}
#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;}
#scrollbox a.menu {}
#scrollbox a span {display:none; position:absolute; left:0em; top:0;}
#scrollbox a span img {float: right; border:0; max-width:7.5em;}
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;}
#scrollbox a:hover span {border: 0; color: #535353;}
#scrollbox a span:focus {color: blue;}
#scrollbox a:active {border:none; color: #535353; text-decoration: none;}
#scrollbox a:focus {border:0em solid #000; outline:0;}
#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em; z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #c3FFe3; color: #535353; border: solid #FFA500 0.25em;}
#scrollbox li a:active span span, #scrollbox li a:focus span span{display: block; width: auto; height: auto; min-height: 2em; left: 25em; top:10em; z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: transparent; color: #535353; border: dashed red 1px;}
.ul#scrollbox {padding-left: 0.1em;}
#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: 0em; font-family:Arial, sans-serif; font-size: 0.9em;}
#scrollbox li.listcat {float: left; text-align:left; width: 18em; margin-left: 0em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 0.9em; font-weight:bold;}
干杯 帕特里克。
【问题讨论】：
-
为什么不直接使用 javascript 来隐藏/显示多余的框？这样比尝试在 css 中实现所有这些要容易得多（或者您是否打算真的只使用纯 css 来解决这个问题？）
-
@corroded 我只希望使用 CSS，因为如果它咬我我将无法识别 javascript，但如果这就是它所需要的......
-
这里有简单的 javascript 教程，还有一些工具可以帮助你，比如 jquery（如果你有时间，你可以检查一下）我可以尝试在一段时间内为你修复一个简单的示例
标签： html css css-selectors