When I hover "company" my navigation bar is not responding (it should have show sub-menu when it's hovered), can somebody please help me out? I tried many things but it just doesn't work. So that's why I am asking for your help.
HTML CODE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bobo Web</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topbar">
<i class="fa fa-phone"></i>
<p> Whatsapp: +86-15381188302 </p>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<p> Beogard Serbija, 500000</p>
<div class="icone">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
</div>
<nav>
<img src="img/logo.png">
<input type="search" placeholder="Search ...">
<ul>
<li><a href="">home</a></li>
<li><a href="">company <span class="chevron bottom"></span></a></li>
<div class="sub-menu-1"> //This submenu doesn't show when it's hovered
<ul>
<li><a href="#">News</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Certificate</a></li>
<li><a href="#">R & D Teams</a></li>
<li><a href="#">Inovation</a></li>
</ul>
</div>
<li><a href="">products <span class="chevron bottom"></span></a></li>
<li><a href="">knowledge <span class="chevron bottom"></span></a></li>
<li><a href="">online store <span class="chevron bottom"></span></a></li>
<li><a href="">contact us</a></li>
</ul>
</nav>
<img src="img/pozadina.png">
<p id="p1"> About our compnay</p>
</body>
</html>
CSS code:
*{
margin: 0px;
padding: 0px;
}
.topbar{
background-color: #1fa9e5;
height: 100%;
width: 100%;
display: block;
box-sizing: content-box;
}
.top-bar * {
font-size: inherit;
line-height: inherit;
}
.topbar p{
display: inline-block;
margin-right: 30px;
color: white;
padding: 8px 0;
}
.fa-phone, .fa-map-marker, .fa-facebook-square,.fa-twitter-square,.fa-youtube-square{
color: white;
}
.icone{
float: right;
margin-right: 10px;
}
.icone i{
padding-top : 6px;
padding-left: 10px;
}
nav{
width: 100%;
height: 95px;
}
nav ul{
text-align: center;
}
nav ul li{
display: inline-block;
padding: 40px 40px;
}
nav ul li a{
text-transform: uppercase;
font-size: 16px;
text-decoration: none;
font-weight: bold;
color: black;
}
nav ul li:hover{
background: #e0f8f6;
}
nav img{
position: absolute;
height: 70px;
padding-left: 20px;
padding-top: 10px;
}
.chevron {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
top: 0;
transform: rotate(135deg);
}
#p1{
text-transform: uppercase;
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 80px;
}
nav input{
float: right;
padding: 6px;
margin-top: 30px;
margin-right: 16px;
border: none;
font-size: 17px;
background: #f4f4f4;
}
.sub-menu-1{
display: none;
}
.nav ul li:hover .sub-menu-1{ //Not working at all
display: block;
position:absolute;
background: yellow;
margin-top: 15px;
margin-left: -15px;
}
ignore this, they forced me to add more text: /Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.?/
