Child list disappears when hovered over it - css

Question

I have a Horizontal Menu. When the mouse is hovered over the child elements it disappears. The child elements cannot be clicked. I would like the child elements to stay when the mouse is hovered over it.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>

Answer 1

It's because you have positioned your submenu absolutely, and it's too far away from your parent li, so your mouse is leaving the parent menu before it reaches the submenu. I've added borders to show you.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid blue;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
You have padding, but it's on your a element, and needs to be on your li element, instead. Either add padding-top to your submenu li elements or adjust their top position so that they're directly underneath (aka "touching") the parent element.
Here is the code with the menu moved to top: 40px and the padding added to the submenu li elements:
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li ul li {
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 40px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>