HTML: <div class="nav-center"> <ul> <li><a href="###">AAA</a> <div class="nav_son"> <ul class="ul_son"> <li><a href="###">111</a></li> <li><a href="###">222</a></li> <li><a href="###">333</a></li> <li><a href="###">444</a></li> <li><a href="###">555</a></li> </ul> </div> </li> <li><a href="###">BBB</a> <div class="nav_son"> <ul class="ul_son"> <li><a href="###">111</a></li> <li><a href="###">222</a></li> <li><a href="###">333</a></li> <li><a href="###">444</a></li> <li><a href="###">555</a></li> </ul> </div> </li> <li><a href="###">CCC</a> <div class="nav_son"> <ul class="ul_son"> <li><a href="###">111</a></li> <li><a href="###">222</a></li> <li><a href="###">333</a></li> <li><a href="###">444</a></li> <li><a href="###">555</a></li> </ul> </div> </li> <li><a href="###">DDD</a> <div class="nav_son"> <ul class="ul_son"> <li><a href="###">111</a></li> <li><a href="###">222</a></li> <li><a href="###">333</a></li> <li><a href="###">444</a></li> <li><a href="###">555</a></li> </ul> </div> </li> <li class="end_li"><a href="###">EEE</a> <div class="nav_son"> <ul class="ul_son"> <li><a href="###">111</a></li> <li><a href="###">222</a></li> <li><a href="###">333</a></li> <li><a href="###">444</a></li> <li><a href="###">555</a></li> </ul> </div> </li> </ul> </div> CSS: *{ margin:0; padding:0; } .nav-center{ margin-top: 30px; margin-left: 250px; } .nav-center ul{ list-style-type:none;/*清除项目符号*/ } .nav-center ul li{ text-align: center;/*文字居中对齐*/ width: 115px;/*宽度*/ height: 17px;/*高度*/ border-right:1px solid #d8d8d8;/*右边框*/ float: left;/*左浮动*/ line-height: 17px;/*行高*/ position: relative;/*相对定位*/ } .nav-center ul li a{ text-decoration: none;/*清除下划线*/ font-size: 14px;/*字体样式*/ color: #646464;/*字体颜色*/ } .nav-center ul li a:hover{ color:#0b7bc9; } .nav-center ul li a:hover + .nav_son > .ul_son{ visibility: visible;/*关键的一步 visibility属性规定元素是否可见,可选值:visible可见,默认; hidden不可见; collapse这个我知道如何详细说明,但它的特点是不占位,和display:none占位不同。*/ left: -100px;/*触发后向左平移100px*/ } .nav-center .end_li{ border:none; /*清除边框*/ } .nav-center .nav_son .ul_son{ transition-duration:0.5s;/*过渡所需时间*/ visibility: hidden;/*元素不可见*/ margin:0; width: 400px; height: 20px; background:blue;/*背景颜色*/ border-radius: 15px;/*圆角*/ position: absolute;/*绝对定位*/ left:0px; top:20px; } .nav-center .nav_son .ul_son:hover{ visibility: visible;/*元素可见*/ left: -100px;/*这里与上面(.nav-center ul li a:hover + .nav_son > .ul_son)对应,目的是控制元素的位置*/ } .nav-center .nav_son .ul_son li{ width: 70px; height: 20px; line-height: 20px; border: none; float: left; margin-left:8px; } .nav-center .nav_son .ul_son li a{ color:white; text-align:center; } .nav-center .nav_son .ul_son li a:hover{ color:red; }
效果见下期、、、
时间: 2024-10-13 17:40:31