Create a Navbar Dropdown using HTML and CSS

Navbar is a navigation that has a very important role in a website, with the Navbar, the website that we create will be easy and convenient to use by users in the process of data management. The better the navbar of a website, the better the appearance and convenience of the website in its use.

On this occasion we will create a Navbar that has a dropdown so that the website we create looks good and relevant. Before we enter the coding phase, we should first master HTML and CSS, which are both the most important in making website creation. After you embrace them, we can enter the coding stage. Well, let's just discuss the coding.

Create an index.html file

The first step is to create an html file. Make a file with the name index with the extension .html (index.html). After creating the index.html file, then we create the code. for the coding are as follows.


<html>
<head>
 <title>Tutorial Dropdown</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
  </head>
<body>
 <center><h1 style="color:black;">Make Dropdowns with HTML and CSS</h1></center>
  <div class="menu-wrap">
 <ul>
  <li><a href="">Home</a></li>
  <li><a href="">Ebook</a></li>
  <li><a href="">Programming</a>
   <ul>
    <li><a href="">Website</a></li>
    <li><a href="">Desktop</a></li>
    <li><a href="">Mobile</a></li>
   </ul>
  </li>
  <li><a href="http://www.portalcoding.com">Blog</a></li>
 </ul>
  </div>
</body>
</html>

Create a style.css file

After we enter the code above, then next is to create a css file, please create a css file with the style name (style.css). and save in one folder with the html file. The function of this file is to beautify the design of the page we created with html. After creating the style.css file, please enter the following coding.


* {margin:0; padding:0;}

body {
 background-color:#fff;
 font-family:Arial, Helvetica, sans-serif;
 color:#FFF;
 padding-top:20px;
}

.menu-wrap {
 background-color:#f64c3b;
 height:50px;
 line-height:50px;
 position:relative;
 width:770px;
 margin:auto;
 margin-top:80px;
}

.menu-wrap ul {
 list-style:none;
}

.menu-wrap ul li a {
 float:left;
 width:150px;
 display:block;
 text-align:center;
 color:#FFF;
 text-decoration:none;
 text-transform:uppercase;
}

.menu-wrap ul li a:hover {
 background-color:#666;
 display:block;
}

.menu-wrap ul li:hover ul {
 display:block;
}

.menu-wrap ul ul {
 display:none;
 list-style:none;
 position:absolute;
 background-color:#f64c3b;
 left:300px;
 top:50px;
 width:190px;
}

.menu-wrap ul ul li a {
 float:none;
 display:block;
 padding-left:30px;
 text-align:left;
 width:160px;
}

.menu-wrap ul ul li a:hover {
 color:#fff;
}

After you enter the css coding above, don't forget to save it and run it using your browser. Then the results will appear as follows.

So a short tutorial on how to make a Navbar dropdown using HTML and CSS. Please learners carefully to better understand it. For those who don't understand, I can ask through the comments column, God willing, I will reply. So for today, thank you.

Create a Navbar Dropdown using HTML and CSS