Question

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><a href="index.php">Home</a></li>
<li><a href="#">Gallery</a>
<ul class="submenu">
   <li><a href="photogallery1.php">Photogallery 1</a></li>
   <li><a href="photogallery2.php">Photogallery 2</a></li>
   <li><a href="photogallery3.php">Photogallery 3</a></li>
</ul>         
</li>
<li><a href="events.php">Events</a></li>
<li><a href="#">Blog</a>
<ul class="submenu">
   <li><a href="personal.php">Personal</a></li>
   <li><a href="dev.php">Dev</a></li>
</ul> 
</li>
<li><a href="#">About</a>
<ul class="submenu">
   <li><a href="page1.php">Page 1</a></li>
   <li><a href="page2.php">Page 2</a></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

Answer 1

You must add on photogallery1.php, photogallery2.php, etc class attribute with hover as value.

<ul id="navbar">
    <li><a href="index.php">Home</a></li>
    <li class="<?php echo $_COOKIE["hover"]; ?>"><a href="#">Gallery</a>
    <ul class="submenu">
       <li><a href="photogallery1.php" class="<?php echo $_COOKIE["selected"]; ?>">Photogallery 1</a></li>
       <li><a href="photogallery2.php">Photogallery 2</a></li>
       <li><a href="photogallery3.php">Photogallery 3</a></li>
    </ul>         
    ...
    ...
</ul>

also add on your css:

.selected {
    background-color: #ffffff;
}

It better to use cookie to save menu state.