Is it possible to have a multi level dropdown menu by using the elements of twitter bootstrap 2?
The original version doesn't have this feature.
Updated Answer
* Updated answer which support the v2.1.1** bootstrap version stylesheet.
**But be careful because this solution has been removed from v3
Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default. You can still use it if you're on older versions but for those who updated to the latest (v2.1.1 at the time of writing) it is not needed anymore. Here is a fiddle with the updated default multi-level dropdown straight from the documentation:
http://jsfiddle.net/2Smgv/2858/
Original Answer
There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers, such as this one, so i think it is left to the developers using the bootstrap to work something out. Here is a demo i put together showing you how you can hack together a working sub-menu.
Relevant code
CSS
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
display: block;
}
.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;
}
Created my own .sub-menu class to apply to the 2-level drop down menus, this way we can position them next to our menu items. Also modified the arrow to display it on the left of the submenu group.
Demo
[Twitter Bootstrap v3]
To create a n-level dropdown menu (touch device friendly) in Twitter Bootstrap v3,
jsfiddle-demo of n-level dropdown menu v3.0.0 | v3.1.1 | v3.3.0
CSS:
.dropdown-menu>li /* To prevent selection of text */
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu
{
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after,.left-caret:after
{ content:"";
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.right-caret:after
{ border-left: 5px solid #ffaf46;
}
.left-caret:after
{ border-right: 5px solid #ffaf46;
}
JQuery:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
</div>
This example is from http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Works for me in Bootstrap v3.1.1.
HTML
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
I was able to fix the sub-menu's always pinning to the top of the parent menu from Andres's answer with the following addition:
.dropdown-menu li {
position: relative;
}
I also add an icon "icon-chevron-right" on items which contain menu sub-menus, and change the icon from black to white on hover (to compliment the text changing to white and look better with the selected blue background).
Here is the full less/css change (replace the above with this):
.dropdown-menu li {
position: relative;
[class^="icon-"] {
float: right;
}
&:hover {
// Switch to white icons on hover
[class^="icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}
}
}
I just added class="span2" to the <li> for the dropdown items and that worked.
Since Bootstrap 3 removed the submenu part and we need to adapt ourselves the style, I think it's better to go with SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
That would save us time on mobile responsive and style.
This plugin also very promising.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I have ol in my header of the page. In last two there is an Username and profile pic. And I want to show dropdown menu on hover over username or profile pic. But it is not displaying menu on hover. There is one lebel inside my dropdown-content.In mozilla it is not showing anything on hover and in chrome it is also not showing on hover but by default it is showing label.
.head{
top:0;
background:#424242;
padding:1px;
height:10%;
}
li{
display:inline-block;
color:#E0E0E0;
cursor:pointer;
padding:10px 10px 2px 10px;
font-size:20px;
}
li:hover{
color:white;
}
li.active{
color:white;
border-bottom:1px solid white;
}
.right{
float:right;
color:white;
}
#profilepic{
border-radius:50%;
width:40px;
height:40px;
margin:-10px 50px 0 20px;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right:0;
margin-right:20px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {background-color: #ddd;}
.right:hover .dropdown-content {display: block;}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
<li class="right">ABC</li>
</ul>
<div class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</div>
</div>
Please restructure your html like so, this will be ideal for showing the dropdown.
The below class will be used to show the hidden dropdown.
.show-settings:hover .dropdown-content {
display: block;
}
.right {
float: right;
color: black;
position:relative;
}
#profilepic {
border-radius: 50%;
width: 40px;
height: 40px;
margin: -10px 50px 0 20px;
}
.show-settings:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right: 0;
margin-right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
overflow: hidden;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {
background-color: #ddd;
}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right show-settings">
<img id="profilepic" src="http://via.placeholder.com/50x50"> username
<div class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</div>
</li>
</ul>
</div>
Putting space between two CSS selctors (.class1 .class2), specify that you want a hirarchy - when .class2 is nested inside class1. You can't by CSS only to get the parent of an element. So, to solve your problem, you should do it by js, or including .dropdown-content inside the <ul> element (change it from <div> to <li>, because inside lists only <li> elements are valid), and then access it by CSS3's general sibling selector (or by CSS3's adjacent sibling selector, I don't use it here):
Solution 1:
.right {
float: right;
}
#profilepic {
border-radius: 50%;
width: 40px;
height: 40px;
margin: -10px 50px 0 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right: 0;
margin-right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {
background-color: #ddd;
}
.right:hover ~ .dropdown-content, /* or ".right:hover + .dropdown-content" with adjacent sibling selector */
.dropdown-content:hover /* For the dropdown won't disappear when hover it */ {
display: block;
}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
<li class="right">ABC</li>
<li class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</li>
</ul>
</div>
Solution 2:
window.onload = function() {
var dropdown = document.querySelector('.dropdown-content');
document.querySelectorAll('.right').forEach(function(el) {
el.addEventListener('mouseover', function() {
dropdown.style.display = 'block';
}, false);
el.addEventListener('mouseout', function() {
dropdown.style.display = 'none';
}, false);
});
};
.right {
float: right;
}
#profilepic {
border-radius: 50%;
width: 40px;
height: 40px;
margin: -10px 50px 0 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right: 0;
margin-right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {
background-color: #ddd;
}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
<li class="right">ABC</li>
</ul>
<div class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</div>
</div>
menu REPORT is not working (links) while TOOLS and other dropdown menus are working (moving to other pages). why is the REPORT menu is working locally but not on the ubuntu server?
both of them uses the same structure but looks different because in styling
ADDITIONAL:
when you click the li tag, example: BY TYPE . it will go to rep_handle.php. then from rep_handle.php it will move to another location with stat_type VARIABLE to date_handler.php. but it just stop to stat_type.php.
does it has conflict with my CSS? please advise.. thanks
REPORT
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Reports </a>
<ul class = "dropdown-menu">
<li class="library">
<a class = "dropdown-toggle" href = "#"> Library </a>
</li>
<li class="libraryli divider" style=""></li>
<li class="libraryli dropdown-submenu" style="">
<a class = "dropdown-toggle" href = "#"> • Yearly </a>
<ul class = "dropdown-menu">
<li> By Type</li>
<li> By <?php echo $CS; ?></li>
</ul>
</li>
<li class="libraryli dropdown-submenu" style="">
<a class = "dropdown-toggle" href = "#"> • TRW </a>
<ul class = "dropdown-menu">
<li>Top Visitors</li>
<li> By Section</li>
<li>Comparison By Type</li>
<li> Comparison By <?php echo $CS; ?></li>
</ul>
</li>
<li class="libraryli divider" style="display:none;"></li>
<li> Service Days</li>
<li> Records</li>
</ul>
JS
<script>
$(document).ready(function(){
$('.dropdown-submenu a.dropdown-toggle').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
$('.dropdown-submenu a.dropdown-toggle').not(this).next('ul').hide();
});
});
</script>
<script>
$(document).ready(function(){
$('.library').on("mouseover", function(e){
$(this).siblings('.libraryli').show();
e.stopPropagation();
e.preventDefault();
$('span.caret-pr').addClass("caret-reversed");
});
$('.library').on("click", function(e){
$(this).siblings('.libraryli').toggle();
e.stopPropagation();
e.preventDefault();
$('span.caret-pr').toggleClass("caret-reversed");
});
});
</script>
CSS
.dropdown-submenu
{
position: relative;
}
.dropdown-submenu>.dropdown-menu
{
top: 0;
left: 100%;
margin-top: -6px;
margin-left: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu
{
display: block;
}
.dropdown-submenu>a:after
{
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 4.5px 0 4.5px 4.5px;
border-left-color: #000;
margin-top: 4.5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after
{
border-left-color: #000;
}
.dropdown-submenu.pull-left
{
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu
{
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.caret-pr
{
display: block;
content: " ";
float: right;
width: 0;
height: 0;
margin-top: 6px;
margin-right: -10px;
border-top: 5px solid ;
}
.caret.caret-reversed
{
border-top-width: 0;
border-bottom: 5px solid ;
}
.libraryli
{
background-color:#f5f5f5;
}
</style>
This question already has answers here:
When coding HTML, browser doesn't always detect changes
(6 answers)
Stylesheet not updating when I refresh my site
(16 answers)
Closed 5 years ago.
I'm not sure if this may be due to php/wordpress but I've got a nav bar that I just realised when you click the link it stays underlined until you hover it again? Seems strange to me I've never had this happen and can't quite work out why..
<nav>
<ul>
<li><img src=" " height="10%" width="10%"/>Link 1</li>
<li><img src=" " height="10%" width="10%"/><a href="#">Link 2</li>
<li><img src="" height="10%" width="10%"/><a href="#">Link 3</li>
</ul>
</nav>
scss..
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
change your " ul li a" , to this:
nav ul li a {
color: $font_color;
text-decoration: none;
}
You Need some HTML Fixes.
You have used anchor tag inside anchor tag.
HTML
<nav>
<ul>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 1
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 2
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 3
</a>
</li>
</ul>
</nav>
CSS
/*Random colors use your colors here*/
$nav_bgcolor:red;
$nav_shadow:black;
$font-color:white;
$hover:green;
/*Random colors use your colors here*/
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
text-decoration:none;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
My code above was actually correct in fixing the problem I had. The problem was happening as it wasn't updating any of my code as the browser had cached the site.
Thanks everyone for your help
NOTE: Delete browser history!!
I have Wordpress pages looking like this: Page 1 | Page 2 | Page 3 |
I don't want a border-right on Page 3. How can I delete it?
.primary-navigation {
float: left;
}
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation .menu-item-has-children a {
padding-right: 35px
}
<div id="primary-navigation" class="primary-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation" class="navigation clearfix mobile-menu-wrapper">
<a href="#" id="pull" class="toggle-mobile-menu">
<?php _e( 'Menu'); ?>
</a>
<?php if (has_nav_menu( 'primary-menu')) { ?>
<?php wp_nav_menu(array( 'theme_location'=>'primary-menu', 'menu_class' => 'menu clearfix', 'menu_id' => 'menu-primary-menu', 'container' => '', 'walker' => new mts_menu_walker)); ?>
<?php } else { ?>
<ul class="menu clearfix" id="menu-primary-menu">
<?php wp_list_pages( 'title_li='); ?>
</ul>
<?php } ?>
</nav>
</div>
Use the :last-child pseudo-class to set border-right: none; on the last <a> in your .primary-navigation.
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation li:last-child a {
border-right: none;
}
More on the :last-child pseudo-class on MDN.
You can use CSS selector :not(:last-child) to select all your element BUT the last.
ul.menu {
list-style-type : none;
padding : 0px;
}
ul.menu > li {
display : inline-block;
padding-right : 2px;
}
ul.menu > li:not(:last-child) {
border-right : solid 1px black;
}
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
/* border-right: 1px dotted #7b7f82; <-- REMOVE from this declaration block */
position: relative;
line-height: 1;
}
.primary-navigation a:not(:last-child) {
border-right: 1px dotted #7b7f82;
}
Using the :not() negation and :last-child pseudo-classes, all anchors are given the border, except the last one.
Just FYI, this method may be simpler:
a + a {
border-left: 1px dotted #7b7f82;
}
Using the adjacent sibling selector, a left-side border can be applied to all anchors immediately following another anchor. This means no left-side border on the first anchor, and no right-side border on the last anchor.
Add this style to you css:
.primary-navigation { float: left; }
.primary-navigation ul {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation ul:last-child {
border-right: none;
}
<li class="primary-navigation">
<ul class="menu clearfix" id="menu-primary-menu">Page 1</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 2</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 3</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 4</ul>
</li>
I created an horizontal menu with a submenu. On jsfiddle I don't know with the submenu isn't working correctly at 100% instead on local it does. Here is the working link: http://jsfiddle.net/IronFeast/g8MDP/
And here is the code:
<ul id="navbar">
<li>Home</li>
<li>Gallery
<ul class="submenu">
<li>Photogallery 1</li>
<li>Photogallery 2</li>
<li>Photogallery 3</li>
</ul>
</li>
<li>Events</li>
<li>Blog
<ul class="submenu">
<li>Personal</li>
<li>Dev</li>
</ul>
</li>
<li>About
<ul class="submenu">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
CSS:
#navbar {
background-color: #4E78B4;
position: absolute;
text-align: center;
margin: 0;
padding-bottom: 7px;
padding-top: 7px;
float: left;
left: 10px;
width: 940px;
font-size: 14px;
z-index: 100;
}
#navbar li {
list-style: none;
float: left;
color: #E9EBDE;
padding-left: 24px;
padding-right: 4px;
z-index: 100;
}
#navbar li a {
display: inline;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 8px;
padding-left: 8px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #ffffff;
z-index: 100;
text-align: center;
}
#navbar ul li a {
display: block;
padding-top: 6px;
padding-bottom: 3px;
padding-right: 8px;
padding-left: 8px;
text-decoration: none;
z-index: 100;
}
#navbar li a:hover {
color: #000000;
background-color: #ffffff;
padding-right: 8px;
padding-left: 8px;
z-index: 100;
}
#navbar li ul{
display: none;
background-color: #41B6DC;
z-index: 100;
}
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: block;
left: 0;
width: 940px;
margin: 0;
padding: 0;
z-index: 100;
margin-top: 7px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
z-index: 100;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #000;
z-index: 100;
}
#navbar li li a:hover {
color: #4E78B4;
z-index: 100;
}
At the moment when I go with the mouse over the "Gallery", the submenu will open, but if I click on "Photogallery 1" I will go to that page but unfortunately the menu will close when I am in that page.
I'd like that "Gallery" will be highlighted, the submenu will stay opened and also the "Photogallery 1" button will be highlighted.
Any help would be awesome. Thank you in advance
You must add on photogallery1.php, photogallery2.php, etc class attribute with hover as value.
<ul id="navbar">
<li>Home</li>
<li class="<?php echo $_COOKIE["hover"]; ?>">Gallery
<ul class="submenu">
<li>Photogallery 1</li>
<li>Photogallery 2</li>
<li>Photogallery 3</li>
</ul>
...
...
</ul>
also add on your css:
.selected {
background-color: #ffffff;
}
It better to use cookie to save menu state.
I found this tutorial http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu maybe it can help you but i think you will need to ajust the html and css :S
Hope it helps you