html dropdown menu | dropdown menu using html css

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
html dropdown menu | dropdown menu using html css
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

Check it more








Now we have completed our CSS section,  Here is our updated output with  CSSHope 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 


Post a Comment

Previous Post Next Post