CODEWITHSUNDEEP
htmlcsshoverdrop-down-menu
JakeIC
JakeIC

Reputation: 327

Menu Bar with Hover Sub-Categories?

I am trying to create a menu bar that has 2 levels of menus. The top menu is is the main one. Then the second level underneath it has some sub category items. Right now you need to click on the main menu first and load that page to get see the sub category menu items for that section because they are just hard coded into the page. I want to make it so that when you hover over the main menu items that it will load the sub menu.

Here is a jsFiddle of the navigation area and CSS

Here are a couple of screenshots of what it looks like

What would be my best method of accomplishing this. I'm not the most experienced but I got a pretty good grasp of HTML and CSS. Any help in the right direction would be great. Thanks.

Upvotes: 0

Views: 4840

Answers (3)

m-t
m-t

Reputation: 502

@ Aymeric answer is good one, its also called "2 level horizontal navigation in CSS" i often use them in my projects,

here is demo what u looking for

complete tutorial link

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

You can use a general sibling combinator (~) with your current structure to accomplish something like this. Use the hover pseudo element to toggle the display state (or visiblity) of the submenu.

http://jsfiddle.net/PWFGd/25/

/* on hover of mainmenu, find subnav and show it */
.mainMenu:hover ~ ul.subNav {
    display: block;
}

ul.subNav{
    display: none; /* hide submenu */
    font:normal 11px/12px Arial, Helvetica, sans-serif;
    padding:4px 0 0 0;
}

There are plenty of examples on the net of css based navigation menus. I think you might want to rethink your html structure and use one of those. Google

Upvotes: 0

Aymeric
Aymeric

Reputation: 1175

I've made this type of menu in the past, I've created a copy of the code you can find here http://jsfiddle.net/PWFGd/24/

The property you want to use is:

selector{
  display: none;
}

selector:hover{
  display: block;
}

Hope it helps.

Aymeric.

Upvotes: 2

Related Questions