Question

我有一个ul / li元素的嵌套下拉菜单，当我悬停一个子菜单元素时，我希望背景颜色在内部li元素的边界之外伸展（比父元素宽或宽）使它看起来像一个＆＃34;整行＆＃34;被选中。

我正在使用bootstrap和一些自定义。我已经在下面包含了相关CSS的部分内容（并非所有格式都包含在内 - 如果需要可以提供更多格式），但我想你会得到它的主旨。

This is how the menu item looks now when hovered

这是否可以轻松实现？

HTML：

<header id="header" class="container header">
<div class="row">
    <div class="col-xs-12">
        <nav class="navbar navbar-default header-holder">
            <ul class="nav navbar-nav">
                <li>
                    <a accesskey="2" href="#">Kvoter og Fangst</a>
                    <div class="drop-holder">
                        <ul class="list-unstyled drop">
                            <li>
                                Fangst
                                <ul class="list-unstyled drop2">
                                    <li>
                                        <a href="#">Innmeldingsjournal</a>
                                    </li>
                                    <li>
                                        <a href="#">Dagens auksjoner</a>
                                    </li>
                                    <li>
                                        <a href="#">Valuta</a>
                                    </li>
                                    <li>
                                        <a href="#">Kart</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                Kvote
                                <ul class="list-unstyled drop2">
                                    <li>
                                        <a href="#">Kvotestatistikk</a>
                                    </li>
                                    <li>
                                        <a href="#">Fart&#248;ykvoter</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                Statistikk
                                <ul class="list-unstyled drop2">
                                    <li>
                                        <a href="#">Kvote</a>
                                    </li>
                                    <li>
                                        <a href="#">Omsetning</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</div>

相关CSS代码的部分片段：

li {
     list-style: none;
}

.header-holder {
    background-color: lightblue;
    width: 300px;
}

.header-holder .nav li {
    text-align: left;
}

.header-holder .nav li.hover .drop-holder, .header-holder .nav li:hover .drop-holder {
    max-height: 9999px;
}

.header-holder .nav li.hover .drop-holder .drop, .header-holder .nav li:hover .drop-holder .drop {
    transform: translateY(0);
}

.header-holder .nav li.hover > a, .header-holder .nav li:hover > a {
    color: #fff;
    background: #0559a2;
}

.header-holder .nav .drop li a:hover {
    background: none;
}

.header-holder .nav .drop .drop2 {
    font-weight: 400;
    padding: 5px 10px 9px;
}

.header-holder .nav .drop .drop2 li {
    margin: 0 0 5px 1px;
}

.header-holder .nav .drop .drop2 li a {
    padding: 0;
    color: #0559a2;
    background: none;
    white-space: nowrap;
    display: block;
}

.header-holder .nav .drop .drop2 li a:focus, .header-holder .nav .drop .drop2 li a:hover {
    background: none;
    color: #434343;
    width: 100% !important;
}

.header-holder .nav .drop .drop2 li:hover {
    background-color: #edf3f8;
    opacity: 0.9;
}

.header-holder .drop-holder {
    width: 250px;
    overflow: hidden;
    max-height: 0;
    transition: all .25s linear;
}

Answer 1

请参阅下面的代码段。

稍微更改了颜色，仅供参考

不要在padding上使用ul.drop2，而是通过向其添加填充来缩进li。所以它将具有整个ul.drop2

的宽度

让我知道这是否是您正在寻找的

＆＃13;

 .drop-holder {
        width: 250px;
    }           

     .nav .drop .drop2 li a {
        padding: 0;
        color: #0559a2;
        background: none;
        white-space: nowrap;
        display: block;
    }

   .nav .drop .drop2 li:hover {
        background-color: blue;
        opacity: 0.9;
    }
     .nav li { list-style:none}
       .nav ,  .nav  ul { padding:0;}
.nav  ul.drop2 li { padding:0 10px; }      
.drop-holder { border:2px solid red;}

＆＃13;

<ul class="nav navbar-nav">
<li>
    <a accesskey="2" href="#">Kvoter og Fangst</a>
    <div class="drop-holder">
        <ul class="list-unstyled drop">
            <li>
                Fangst
                <ul class="list-unstyled drop2">
                    <li>
                        <a href="#">Innmeldingsjournal</a>
                    </li>
                    <li>
                        <a href="#">Dagens auksjoner</a>
                    </li>
                    <li>
                        <a href="#">Valuta</a>
                    </li>
                    <li>
                        <a href="#">Kart</a>
                    </li>
                </ul>
            </li>
            <li>
                Kvote
                <ul class="list-unstyled drop2">
                    <li>
                        <a href="#">Kvotestatistikk</a>
                    </li>
                    <li>
                        <a href="#">Fart&#248;ykvoter</a>
                    </li>
                </ul>
            </li>
            <li>
                Statistikk
                <ul class="list-unstyled drop2">
                    <li>
                        <a href="#">Kvote</a>
                    </li>
                    <li>
                        <a href="#">Omsetning</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</li>
</ul>

＆＃13;

Answer 2

您无法通过CSS访问任何父元素，但您可以使用：before或：after来伪装它以超出所选元素本身。或者，您可以通过在悬停时更改它的填充来使孩子伸展 - 下面粘贴的代码。

＆＃13;

=IF(A1>0, 100, 50)

＆＃13;

Answer 3

使用下面提到的CSS

删除width

.drop-holder {
        width: 250px;
    }

添加以下提到的CSS

.drop > li{
padding:0 30px;
}
.drop ul{
margin:0 -30px;
}
.drop ul li{
padding:0 40px;
}

设置＆＃34;整行＆＃34;的背景颜色在悬停

3 个答案:

设置＆＃34;整行＆＃34;的背景​​颜色在悬停

3 个答案:

设置＆＃34;整行＆＃34;的背景颜色在悬停