Question

I NEED A CSS MENU WITH MENU AND SUBMENU IN 2 HORIZONTAL LINES:
Hovering on the menu, the sub menu will load on the second line.
I got a nice code for such menu: HERE.

Now it’s working as if-
– I hover on the MENU, if there is SUB MENU, they will appear
– I take off my mouse from the MENU, the SUB MENU will disappear

Though the color combination is not good, but the functionality is fine as I desired them to be as Horizontal in sub menu.

DESIRED MODIFICATION

Now I need the menu to be modified a bit, then if-
– I hover on the MENU, if there is SUB MENU, they will appear
– I take off my mouse from the MENU, the SUB MENU will disappear
– I click on the MENU, then the MENU will be selected and the specific page will load, and the SUB MENU will appear and be visible where they designated to
– I click on the SUB MENU, then the SUB MENU will be selected and the specific page will load and the SUB MENU will be visible too

It should be like: THIS MENU

Where the modifications to be done?
I’ve tried:

.menu li:active > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 25px;
  margin: 40px 0 0 0;
  background: #315299; 
}

But it’s not working. 🙁

P.S.: I’m using the menu in a WordPress site.

Answer 1

Here is the solution I made at last. And it’s WordPress-specific:

.menu li.current-menu-item > ul,
.menu li.current-menu-parent > ul,
.menu > li > ul > li.current-menu-item > ul{
  position: absolute;
  display: block;
  width: 960px;
  height: 25px;
  margin: 23px 0 0 0;
  background: #E5E5E5; 
}

.menu li.current-menu-item > ul li a,
.menu li.current-menu-parent > ul li a,
.menu > li > ul > li.current-menu-item > ul li a{
  float: left;
  color: #000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 0;
  background: #E5E5E5; 
}