I have a site where I fetch a list of jobs from MYSQL and display them on the page. At the end of the row for each job I have a button that has a drop down menu, unique to the user. All this works fine, but if the lines of jobs get near the bottom of the page, the drop down menu goes off the screen and I cannot scroll up to see it. I need to make the position of the drop down menu change automatically depending on its position on the page.
Can this be done in CSS or must I now go and learn javascript?
You feedback will be most appreciated! Thank you.
I am using W3Schools drop down menu script and it works perfectly well (thank you!)
<div class="dropdown">
<button class="dropbtn">Options</button>
<div class="dropdown-content">
Menu items go here
</div>
</div>
This is the CSS (from W3)
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: fixed;
top: 1;
/*right:50px;*/
background-color: #f9f9f9;
min-width: 220px;
overflow: auto;
/* box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); */
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
padding: 2px 2px;
text-decoration: none;
display: block;
}
/* specify colour of headings as opposed to line items */
.dropdown-content span {
background-color: #0000C1;
color:#FFFFFF;
font-weight:bold;
padding: 2px 2px;
text-align:center;
text-decoration: none;
display: block;
}
