html dropdown menu | dropdown menu using html css

html dropdown menu | dropdown menu using HTML css 

Welcome to Code With Random blog. In this blog, we learn that how we how to create an HTML dropdown menu. We use HTML & CSS  for this html drop down menu . Hope you enjoy our blog so let’s start with a basic HTML structure for the HTML dropdown menu.

HTML code for dropdown menu

 <body>  
   <div id="container">  
    <nav>  
     <ul>  
      <li><a href="#">Home</a></li>  
      <li>  
       <a href="#">Web Design</a>  
       <ul>  
        <li><a href="#">Project</a></li>  
        <li><a href="#">Videos</a></li>  
        <li>  
         <a href="#">Tutorials</a>  
         <ul>  
          <li><a href="#">HTML/CSS</a></li>  
          <li><a href="#">Javascript</a></li>  
          <li>  
           <a href="#">UI Trend</a>  
           <ul>  
            <li><a href="#">Neumorphism</a></li>  
            <li><a href="#">Glassmorphism</a></li>  
            <li><a href="#">Other UI</a></li>  
           </ul>  
          </li>  
         </ul>  
        </li>  
       </ul>  
      </li>  
      <li><a href="#">Web development</a></li>  
      <li><a href="#">CWR</a></li>  
      <li><a href="#">Contact</a></li>  
     </ul>  
    </nav>  
   </div>  
   <h1>  
    Go to google search codewithrandom and visit my website for source. code  
    and 40+ frontend project available with complete code❤️  
   </h1>  
  </body>  
There is all HTML code for the Html dropdown menu. Now, you can see output without CSS, then we write CSS for our Html dropdown menu.
Output

CSS for dropdown menu

 @import url(https://fonts.googleapis.com/css?family=Open+Sans);  
 @import url(https://fonts.googleapis.com/css?family=Bree+Serif);  
 body {  
  background: #ebf0f5;  
  font-size: 22px;  
  line-height: 32px;  
  color: #ffffff;  
  word-wrap: break-word !important;  
  font-family: "Open Sans", sans-serif;  
 }  
 a {  
  color: #fff;  
 }  
 #container {  
  margin: 0 auto;  
 }  
 nav {  
  margin: 50px 0;  
  background-color: #0f131f;  
 }  
 nav ul {  
  padding: 0;  
  margin: 0;  
  list-style: none;  
  position: relative;  
 }  
 nav ul li {  
  display: inline-block;  
  background-color: #0f131f;  
 }  
 nav a {  
  display: block;  
  padding: 0 10px;  
  color: #fff;  
  font-size: 20px;  
  line-height: 60px;  
  text-decoration: none;  
 }  
 nav a:hover {  
  background-color: #5f5c5c;  
 }  
 nav ul ul {  
  display: none;  
  position: absolute;  
  top: 60px;  
 }  
 nav ul li:hover > ul {  
  display: inherit;  
 }  
 nav ul ul li {  
  width: 170px;  
  float: none;  
  display: list-item;  
  position: relative;  
 }  
 nav ul ul ul li {  
  position: relative;  
  top: -60px;  
  left: 170px;  
 }  
 h1 {  
  width: 670px;  
  color: black;  
  font-size: 1.4rem;  
 }  
 li > a:after {  
  content: " +";  
 }  
 li > a:only-child:after {  
  content: "";  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output

html dropdown menu | dropdown menu using html css

 

html dropdown menu | dropdown menu using html css

Now we have completed our CSS section,  Here is our updated output with  CSS. Hope you like HTML dropdown menu, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

In this post, we learn how to create a Html dropdown menu using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript

Share on:

Leave a Comment