怎么使导航悬停2个字变成4个字的同时下边框出现在底部
我也踩过这个坑( 1 )
详细描述
截图
代码
编辑于2024-11-18
-
[北京|]JS-0
出现这个问题是因为子级承载太多属性,把一些属性给父级即可,还有ul的高度和导航栏高度不一致
HTML
<ul class="navbar-nav ml-auto"><li class="nav-item active nav-link-width"><a class="nav-link font-size-18 nav-link-size" href="#">首页机缘</a></li><li class="nav-item nav-link-width"><a class="nav-link active font-size-18 nav-link-size" href="#">职业咨询</a></li><li class="nav-item nav-link-width "><a class="nav-link active font-size-18 nav-link-size" href="#">合作企业</a></li><li class="nav-item nav-link-width nav-link-reight"><a class="nav-link active font-size-18 nav-link-size " href="#">关于修真</a></li>css
.nav-link-size{height: 21px;line-height: 21px;overflow: hidden;padding: 0 !important;}.nav-link-width {width: 37px;height: 100px;padding: 0 !important;margin-left: 80px !important;display: flex;align-items: center;justify-content: center;}.nav-height {height: 100px;}.nav-link-width:hover{width: 72px;border-bottom: 4px solid #fff;padding-top: 7px !important;margin-right:-15px ;margin-left: 60px !important;}.nav-link-reight{}.nav-link-reight:hover{margin-left: 45px !important;margin-right:0px ;}编辑于2019-06-29
- 去第 页