html – How do I fix navbar hover effect without breaking the animation?

Long story short: Is it possible to make the hover effect appear inside the animation box without going out of the border? Right now it’s because of the .menu li having a display: flex. Without it, animation breaks. I am pretty sure I’m doing something wrong but I haven’t been able to figure it out. I’m a newbie so any help is appreciated. Code attached. Thanks in advance!

I have this —>>>

Looking to get this without breaking the animation —->>enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <title>Live like legends</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="javakood.js"></script>
</head>
<body>
    <nav class="navbar">
        <input type="checkbox" id="check"> 
        <label for="check" class="menubtn">
            <i class="fas fa-bars"></i>
        </label>
        <div class="logo">
            <img src="./veebipilt.png" width="128" height="56">
        </div>
            <ul class="menu">
                <li><a href="#">Beginning</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">Statistics</a></li>
            </ul>

            <ul class="menu2">
                <li><a class="speciall" href="#">Objectives</a></li> <! -- this is not a class typo, they need to be separated -->
                <li><a class="special" href="#">Contact</a></li>
            </ul>   
    </nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
    <section class="home">      
        <div class="rida">
            <div class="tekstall">
                <h1>Tere tulemast minu lehele!</h1>
                <p>siia tuleb veel midagi lahedat veel ei tea</p>
            </div>
            <div class="piltnext">
                <img src="./12345.jpg" width="500" height="300">
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <section class="about">
        <div class="tekstabout">
            <h1><mark>Veidi</mark> minust</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.navbar{
    background: #cbcca3;
    position: fixed;
    width: 100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul {
    margin-bottom: 0;

}

.home{
    background: url("./sigma.gif") no-repeat center;
    background-size: cover;
    height: 100vh;
}


.logo {
    float: left;
    line-height: 70px;
    margin-left: 30px;
    margin-right: 50px;
}
.menu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    align-items: center;
}

.menu li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    margin-right: 30px;
}

.menu li:after,
.menu li:before {
    content: "";
    position: absolute;
    display: block;
    border: 0px solid transparent;
}

.menu li:after {
    width: 0%;
    height: 80%;
    border-top: 2px solid #8a2be2;
    border-bottom: 2px solid #8a2be2;
    transition: all 0.6s ease;
}

.menu li:before {
    width: 120%;
    height: 0%;
    border-left: 2px solid #8a2be2;
    border-right: 2px solid #8a2be2;
    transition: all 0.5s ease;
}

.menu li:hover::before {
  height: 75%;
}

.menu li:hover::after {
  width: 110%;
}

.menu2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    align-items: center;
}

.menu2 {text-align: right;}

.menu a {
    margin: 0 5px;
    font-size: 20px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
}

.menu2 a {
    margin: 0 5px;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 70px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    letter-spacing: 2px;
}


a.special,a:hover{
    background-color: ghostwhite;
    transition: .5s;
}


p{
    color: floralwhite;
    
}

.menubtn {
    color: blueviolet;
    font-size: 25px;
    float: right;
    display: none;
    cursor: pointer;
}
#check{
    display: none;
}
@media (max-width: 933px){
    .menubtn{
        display: block;
    }
    .menu li, .menu2 li{
        position: fixed;
        width: auto;
        height: auto;
        background: white;
        text-align: center;
        top: 70px;
        left: 0;
    }
}

.rida{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tekstall{
    flex-basis: auto;
    min-width: 300px;
    margin-left: 20px;
    padding-left: 30px;

}

.piltnext{
    max-width: 100%;
    padding: 20px;
    height: auto;
    margin-top: 0px;
}

Leave a Comment