Create dropdown menu in navigation bar in HTML and CSS

Creating navigation bar on web page which looks like drop down menu on mouse over is an essential part of web development. It can be developed by using CSS and HTML.

Here is the example code of this :-

Following CSS has used  for style and design, You may change the colour and font according to you. 

nav {
  background-color:;
  height:30px;
}

nav ul {
  font-family: Arial, Verdana;
  font-size: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: block;
  position: relative;
  float: left;
}

nav li ul {
  display: none;
}

nav ul li a {
  display: block;
  text-decoration: none;
  padding: 7px 15px 3px 15px;
  background:;
  color: ; 
  margin-left: 1px;
  white-space: nowrap;
  height:20px; /* Width and height of top-level nav items */
  width:auto;
  text-align:center;
 }

nav ul li a:hover {
  background:#FBEFEF;
}

nav li:hover ul {
  display: block;
  position: absolute;
  height:20px;
}

nav li:hover li {
  float: none;
  font-size: 11px;
}

nav li:hover a {
  background:#E0F8F7 ;
  height:20px; /* Height of lower-level nav items is shorter than main level */
}

nav li:hover li a:hover {
  background: #95A9B1;
}

nav ul li ul li a {
    text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
}

/* END NAV MENU */

Now here is the HTML code to create navigation bar.

<nav>
    <ul>
      <li><a href="adminhome.php">Home</a></li>
      <li><a href="">Event &dtrif; </a>
        <ul>
            <li><a href="stregister.php">New Registration</a></li>
     <li><a href="viewreg.php">View Registration</a></li>
            <li><a href="">Update Registration</a></li>
            <li><a href="">Delete Registration</a></li>
<li><a href="searchreg.php">Search Registration</a></li>
<li><a href="addevent.php">Add Event</a></li>
<li><a href="">Edit Event</a></li>
<li><a href="">Delete Event</a></li>
<li><a href="">Search Event</a></li>
        </ul>
      </li>
 
  <li><a href="/services">Project &dtrif; </a>
        <ul>
<li><a href="proj_reg.php">New Registration (Project)</a></li>
             
        </ul>
      </li> 
      <li><a href="/products">E-Certificate &dtrif; </a>
        <ul>
            <li><a href="get-cert1.php">Generate e-certificate</a></li>
<li><a href="get-cert-proj.php">Generate e-certificate (Project)</a></li>
            <li><a href="">View e-certificate</a></li>
<li><a href="checkstatus.php">Check Status</a></li>
        </ul>
      </li>
      <li><a href="/services">Reports &dtrif; </a>
        <ul>
            <li><a href="report-dept.php">Department-wise</a></li>
<li><a href="">Event-wise</a></li>
<li><a href="">Year-wise</a></li>
<li><a href="">Course-wise</a></li>
<li><a href="">Sem.-wise</a></li>
<li><a href="">All</a></li>
         
        </ul>
      </li>         
 
<li><a href="/services">Data &dtrif; </a>
        <ul>
            <li><a href="uploadexcel.php">Upload Data From Excel Sheet</a></li>
<li><a href="">Delete Data</a></li>
<li><a href="">View Data</a></li>
<li><a href="">Search Data</a></li>
       
        </ul>
      </li>         
      <li><a href="/contact">Profile &dtrif; </a>
        <ul>
            <li><a href="/email">Reports</a></li>
         
        </ul>
      </li>
   <li><a href="/contact">Site Map</a>
        <ul>
                   
        </ul>
      </li>
    <li><a href="/contact">FAQ</a>
        <ul>
                 
        </ul>
      </li>
    </ul>
</nav>