css - 跨越 ul 的宽度跨越 li 元素的填充

Question

我在水平导航栏上有一个下 zipper 接，如下所示:

<ul>
    <li></li>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

第一个ul是相对定位，第二个ul是绝对定位。第二个ul有一个类，我通过它设置了一个百分比宽度(大约200%到250%，我不记得了)。但是，其中的 li 元素具有与设置的内边距一样大的翻转背景。我想要做的是让填充跨越 ul 的整个宽度，这样当用户滚动链接时，整行都会突出显示。

目前我没有任何示例代码。也许在几个小时后我会对其进行编辑。希望以上内容足以让一些想法滚动。

Answer 1

按照您的示例和您提供的文本，我构建了这个: fiddle .

这与您所追求的接近吗？如您所见，第二里的黄色突出显示了全长:

so that when the user rolls over the link, the entire row gets highlighted.

如果没有，也许您可​​以在 jsfiddle 中填写详细信息并更新它以帮助我们解决问题。

这是代码。主要技巧是将显示设置为在悬停时阻塞:

HTML:

<ul id='firstUl'>
    <li>1</li>
    <li>2</li>
    <li>3
        <ul id='secondUl'>
            <li><a>3</a></li>
            <li><a>4</a></li>
            <li><a>5</a></li>
        </ul>
    </li>
</ul> 

CSS:

#firstUl
{
   background-color:green; 
   position:relative;
}

#secondUl
{
    width:200%;    
    background-color:blue;
    position:absolute;
}

.li
{
    background-color:red;    
}

#secondUl li
{    
    width:100%
}

#secondUl li:hover a
{
    background-color:yellow;  
    display:block;    
}