CSS Dropdown Menu does not stay visible on hover - html

Question

I am a new learner of CSS and I have a problem with the position of dropdown menu, does not stay on hover. I have done some testing and I found that the problem is the position of left element because when I chance the value of left, the dropdown stay on hover and it lets do it but it is not in its position.
I do not know how to fix it, I will appreciate any help of anyone.
/* Grid View*/
* {
box-sizing: border-box;
}
/* Body Size*/
body {
background-color: white;
position: relative;
margin-right: 150px;
margin-left: 150px;
margin-top: 20px;
}
/*Header*/
header {
position: fixed;
top: 0;
margin: 80%;
height: 100px;
background-color: whitesmoke;
color: black;
padding: 10px;
text-align: center;
}
/* Header <Logo> */
logo {
position: fixed;
left: 180px;
top: 0px;
width: 250px;
height: 140px;
}
/* Header < Social Bar>*/
.icon-bar {
width: 100px;
overflow: auto;
}
/* Social Icons */
.icon-bar {
float: right;
width: 30%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
top: 100px;
}
.icon-bar a:hover {
background-color: yellow;
}
/* Header <Menu>*/
.menu-button1 {
position: relative;
left: 300px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button2 {
position: relative;
left: 293px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button3 {
position: relative;
left: 286px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
border-radius: 6px;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 0px;
left: 256px;
margin: 4px 2px;
padding: 4px 28px 4px 28px;
text-align: center;
text-decoration: none;
font-size: 20px;
font-family: Arial;
border-radius: 6px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-menu a {
background-color: #cccc00;
color: #47037A;
text-decoration: none;
display: block;
padding: 4px 28px 4px 28px;
border-radius: 6px;
margin-bottom: 1px;
}
/* Change color of dropdown links on hover */
.dropdown-menu a:hover {
display: block;
background-color: #47037A;
color: #cccc00;
padding: 4px 28px 4px 28px;
border-radius: 6px;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
display: inline-block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .menu-button3 {
background-color: #cccc00;
}
.menu-button4 {
position: relative;
left: 280px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button5 {
position: relative;
left: 273px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button6 {
position: relative;
left: 266px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button7 {
position: relative;
left: 260px;
top: -48px;
background-color: #cccc00;
border: none;
color: #47037A;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button1:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button2:hover {
background-color: #cccc00;
color: #47037A;
}
.dropdown:hover .menu-button3 {
background-color: #cccc00;
color: #47037A;
}
.menu-button4:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button5:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button6:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button7:hover {
background-color: #47037A;
color: #cccc00;
}
.dropdown-content-menu-button3 {
display: none;
position: absolute;
background-color: #47037A;
min-width: 160px;
}
/* Line separate header */
.hr-header {
position: fixed;
top: 218px;
height: 3px;
left: 0px;
right: 0%;
background-color: #47037A;
}
/* Content of Body */
.content {
position: fixed;
overflow: auto;
float: left;
width: 800px;
margin: 0;
padding: 10px;
}
h1 {
color: darkblue;
}
p {
color: navy;
}
#footer {
position: fixed;
left: 0px;
bottom: 0;
height: 150px;
width: 100%;
color: #47037A;
background-color: whitesmoke;
padding: 10px;
font-family: Arial;
}
.footer-contactus {
text-align: left;
}
.footer-copyrights {
text-align: center;
}
.footer-socialm {
text-align: right;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="header">
<div>
<div class="logo">
<img src="images/logo.jpg" alt="logo" />
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
<div>
<button class="menu-button1">Menu1</button>
<button class="menu-button2">Menu2</button>
<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button class="menu-button3">Menu3</button>
<!-- dropdown menu -->
<div class="dropdown-menu">
Item1
Item2
Item3
Item4
Item5
</div>
</div>
<button class="menu-button4">Menu4</button>
<button class="menu-button5">Menu5</button>
<button class="menu-button6">Menu6</button>
<button class="menu-button7">Menu7</button>
</div>
</div>
<div class="hr-header"></div>
</div>
<div class="content">
Body
</div>
<div id="footer">
<div class="footer-contactus">
email: phone: address
</div>
<div class="footer-copyrights">
Copyright © website 1
</div>
<div class="footer-socialm">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>

Answer 1

There were a lot of bugs in the html structure and css.
1. Never use position to set every element.
2. Your Menu was made up of button which was causing the problem, Always use unorder list (ul li) to make menus.
3. Some divs were not closed properly.
4. No need to write css for repeating elements. You can make a common class and use it again and again.
Below is the correct code structure and css. Also added some animation
to your dropdown so you can now learn some new things too :)
/* Grid View*/
* {
box-sizing: border-box;
}
/* Body Size*/
body {
background-color: white;
//position: relative;
margin-right: 150px;
margin-left: 150px;
margin-top: 20px;
}
/*Header*/
header {
position: fixed;
top: 0;
margin: 80%;
height: 100px;
background-color: whitesmoke;
color: black;
padding: 10px;
text-align: center;
}
/* Header <Logo> Fixed- No Need to make it fix positon as parent already fixed*/
.logo {
float: left;
max-width: 250px;
}
/* Header < Social Bar>*/
.icon-bar {
width: 100px;
overflow: auto;
}
/* Social Icons */
.icon-bar {
float: right;
width: 30%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
top: 100px;
}
.icon-bar a:hover {
background-color: yellow;
}
/* Header <Menu>*/
.menu {
float: left;
width: 65%;
padding: 0px;
margin: 0px;
}
.menu li {
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
position: relative;
}
.menu li a {
text-decoration: none;
color: #cccc00;
padding: 8px 20px;
display: block;
border-radius: 6px;
background-color: #47037A;
}
.menu li a:hover {
background-color: #cccc00;
color: #47037A;
}
.dropdown {
position: absolute;
top: 37px;
left: 0px;
padding: 0px;
margin: 0px;
visibility: hidden;
opacity: 0;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.dropdown li {
width: 100%;
margin: 4px 0;
}
.dropdown li a {
background-color: #cccc00;
color: #47037A;
}
.menu li:hover>.dropdown {
visibility: visible;
/* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}
/* Line separate header */
.hr-header {
float: left;
height: auto;
background-color: #47037A;
}
/* Content of Body */
.content {
float: left;
float: left;
width: 800px;
margin: 0 auto;
padding: 10px;
}
h1 {
color: darkblue;
}
p {
color: navy;
}
#footer {
position: fixed;
left: 0px;
bottom: 0;
height: 150px;
width: 100%;
color: #47037A;
background-color: whitesmoke;
padding: 10px;
font-family: Arial;
}
.footer-contactus {
text-align: left;
}
.footer-copyrights {
text-align: center;
}
.footer-socialm {
text-align: right;
}
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/functions.js" type="text/javascript"></script>
<div class="header">
<div class="logo">
<img src="images/logo.jpg" alt="logo" />
</div>
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3
<!---DropDown On hover----->
<ul class="dropdown">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
</ul>
<div class="hr-header"></div>
</div>
<div class="content">
Body
</div>
<div id="footer">
<div class="footer-contactus">
email: phone: address
</div>
<div class="footer-copyrights">
Copyright © website 1
</div>
<div class="footer-socialm">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>