CODEWITHSUNDEEP
htmlcss
Dan Anderton
Dan Anderton

Reputation: 45

HTML Drop Down Menu

  <div class="main-menu">
      <ul class="menu-list">                                                  
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
           <li><a href="#">Three</a></li>
           <li><a href="#">Four</a></li>
           <li><a href="#">Drop Down</a></li>                                
      </ul>

I'm struggling to create a very basic drop down menu using list items. Could anyone please tell me how I'd go about creating a drop down menu to the below:

  <div class="main-menu">
      <ul class="menu-list">                                                  
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
          <li><a href="#">Drop Down</a></li>                                
      </ul>

I've no issues with CSS so styling shouldn't be a problem, but I', trying to achieve this without the use of Javascript.

Upvotes: 0

Views: 6597

Answers (2)

ehavener
ehavener

Reputation: 71

It is certainly possible without JS, by setting your dropdown's nested options to display none, and then to flex or block them upon hovering their parent. Here's a simple example using your code:

https://codepen.io/ehavener/pen/gBLOXV

HTML

 <div class="main-menu">
    <ul class="menu-list">                 
     <li><a href="#">One</a></li>
     <li><a href="#">Two</a></li>
     <li><a href="#">Three</a></li>
     <li><a href="#">Four</a></li>
     <li><a href="#">Drop Down</a>
       <ul>
         <li><a href="#">One</a></li>
         <li><a href="#">Two</a></li>
       </ul>
    </li>   
   </ul>
 </div>

CSS

.main-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.main-menu ul li a {
  padding: 20px;
  display: block;
  color: #ddd;
  text-decoration: none;
  background: #21263E;
}

.main-menu ul li ul {
  display: none;
}

.main-menu ul li:hover ul {
  display: flex;
  flex-direction: column;
}

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

Upvotes: 1

Osman Gani Khan Masum
Osman Gani Khan Masum

Reputation: 488

there are some links for your answer.

  1. Without CSS [1]: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
  2. With CSS [2]: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

If those bother you, there is the simplest solution.

I suppose you have no problem with your CSS though designing a drop down is pretty bang!

Inside Body tag: type those:

<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>

This may work as your need.

Thanks.

Upvotes: 1

Related Questions