Question

我在水平导航栏上有一个下拉链接，如下所示：

<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 。

这接近你所追求的吗？如您所见，第二个li中的黄色突出显示全长：

这样当用户滚动链接时，整个行都会突出显示。

如果不是，您可以填写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;    
}

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

1 个答案: