I am making a dropdown type menu for my application. The thing is, when hovering over the dropdown icon, I can only hover the first two items. After that, the dropdown menu closes. How could I fix it?
User page code:
/* Vars file import */
:root {
--header-bg-color: #272d2d;
--formBtn-bg-color: #4CAF50;
--formRegister-bg-color: #4F7CAC;
--navBar-links-color: #f2f2f2;
}
/*************************** GLOBAL STYLES ***************************/
body {
height: 100%;
}
/*************************** GLOBAL STYLES ***************************/
/************************** NAVIGATION BAR **************************/
/* Navbar container */
.navbar {
overflow: hidden;
position: fixed;
/* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
left: 0;
width: 100%;
/* Full width */
height: 80px;
background-color: #272d2d;
}
/* Links inside the navbar */
.navbar a {
float: right;
font-size: 16px;
color: white;
text-align: center;
height: auto;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
/* Add an effect to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
opacity: 0.5;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdownMenuIcon,
.logoutMenuIcon,
.homeIcon {
width: 45px;
height: auto;
}
.dropdownMenuIcon:hover {
background: url('../resources/icons/menu-black.png');
}
.logoutMenuIcon:hover {
background: url('../resources/icons/logout-black.png');
}
.homeIcon:hover {
background: url('../resources/icons/home-black.png');
}
/************************** NAVIGATION BAR **************************/
/************************** BODY CONTENT ***************************/
.bodyContainer {
width: 100%;
height: 60%;
left: 0;
margin-top: 8%;
position: absolute;
}
.formTitle {
text-align: center;
}
.formContainer {
width: 25%;
height: auto;
margin-left: auto;
margin-right: auto;
}
/* Full-width inputs */
input[type=email],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: var(--formBtn-bg-color);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 50%;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
.labelText {
font-weight: bold;
}
#btnLogin {
float: right;
width: 50%;
}
#error {
color: red;
font-size: 1.2em;
text-align: center;
}
/************************** BODY CONTENT ***************************/
/* TODO mover esto a otro archivo?? */
#userGreet {
text-align: center;
}
.hiddenContent {
display: inline-block;
color: red;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- CSS imports -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/main.css" />
<!-- JQuery include -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- <script type="text/javascript" src="js/loginForm.js"></script> -->
<meta charset="utf-8">
<title>User panel</title>
</head>
<body>
<!-- Navigation Bar content -->
<div class="navbar">
<div class="dropdown">
<button class="dropbtn"><img src="https://placehold.it/45x45/" alt="Menu Icon" class="dropdownMenuIcon"></button>
<div class="dropdown-content">
<a href="#">Create a new user</a>
<a href="#">Edit user</a>
<a href="#">Link 3</a>
<a href="#">Edit user</a>
<a href="#">Link 3</a>
<a href="#">Edit user</a>
<a href="#">Link 3</a>
</div>
</div>
<a class="navBarElement" href="../index.php?logOut=true"><img class="logoutMenuIcon" src="../resources/icons/logout.png" alt=""></a>
</div>
<!-- Body content -->
<div class="bodyContainer">
<div id='userGreet'>
<h3>Welcome, Nombre Apellido</h3>
</div>
</div>
</body>
</html>
I just found the solution.
The body container had a position:absolute, which made the navigation menu items unable to be selected correctly.
The class
bodyContainer
effectively has an absolute that you cannot access the menu correctly, changing it as you yourself have seenposition: relative
solutions to this problem. But I think, if you allow me the note, that also since your menu isfixed
you can add onez-index
that positions it in front of the rest of the element of the page, since I suppose that the intention is that it is always accessible to the user and therefore it must be shown always in the foreground. With this you would not really have to change theposition: absolute
delbodyContainer
:I hope I could have been of help to you. All the best