Recently delving into the world of HTML and CSS, I encountered a tricky issue with my menu.
The problem arises when hovering on an element - it should highlight by expanding padding and changing border color. However, for some reason, when I hover on one element, the other four elements shift downward inexplicably.
I've tried adjusting margins, paddings, and positions to troubleshoot this peculiar behavior.
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>If you'd like to take a look at the project files, you can find them here.
There are some comments within the code, and some of them may need correction.