Simple HTML & CSS Dropdown Menu Source Code

HTML & CSS

You may have seen different types of menu in many websites. There are many stylish menus, with JavaScript and jquery being used with HTML & CSS. But today I will show you the use of HTML and CSS as a Dropdown menu. This source code is really simple and easy to understand.

Simple HTML & CSS Dropdown Menu Source Code Checkout Here Below:

This Dropdown menu made with Only HTML & CSS. Copy source code from here.

For creating this program you have to create HTML File. Follow the steps to creating this without any error.

index.html or index.htm

Create an HTML file named ‘index.html‘ and put these codes given below.

  
<!DOCTYPE html>
<html>
   <head>
 <title>Dropdown Menu</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
   </head>
 <style type="text/css">
 *{
     margin: 0;
     padding: 0;
  }
 body{
    background: #eee;
    font-size: 16px;
    font-family: sans-serif,arial;
 }
 
 .nav{
    width: 1100px;
    height: 60px;
    margin: 0 auto;
    border-radius: 5px; 
 }
 ul li{
    list-style: none;
    width: 200px;
    line-height: 60px;
    position: relative;
    background: #222;
    box-shadow: 0px 2px 5px 0px grey;
    text-align: center;
    float: left;
    background-color: #010000;
 }
 ul li ul{
    position: absolute;
 }
 .nav > ul > li:nth-of-type(1){
    border-radius: 5px 0px 0px 5px;
 }
 .nav > ul > li:nth-of-type(5){
    border-radius: 0px 5px 5px 0px;
 }
 ul li a{
    color: #fff;
    width: 200px;
    height: 58px;
    display: inline-block;
    text-decoration: none;
 }
 ul li a:hover{
    font-weight: bold;
    border-bottom: 2px solid #fff;
 }
 ul li ul{
    display: none;
 }
 .nav ul li:hover ul{
    display: block;
 }
 .fa{
    margin-right: 5px;
 }
 .container{
    width: 1000px;
    height: 200px;
    margin: 0 auto;
   padding:20px 20px;
 }
 @media screen and (max-width: 480px){
 header{
  width: 100%;
 }
 .nav{
  display: none;
  width: 100%;
  height: auto;
 }
 ul li{
  width: 100%;
  float: none;
 }
 ul li a{
  width: 100%;
  display: block;
 }
 ul li ul{
  position: static;
 }
 ul li ul li a{
  background: #222;
 }
 .fa-list.modify{
  display: block;
 }
 .container{
  width: 100%;
  height: auto;
 }
 body{
  overflow-x:hidden;
 }
}
 </style>
<body>
 <div class="menu">
</div>
<nav class="nav">
 <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Web Design</a>
  <ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
  <ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="https://www.technoniit.tk" target="_blank">About</a></li>
</ul>
</nav> 
</body>
</html>

That’s It. Now you have successfully created Simple HTML & CSS Dropdown Menu. If you have any doubt or question comment down below.
I hope this post will useful to you, Thanks For Visiting, Keep Visiting.

TECHNO NIIT

Simple HTML & CSS Dropdown Menu Source Code

Simple HTML & CSS Dropdown Menu Source Code

Simple HTML & CSS Dropdown Menu Source Code Checkout Here Below:

1 comment:

Social Counter

Contact Form

Popular

Facebook

Youtube

Recent in Technology

Labels

Recent Posts

Archive

Categories

Business