I have designed a dropdown menu, but I am facing an issue with the portfolio section. When I hover over the portfolio, the dropdown menu appears correctly. However, when I hover over the text of the first dropdown menu, all sub-dropdown menus from other dropdowns appear in succession.
Another problem arises in the Contact section. If I add a small bottom margin between each dropdown menu and then hover over the Contact text, the dropdown icon displays. But as soon as I move my mouse from the text to the dropdown icon, the dropdown menu disappears.
Below is my complete code:
/* CSS for the menu */
.menu {
text-align: center;
}
.menu ul {
list-style: none;
}
.menu ul li {
display: inline-block;
background: #545454;
color: white;
padding: 15px 55px;
margin-left: -5px;
border-left: 1px solid black;
font-family: 'Balsamiq Sans', cursive;
font-size: 18px;
position: relative;
}
.menu ul li i {
position: relative;
right: 10px;
}
.menu ul li:hover {
background-color: rgb(216, 49, 49);
transition: .8s;
cursor: pointer;
}
/* Dropdown menu styling */
/* Contact section */
.menu ul li .contact {
position: absolute;
left: 38px;
top: 100%;
width: 0px;
display: inline-block;
padding: 0;
}
.menu ul li .contact li {
width: 0px;
display: inline-block;
line-height: 16px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
}
.menu ul li .contact li i {
font-size: 50px;
position: relative;
top: 0px;
right: 25px;
}
.menu ul li .contact li:first-child:hover {
background-color: royalblue;
}
... <!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<link rel="stylesheet" href="./dropdown menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-female"></i>About</li>
<li><i class="fas fa-user-edit"></i>Contact
<ul class="contact">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</li>
<li><i class="fab fa-wordpress-simple"></i>Portfolio
<ul class="portfolio">
<li>Work no 1
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 2
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 3
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 4
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
<li>Work no 5
<ul>
<li>sample 1</li>
<li>sample 2</li>
</ul>
</li>
</ul>
</li>
<li><i class="fas fa-sign-in-alt"></i>Login</li>
</ul>
</div>
</body>
</html>