NEED URGENT HELP (Making a Dropdown Menu within a Template!!)

NEED URGENT HELP (Making a Dropdown Menu within a Template!!) - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: NEED URGENT HELP (Making a Dropdown Menu within a Template!!) (/showthread.php?tid=5379637)

NEED URGENT HELP (Making a Dropdown Menu within a Template!!) - Frankey - Aug 19, 2016

Hey,

I'm working with this template: https://w3layouts.com/preview/?l=/gym-flat-sports-bootstrap-responsive-web-template/ it is Bootstrap based.

This is the Menu I have at the moment: [Image: 150bdf951a.png]

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 - Aug 19, 2016

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

[Image: d4ead24750a749a250cc332a94e76876.gif]

* - Jdxo - Aug 19, 2016

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 - Aug 19, 2016

(Aug 19, 2016 10:22 AM)SteezyHB Wrote: 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 - Aug 19, 2016

(Aug 19, 2016 10:34 AM)Jdxo Wrote: 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 )

(Aug 19, 2016 10:36 AM)Frankey Wrote: Wow, bedankt man! <3

geen probleem ;)