Css, problem with menu items highlighting

Question

I just started learning html and css, and i have a problem with this menu.
When you hover on an element it should higlight it by expanding padding and changing the border color (in the code this is made in a strange way but it because initially it was meant to have a caption written in the "li" ) but when you hover on an element other 4 element go down for some reason.
I already tried to messing around with margin, paddings and position

nav #MotherList{
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-align:center;
}
li.navoptions {                   
    width:103px;
    height:93px;
    padding:0px;
    border-radius:4px;
    margin-left:5px;
    margin-right:5px;
    position:relative;
    top:4px;
    color:black;
    text-align:center;
    background-color:red;
    display:inline-block;

}
.navoptions:hover{
    background-color:white;
    padding:2px;
    position:relative;
    top:2px;
    margin-left: 3px;
    margin-right: 3px;
}
.navoptions div {
    width:100px;
    height:90px;
    border-radius:4px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    top:1.5px;
    background-color:yellow;
    background-size:100px 90px;
    background-repeat: no-repeat;
    text-indent: -999999px;
}
#nav1{
    background-image:url("../images/nav1.png");
}
#nav2{
    background-image:url("../images/nav2.png");
}
#nav3{
    background-image:url("../images/nav3.png");
}
#nav4{
    background-image:url("../images/nav4.png");
}
#nav5{
    background-image:url("../images/nav5.png");
}

<header>
            <ul class="MainList">
                <li class="MainListMember"><a href="">Home</a></li>
                <li class="MainListMember"><a href="">Products</a></li>
                <li class="MainListMember" id="Dave" onclick="window.location.href='td.html'"><a href="td.html">Logo</a></li>  <!-- Broken <a href> -->
                <li class="MainListMember"><a href="">Contacts</a></li>
                <li class="MainListMember"><a href="">Infos</a></li>
            </ul>
        </header>
        <nav>
            <ul id="MotherList">
                <li class="navoptions"><div id="nav1">opt 1</div></li>
                <li class="navoptions"><div id="nav2">opt 2</div></li>
                <li class="navoptions"><div id="nav3">opt 3</div></li>
                <li class="navoptions"><div id="nav4">opt 4</div></li>
                <li class="navoptions"><div id="nav5">opt 5</div></li>
            </ul>
        </nav>

A copy of the project: http://www.mediafire.com/file/blgdejll656uy8y/test_project.rar/file

there are comments in there, some may be wrong

Webdeveloper_Jelle · Answer 1 · 2019-08-28T06:56:16.660

Are you looking for this?
Give me some info and ill update my answer.

.navoptions:hover{
    background-color:white;
     border: 1px solid red;
     padding: 50px;
}
.navoptions  {
    width:100px;
    height:90px;
    float: left;
    border-radius:4px;
    margin-left:5px;
    margin-right:5px;
    position: relative;
    top:1.5px;
   border: 1px solid black;
    background-color:yellow;
    background-size:100px 90px;
    background-repeat: no-repeat;
    text-indent: -999999px;
}
#nav1{
    background-image:url("../images/nav1.png");
}
#nav2{
    background-image:url("../images/nav2.png");
}
#nav3{
    background-image:url("../images/nav3.png");
}
#nav4{
    background-image:url("../images/nav4.png");
}
#nav5{
    background-image:url("../images/nav5.png");
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <header>
    <ul class="MainList">
        <li class="MainListMember"><a href="">Home</a></li>
        <li class="MainListMember"><a href="">Products</a></li>
        <li class="MainListMember" id="Dave" onclick="window.location.href='td.html'"><a href="td.html">Logo</a></li>  <!-- Broken <a href> -->
        <li class="MainListMember"><a href="">Contacts</a></li>
        <li class="MainListMember"><a href="">Infos</a></li>
    </ul>
  </header>
  
        <div id="MotherList">
          <div class="navoptions" id="nav1"></div>
          <div class="navoptions" id="nav2"></div>
           <div class="navoptions" id="nav3"></div>
            <div class="navoptions" id="nav4"></div>
             <div class="navoptions" id="nav5"></div>
        </div>

this works, but what i need is that when you hover on an items it becames bigger, but in my code something makes the other fall down when one of them is bigger — NanoGigante, Aug 27 '19 at 19:02
@NanoGigante what do you mean by bigger? more padding? because when you increase the padding of a button the rest under it will fall down of course (only not when using `position: fixed`) — Webdeveloper_Jelle, Aug 28 '19 at 06:43
apparently the solution of the discussion i duplicated worked, by the way the idea was that when you hover on an element its border (the padding in this case) would became bigger. — NanoGigante, Aug 29 '19 at 15:30

Css, problem with menu items highlighting

1 Answers1