Css 在单独的图层上悬停并显示额外的链接？

在前面的一个问题中，我解决了需要一个显示额外链接的LI悬停的问题http://stackoverflow.com/questions/8364110/css-or-javascript-href-hover-or-mouseover-showing-additional-clickable-links.

现在，我正试图解决将UL和LI封装在一个窄DIV中的问题。目前，当隐藏链接显示时，它们将封装到下一行。我希望它们根据需要溢出，以允许链接出现在同一行上，而不改变包装的宽度。换句话说，我希望它使用类似z索引的东西悬停，将悬停线表示为一个单独的层。这在CSS中是可能的吗

这是一把小提琴：

虽然fiddle I使用空格：nowrap和overflow:visible作为一个快速而肮脏的解决方案，但我相信这更像是您的想法：

---

它使用位于每个列表项之外的链接的绝对定位div。

我更改了您的标记，使其更易于使用：

<div id="box1">
<ul>
    <li><a href="#">Link1</a>
        <ul>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
        </ul>      
    </li>
</ul>
</div>

我正在使用一些旧浏览器不支持的选择器，但是您可以通过类实现相同的概念

---

这样地？还是这个？嗨，jblasco：事实上，您的第一个解决方案更像我的想法。我已经调整了链接文本的长度以进行说明。我希望链接显示在文本旁边。这里快速而肮脏的解决方案的唯一问题是，落在包装器外面的图标没有超链接。这是最新的小提琴。有没有办法让这些链接真正超链接？这个解决方案非常接近。jblasco：第二种解决方案看起来很适合长度一致的链接文本，但由于宽度不同，它并没有像我预期的那个样工作。这是我最新的小提琴。这是一种非常酷的技术，但我希望链接出现在链接文本旁边，而不是像中那样出现在链接文本上方。不过，我将来会提到这种技术。非常感谢。

<div id="box1">
<ul>
    <li><a href="#">Link1</a>
        <ul>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
        </ul>      
    </li>
</ul>
</div>

#box1 {width:60px; background-color:yellow;}
#box1 ul > li {position:relative;}
#box1 ul li ul{display:none; background:yellow;}
#box1 ul ul li {display:inline;}
#box1 ul > li:hover ul{display:block; background:red; position:absolute; top:0; left:0;}