When I resize my browser or view the page on mobile, the drop-down menu becomes misaligned and extends off the screen. I suspect that adjusting the padding levels might resolve the issue, but previous attempts have only caused more problems.
I would appreciate any guidance or assistance with this matter.
https://i.sstatic.net/UkY8L.png https://i.sstatic.net/mTulO.png
[
$('.drop-down').click(function() {
$(this).hide();
});
$('.nav-main li').click(function() {
$('.drop-down').hide();
});
//drop down slide down
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(
function openDrop() {
$('ul', this).stop().slideDown(900);
},
function closeDrop() {
$('ul', this).stop().slideUp(1000);
});
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 100%;
}
/* More CSS styles... */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top"><a href="#welcome">Welcome</a></li>
<li class="nav-top"><a href="#about">About</a>
<ul class="drop-down">
<li class="nav-drop"><a href="#about">Services</a></li>
<li class="nav-drop"><a href="#client">Clients</a></li>
<li class="nav-drop"><a href="#press">Press</a></li>
<li class="nav-drop"><a href="#leadership">Leadership</a></li>
<li class="nav-drop"><a href="#twitter">Follow Us</a></li>
</ul>
</li>
<li class="nav-top"><a href="#contact">Contact</a></li>
</ul>
<span class="nav-arrow"></span>
</nav>]3