Question

我有一个带有悬停效果的CSS下拉菜单。 a元素没有占据li的整个宽度，我希望它使用li的整个宽度。任何人都知道我可以做什么来占据悬停的整个宽度？ Codepen链接如下： https://codepen.io/darenjm/pen/VWdjWb?editors=1100

<header>
<nav class="clearfix">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Customers</a>
        <ul>
            <li><a href="#">Our Markets</a></li>
            <li><a href="#">Questionaire</a></li>
        </ul>
    </li>
    <li><a href="">Employment</a>
        <ul>
            <li><a href="#">Work With Us</a></li>
            <li><a href="#">Open Positions</a></li>
            <li><a href="#">Apply</a></li>
        </ul>
    </li>
    <li><a href="#">Advantage</a></li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Colombian Railways History</a></li>
            <li><a href="#">Company History</a></li>
            <li><a href="#">Partners</a></li>
            <li><a href="#">Strategic Partners</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<div class="box">

</div>




body{
margin:0;
padding:0;
}

header{
background:#001d45;
width:100%;
}

nav{
background:#001d45;
width:85%;
margin:0 auto;
font-family: helvetica;
font-size: 80%;
}
nav ul{
display: flex;
justify-content:space-between;
padding:0;
margin:0;
transition:all .3s ease-in-out;
}
nav ul li{
list-style:none;
flex:1 1 0%;

}
nav ul li > ul{
background:#af2922;
flex-direction: column;

}
nav ul li > ul > li:hover a{
background:#cc534d;
}
nav ul li a{
display:inline-block;
color:#fff;
text-decoration:none;
padding:10px 20px;
}
nav ul li:hover > a{
background:#af2922;
}
nav > ul ul{
position:absolute;
visibility:hidden;
opacity:0;
}
nav ul li:hover > ul{
visibility:visible;
opacity:1;
}

nav > ul > li{
float:left;
}
.clearfix:after{
display:block;
content:"";
clear:both;
}
.box{
background:#d1d3d3;
height:100px;
}

Answer 1

下拉position:relative;上的父li和width:100%上的

ul。

https://codepen.io/anon/pen/pwKRox?editors=1100

下拉菜单悬停效果

1 个答案: