* {
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;
. Как можно решить эту проблему?
border
, но прозрачный. При наведение меняйте толькоborder-color