【怎么使导航悬停2个字变成4个字的同时下边框出现在底部 】 | IT修真院·坑乎
怎么使导航悬停2个字变成4个字的同时下边框出现在底部
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
详细描述
截图
代码
编辑于2024-11-24
  • [北京|]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