Source code of Dropdown Menu in HTML5 and CSS3.
Here we provide source code of dropdown menu in HTML5 and CSS3.
Source Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
margin: 0;
padding: 0;
/*text-decoration: none;*/
}
#container ul{
list-style-type: none;
}
#container ul li{
background-color: #808080;
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
font-size: 20px;
position: relative;
}
#container ul li:hover{
background-color: #5c543e;
}
#container ul ul{
display: none;
}
#container ul li:hover> ul{
display: block;
}
#container ul ul ul{
margin-left: 150px;
top: 0;
position: absolute;
}
/*-----------Aside Side Bar---------------*/
aside{
background-color: #efefef;
float: right;
margin-top: 65px;
width: 30%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
aside h3{
text-align: center;
background-color: #afafaf;
color: #fff;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
aside ul{
}
aside ul li,
aside ul li a{
text-indent: 10px;
display: block;
}
aside ul li a link,
aside ul li a:visted{
color: black;
font-size: 1.1em;
padding: 10px;
transition: all 0.5s;
}
aside ul li a:hover,
aside ul li a:active{
text-indent: 20px;
background-color: #cfcfcf;
}
aside ul li{
font-size: 30px;
text-align: center;
}
/*-------------Search Bar---------------*/
#container ul input{
overflow: hidden;
background-color: #e9e9e9;
float: right;
            padding: 6px;
            border: none;
            margin-top: 8px;
            margin-right: 16px;
            font-size: 24px;
}
</style>
<title></title>
<script src="https://kit.fontawesome.com/e7ad2314a7.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<ul>
<li>Home</li>
<li>News
<ul>
<li>Sports</li>
<li>Entertainment
<ul>
<li>Fun</li>
<li>Gaming</li>
<li>Over</li>
</ul>
</li>
<li>World News</li>
</ul>
</li>
<li>Contact</li>
<li>About</li>
<input type="text" placeholder="Search....">
</ul>
</div>
</body>
</html>