Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely solve this, but I require it to remain relative for location purposes. Any guidance would be greatly appreciated.
CodePen
HTML:
<div id='navbar'>
<ul class='navmen'>
<a href='#' class='link'>
<li class='navitem' id='home'>HOME</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item2'>ITEM2</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item3'>ITEM3</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item4'>ITEM4</li>
</a>
</ul>
</div>
<ul class='navmen'>
<li class='itemam'>
<div class='divmen' id='divred'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divorange'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divblue'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divgreen'></div>
</li>
</ul>
CSS:
.navmen {
display: inline;
position: relative;
left: 230px;
}
.link {
text-decoration: none;
color: black;
display: inline;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline;
padding-left: 80px;
padding-right: 80px;
font-size: 22px;
}
.navitem:hover {
background-color: #CCCCCC;
}
.divmen {
background-color: black;
width: 210px;
height: 10px;
}
#divred {
background-color: red;
position: relative;
bottom: 77px;
left: 40px;
display: none;
}
#divorange {
background-color: orange;
position: relative;
left: 250px;
bottom: 107px;
display: none;
}
#divblue {
background-color: blue;
position: relative;
left: 460px;
bottom: 137px;
display: none;
}
#divgreen {
background-color: green;
position: relative;
bottom: 167px;
left: 670px;
display: none;
}
JavaScript:
$(document).ready(function() {
$('#home').hover(function() {
$('#divred').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item2').hover(function() {
$('#divorange').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item3').hover(function() {
$('#divblue').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item4').hover(function() {
$('#divgreen').fadeToggle('slow')
})
});