Why is my dropdown list extending beyond the window?
Despite trying to change the position of the dropdown list elements to fixed and top:0px, I am still facing this issue!
I am unable to figure out why the list is going off the page. Your help in solving this problem would be greatly appreciated.
Please assist me with a solution.
$(document).ready(function(){
$('.menu').children().mouseenter(function(){
$('.menu').children(this).find('div').fadeIn(500);
})
$('.menu').children().mouseleave(function(){
$('.menu').children(this).find('div').fadeOut(500);
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="element">
Smaller
<div>Paragraph 1</div>
<div>Paragraph 1</div>
<div>Paragraph 1</div>
<div>Paragraph 1</div>
</div>
</div>
<script src='jquery-3.4.1.min.js'></script>
<script src='jquery.js'></script>$(document).ready(function(){
$('.menu').children().mouseenter(function(){
$('.menu').children(this).find('div').fadeIn(500);
})
$('.menu').children().mouseleave(function(){
$('.menu').children(this).find('div').fadeOut(500);
})
}).menu
{
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid black;
background-color: #08298A;
color: white;
height: 50px;
max-height: 50px;
}
.element
{
background-color: #0A0A2A;
top: 0px;
padding: 0px;
margin: 0px;
}
.element div
{
display: none;
padding: 10px;
background-color: #045FB4;
border: 1px solid white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="element">
Smaller
<div>Paragraph 1</div>
<div>Paragraph 1</div>
<div>Paragraph 1</div>
<div>Paragraph 1</div>
</div>
</div><div class="menu">
<div class="element">
Smaller
<div>Paragraph 1</div>
<div>Paragraph 1</div>
<div>Paragraph 1</div>
<div>Paragraph 1</div>
</div>
</div>
$(document).ready(function(){
$('.menu').children().mouseenter(function(){
$('.menu').children(this).find('div').fadeIn(500);
})
$('.menu').children().mouseleave(function(){
$('.menu').children(this).find('div').fadeOut(500);
})
})