效果
HTML部分代码
<li><a href="">产品中心</a><div class="mask"> <p><a href="">流体设备</a></p> <p><a href="">微孔滤膜</a></p> <p><a href="">滤芯</a></p> <p><a href="">滤袋</a></p> <div id="delta"></div> </div></li>
css部分代码
#nav { width: 100%; height: 40px; /* background: #000; */ } #nav > ul { width: 1200px; height: 100%; margin: 0 auto; /* background: lightsalmon */ } #nav li { float: left; width: 130px; height: 100%; margin-right: 1px; text-align: center; font-size: 16px; } #nav li:nth-child(3) .mask { width: 130px; height: 172px; background: #ababab; margin-top: 10px; display: none; z-index: 2; } #nav li:nth-child(3):hover .mask #delta{ padding: 0; margin: 0; display: inline-block; width: 0; height: 0; border: 7px solid; border-color: transparent transparent #ababab transparent; left: 0; position: relative; top: -187px; } #nav li:nth-child(4):hover .mask #delta{ padding: 0; margin: 0; display: inline-block; width: 0; height: 0; border: 7px solid; border-color: transparent transparent #ababab transparent; left: 0; position: relative; top: -273px; } #nav li:nth-child(3):hover .mask { display: block; } #nav li:nth-child(3) .mask p{ line-height: 43px; height: 43px; text-decoration: none; /* background: #4b4b4b; */ } #nav li:nth-child(3) .mask p:hover{ background: #4b4b4b; } #nav li:nth-child(3) .mask p:nth-child(1):hover~#delta{ border-color: transparent transparent #4b4b4b transparent; } #nav li:nth-child(3) .mask a{ color: #fff; text-decoration: none; }