[Frankey]

Hey,

I'm working with this template: https://w3layouts.com/preview/?l=/gym-fl...-template/ it is Bootstrap based.

This is the Menu I have at the moment:

I want that the text "Afdelingen" is a dropdown button which shows 3 options. but I can't seem to find a way to do it. I tried to do this:

Code

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>

But it didnt do anything. It is really urgent so please HMU if you know how to fix it. I have Skype and Discord. Can do with Teamviewer.

[SteezyHB]

CSS

Code

.dropdown-toggle parent {
    cursor:pointer;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    margin-top: 0;
}

HTML

Code

<li class="dropdown">
  <a data-toggle="dropdown" class="dropdown-toggle">Afdelingen</a>
  <ul class="dropdown-menu" id="menu1">
    <li><a href="#">Afdeling Noord</a></li>
    <li><a href="#">Afdeling Zuid</a></li>
    <li><a href="#">Afdeling West</a></li>
  </ul>
</li>

result

[Jdxo]

Ahh you beat me to it. But yeh you dont even need to add the styles that Steezy has added just simply add another <ul> inside of the <li> you want to drop down. Like this

Code

<li><a href="trainers.html">Trainers</a></li>
               <li><a href="classes.html">Classes</a>
                       <ul>
                           <li><a href="classes.html">Classes</a></li>
                           <li><a href="classes.html">Classes</a></li>
                           <li><a href="classes.html">Classes</a></li>
                           <li><a href="classes.html">Classes</a></li>
                       </ul>
               </li>
               <li><a href="blog.html">Blog</a></li>

[Frankey]

CSS

Code

.dropdown-toggle parent {
    cursor:pointer;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    margin-top: 0;
}

HTML

Code

<li class="dropdown">
  <a data-toggle="dropdown" class="dropdown-toggle">Afdelingen</a>
  <ul class="dropdown-menu" id="menu1">
    <li><a href="#">Afdeling Noord</a></li>
    <li><a href="#">Afdeling Zuid</a></li>
    <li><a href="#">Afdeling West</a></li>
  </ul>
</li>

result

Wow, bedankt man! <3

[SteezyHB]

Ahh you beat me to it. But yeh you dont even need to add the styles that Steezy has added just simply add another <ul> inside of the <li> you want to drop down. Like this

You do need these styles

Code

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    margin-top: 0;
}

Doesn't seem to be working without these css classes;
The first one is required for the dropdown menu to actually show (otherwise it'll stay hidden on dropdown button hover), and the second is so that you can actually reach the dropdown menu without it dissapearing (because you're not hovering either the dropdown button or the dropdown menu).
edit: only on my version, just tested out your html code and it seems to be working (would still need some styling though; https://gyazo.com/d3c6838ac814ab657adc9258b6ebdff4 )

Wow, bedankt man! <3

geen probleem ;)