0

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
}

body {
    font-family: TruenoRegular;
    background: #fff;



}

a {
    text-decoration: none;
    white-space: nowrap;
}

ul {
    list-style: none;
}

header {
    width: 100%;

}

.fix {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}

nav {





    background: #472424;

    width: 100%;

}



.rel {
    display: block;
    height: 100%;
    width: 100%;
}

.con {

    display: block;
    width: 80%;
    margin: 0 auto;
    border: 1px solid red;



}

.menu {

    display: flex;
    width: 100%;
    justify-content: space-between;

}

.menu a {
    display: block;

    padding: 20px 0;
    font-size: 15px;
    text-align: left;


}

.menu ul {

    display: flex;
    justify-content: space-between;
}




.menu .right li.li_hov:hover {
    background-color: #ff7373;
}

.left,
.right {
    display: block;

}

.right a {

    padding: 20px 1.2vw;
    text-align: center;
}

.left a {
    padding-right: 2.4vw;
}

.bronze {
    color: #dcc5b8;
}

a.non_st {


    padding-right: 0;
    padding-left: 0;

}

a.border {
    border-right: 2px solid #5a3a3a;
    padding-left: 0.5vw;
}

.icon1_li {
    display: flex;
}

.nav2 {

    width: 100%;
    display: block;
    background: #623232;
}




.menu2 {
    display: flex;
    justify-content: space-between;
}

.logo,
.menu2_p {
    display: block;
}

.menu2 ul {
    display: flex;
    height: 100%;
}

.menu2 a {
    display: block;
    padding: 32px 1.2vw;
    font-size: 17px;
    
}

.menu2 ul li {
    display: block;
    height: 100%;
}

.logo img {
    height: 100%;
    padding-top: 22px;
    padding-bottom: 30px;
}

.menu2 a:hover {
    color: #ff7373;
    border-bottom: 4px solid #ff7373;
}


@media (max-width:1110px) {
    .con {
        width: 100%;
    }
    .menu {
        width: 100%;
        justify-content: center;
    }
    .right {
        display: none;
    }
    .con {

        width: 100%;
    }
    .menu {
        width: 100%;
        justify-content: center;
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://fontlibrary.org/face/trueno" type="text/css" />

</head>

<body>
    <header>
        <div class="fix">
            <nav>
                <div class="con">

                    <div class="menu">
                        <div class="left">
                            <ul>
                                <li><a href="#">Support</a></li>
                                <li><a href="#">Delivery</a></li>
                                <li><a href="#">Legal</a></li>
                                <li><a href="#">About Us</a></li>

                            </ul>
                        </div>
                        <div class="right">

                            <ul>

                                <li class="icon1_li"><a class="non_st" href="#"><img src=".//img/icon1.png" alt=""></a><a href="#" class=" border">$2 <span class="bronze">2 Items</span></a></li>
                                <li class="li_hov"><a href="#">Login</a></li>
                                <li class="li_hov"><a href="#">Register</a></li>
                            </ul>
                        </div>




                    </div>

                </div>
            </nav>


            <section class="nav2">
                <div class="con">
                    <div class="menu2">
                        <div class="logo">
                            <img src=".//img/logo.png" alt="">
                        </div>
                        <div class="menu2_p">
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Men</a></li>
                                <li><a href="#">Women</a></li>
                                <li><a href="#">Children</a></li>
                                <li><a href="#">Baby</a></li>
                                <li><a href="#">Our Brands</a></li>
                                <li><a href="#">Sales</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </header>
    <section class="qwe"></section>
</body>

</html>
При наведении на пункты нижнего меню .nav2 растягивается по высоте. Разве не должен это предотвращать box-sizing: border-box;. Как можно решить эту проблему?

2
  • 2
    Добавьте изначально элементам border, но прозрачный. При наведение меняйте только border-color
    – Deonis
    Commented 21 июл. 2018 в 5:58
  • Гениально...Но я все ровно не понял почему не работает box-sizing.
    – midia
    Commented 21 июл. 2018 в 6:14

1 ответ 1

1

Задайте вашим пунктам значение высоты, тогда box-sizing будет работать. Он будет брать значение высоты и исходя из них делать расчеты для боксовой модели.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.