How to make a CSS menu to remain visible after a child has been clicked on


Tags: html,css,css3,menubar,submenu

Problem :

I have this CSS:

#menuBar {
  /*width: 960px;*/
  height: 35px;
  clear: both;
}

ul#nav {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #0068b4;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  line-height: 35px;
  color: #ffffff;
  text-decoration: none;
  margin: 0;
  padding: 0 30px;
  background-color: #0068b4;
}

/* APPLIES THE ACTIVE STATE TO PARENT*/
ul#nav .currentParent a, ul#nav li:hover > a  {
  color: #ffffff;
  text-decoration: none;
  background: #005899;
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 97%;
  height: 35px;
  margin: 35px 0 0 0;
  background-color: #e0e0e0;
}

ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

/* APPLIES THE ACTIVE STATE TO CHILD*/
ul#nav li ul li.currentChild a, ul#nav li:hover > ul li a:hover {
  color: #000000;
  text-decoration: none;
  background-color: #afafaf;
}

And this HTML:

<div id="menuBar">
    <ul id="nav">
    <li><a href="javascript: void;">Menu 1</a>
        <ul>
            <li><a href="menu1submenuitem1.html">Menu 1 Submenu item 1</a></li>
            <li><a href="menu1submenuitem2.html">Menu 1 Submenu item 2</a></li>
            <li><a href="menu1submenuitem3.html">Menu 1 Submenu item 3</a></li>
        </ul>
    </li>
    <li><a href="javascript: void;">Menu 2</a>
        <ul>
            <li><a href="menu2submenuitem1.html">Menu 2 Submenu item 1</a></li>
            <li><a href="menu2submenuitem2.html">Menu 2 Submenu item 2</a></li>
        </ul>
    </li>
    <li class="currentParent"><a href="javascript: void;">Menu 3</a>
        <ul>
            <li><a href="menu3submenuitem1.html">Menu 3 Submenu item 1</a></li>
            <li class="currentChild"><a href="menu3submenuitem2.html">Menu 3 Submenu item 2</a></li>
            <li><a href="menu3submenuitem3.html">Menu 3 Submenu item 3</a></li>
        </ul>
    </li>   
    </ul>
</div>

I'm using this to display a two level horizontal menu. What I want to achieve is that when an option from the second level is clicked I want the parent and the children itself to remain highlighted. To do this I'm actually building the HTML for the menu in the code behind of my ASP.net page and using the styles: currentParent and currentChild to highlight them. That's working, what I've not been able to figure out is how to make the second level that contains the child that was clicked to stay visible. I've tried by adding display: none in a lot of places, but nothing is working. I'm wondering if somebody can help me with this and give some advise of the modifications I need to add to the CSS to achieve this?

EDIT 1:

I've completed the code and reviewed that it's working (you can see it here: http://jsfiddle.net/cesarvinas/ZQWe7/). You can see in the HTML code that I've applied the class current Parent to parent menu Menu 3 and the class currentChild to submenu item Menu 3 Submenu item 2. With this, the parent and child are now highlighted. What I want in addition is that the row that contains the submenu items (the gray one): Menu 3 Submenu item 1, Menu 3 Submenu item 2, and Menu 3 Submenu item 3 remains visible.

As I explained in the main post, I have added code to the code behind of the ASP .net page to build the HTML up and assign the CSS classes when necessary.

Is there a way to have a CSS class that I can assign to the parent <li> (in the example, the Menu 3 parent) to keep its children visible?

EDIT 2

Thanks to the help I've received here, specially from 3dgoo, this is almost done. I've updated the example here: http://jsfiddle.net/cesarvinas/ZQWe7/5/. However, to make the submenu items that are not current to remain silver (and not blue as in 3dgoo example) I've had to create one more CSS class ".notselected" that I'm applying to those submenu items that are not selected. My question is: is there a way to achieve the same without having to add an extra CSS class? This is what I've done:

ul#nav li ul li.notselected a,
ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

and the HTML:

<li class="currentParent"><a href="#">Menu 3</a>
    <ul>
        <li class="notselected"><a href="#">Menu 3 Submenu item 1</a></li>
        <li class="currentChild"><a href="#">Menu 3 Submenu item 2</a></li>
        <li class="notselected"><a href="#">Menu 3 Submenu item 3</a></li>
    </ul>
</li>   

I've tried with this in the CSS:

ul#nav li ul li a,
ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

and removing the class="notselected" from the HTML, but it doesn't work. Why is that?

Thanks.



Solution :

You can do this by using the following css selector ul#nav li.currentParent > ul like so:

CSS

...
ul#nav li.currentParent > ul, // Add this
ul#nav li:hover > ul {
    position: absolute;
    display: block;
    width: 97%;
    height: 35px;
    margin: 35px 0 0 0;
    background-color: #e0e0e0;
}
ul#nav li:hover > ul { // And add these three lines
    z-index: 10;
}
...

Demo


    CSS Howto..

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How to add a background image or theme through CSS?

    HTML/CSS/JS - How to change and image and text on click

    JQUERY - Tabs - show all div content in date-filter

    How to arrange this php if-statement which outputs ratings (good, great, exxelent, etc.)?

    css how to make an elements margin-bottom go to bottom of its container

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    How do I prevent jQuery from resetting all my CSS?

    How to spin css cube each after each [closed]

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How do I make two arrows in css

    How to remove spacing around in CSS? [duplicate]

    How do I to adjust the identation [closed]

    How to set focus int o next tab using tab key?

    How to Horizontally Scroll Images In Single Line

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina

    How to draw a half circle (border, outline only) [closed]

    How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

    css button with arrow… how to move arrow

    My footer keeps moving after updating other parts of my code. How do i fix this?

    How do you center a picture AND left align text that is touching said picture? HTML5

    How to cover box shadow?

    How does css scale transform affect document flow?

    How to write Text in css like show in images?

    How to create these boxes with CSS and HTML [closed]

    How to measure the amount of time an animation took place using JavaScript

    How to resize button without cutting the text inside

    how to make input and select look nice beside eachother with custom height?

    How to make sure CSS/JS files are not cached on browser? [duplicate]

    Angular 2 Materialize CSS Side-Nav Not Showing