Sub Menu Items

This is my current code with the hook up

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<?php if (function_exists('getNavMenu')): ?>
<?php echo getNavMenu('main','hover'); ?>
<?php endif; ?>
</ul>
</div>
</div>
</div>

and this is how the menu works using HTML

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">History</a></li>

<li class="dropdown active"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Guides</a>

<ul class="dropdown-menu">

<li><a href="#">SUB MENU ITEM 1</a></li><br>
<li><a href="#">SUB MENU ITEM 2</a></li>

</ul>

</li>

<li><a href="#">Request a Quote</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>

Nevermind, just placed the top menus with # as links and it worked, at this point it is ok because those top links won’t have any contents at all, just they are triggers to display the sub menu, but it would be interesting to have that as an option in some control panel, great great job!

Arturo

Thanks @arturocivit

I didnt know that we had to put the # as a link using custom menu, in order to get the sub menu’s to show. Solved all my issues. Kinda weird though, I guess that is a bootstrap coding thing?

Norman

Hey Norman, glad it worked for you, I think its some kind of solution for touch screen devices,

Good luck!

Arturo

I said before,You must use some codes for showing sub menu in hover mode.For example add this css to you style or your bootstrap style:

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

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

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}