How to add dropdown menu in main menu?

[carriepr]

I am creating a Joomla 3 custom template using Bootstrap, and am having problems getting the submenu to show up as a dropdown. The submenu items show up under the main menu item (see attached image).

Capture.JPG

What do I need to add to my code to have the submenu open when hover over the main menu item?

Here is my index.php code. I set Menu Class Suffix in main module to: " nav navbar-nav navbar-tabs "

<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<jdoc:include type="modules" name="navigation" style="xhtml" />
</ul>
</div>
</div>
</nav>

[KianWilliam]

You may do it using a simple css if you need no animation. suppose:
<li class-"">
<a>an item in main menu</a>
<ul>
<li><a>submenuitem</a></li>
</ul>
</li>
1-in css file first hide inner ul.
2-in css file in hover event of outer li make inner ul become visible
3-give position absolute to inner ul and fix left and top according to your site
Good luck
Kian William

[carriepr]

Thanks for your replay KianWilliam. How do I code this for a Joomla menu module though? I don't code the <li> directly, but inject "<jdoc:include type="modules" name="navigation" style="xhtml" />". Can you post a code sample of how this is done?

[Per Yngve Berg]

Did you set the Always Show sub-menu Items= yes in the menu module?

[carriepr]

Yes, I set start level to 1, end level to 3, and show submenu to Yes.

Did you set the Always Show sub-menu Items= yes in the menu module?

[KianWilliam]

This is a sample code of my own website, you can add something like this in your template.css file or you can also use html folder of your template as this: html\mod_name\default.php , default.php in under tmpl folder of your menu module , you have to copy and paste it in that path and add this snip of css there via addStyleDeclaration, I usually use the first way it is faster and eaiser and even when I update joomla I have not seen important changes.

#insurance-container #insurance-menu ul:nth-of-type(2) li.item-127>ul
{
display:none;
position:absolute;
left:890px;
top:5px;
background-color:#7ab7f5;
border:2px solid #fff;
border-radius:20px;
text-align:center;
padding:7px;


}

#insurance-container #insurance-menu ul:nth-of-type(2) li.item-127:hover>ul
{
display:block;
}


Kian William

[carriepr]

This didn't work for me. I changed it to the following, and put it in my custom.css file. Nothing changed. Do I have the right classes set for this? Look at my code in the original post for the nav.

#nav #navbar-nav ul:nth-of-type(2) li.item-127>ul
{
display:none;
position:absolute;
left:890px;
top:5px;
background-color:#7ab7f5;
border:2px solid #fff;
border-radius:20px;
text-align:center;
padding:7px;


}

#nav #navbar-nav ul:nth-of-type(2) li.item-127:hover>ul
{
display:block;
}

This is a sample code of my own website, you can add something like this in your template.css file or you can also use html folder of your template as this: html\mod_name\default.php , default.php in under tmpl folder of your menu module , you have to copy and paste it in that path and add this snip of css there via addStyleDeclaration, I usually use the first way it is faster and eaiser and even when I update joomla I have not seen important changes.

#insurance-container #insurance-menu ul:nth-of-type(2) li.item-127>ul
{
display:none;
position:absolute;
left:890px;
top:5px;
background-color:#7ab7f5;
border:2px solid #fff;
border-radius:20px;
text-align:center;
padding:7px;


}

#insurance-container #insurance-menu ul:nth-of-type(2) li.item-127:hover>ul
{
display:block;
}


Kian William

[carriepr]

Any other suggestions? This shouldn't be this hard. How is this done in the other templates?

[KianWilliam]

Be sure you included the custom.css file in the main page, and also the item number in your site is not 127 it is in my site, right click on your menu and go to inspect (if you use chrome or ff to view your site) and find the right item number there, It will work for sure and let me know if you have any other problem.
Good Luck
Kian William

[carriepr]

This solution won't work for me, since it requires hard coding specific menu items. I need to be able to change the menu without having to adjust the CSS everytime. Most templates handles this without requiring that. There must be a way to do this using script or jquery.

Be sure you included the custom.css file in the main page, and also the item number in your site is not 127 it is in my site, right click on your menu and go to inspect (if you use chrome or ff to view your site) and find the right item number there, It will work for sure and let me know if you have any other problem.
Good Luck
Kian William

[KianWilliam]

you will not adjust css every time, in jquery you can animate the menu, yet again you got to use css properties in css or animate function of jquery, also instead of li.item-num, you can also use li:nth-of-type too, it really makes no difference, there are quite different ways to reach the same goal, it has always worked for me. here is a sample of my work with this code snippet: http://www.wartoys.lord121.ir, just hover over some menu items, I did that with the code snippet I sent you.
Good luck
Kian William