Navigation - Disable Hover

Question

I am trying to change my navigation so that users have to click on it for it to appear. I believe the Magento default is that they just hover, at least that's what's happening on mine. In addition, when they click on the parent nav (level0) they will NOT be diverted to that page, but rather stay on the page they are on and just view the sub-categories.

I thought the coding was linked to /menu.js but using my debugger in FireFox it doesn't even look like this js is connected. I'm really struggling to find out what's causing it to hover to get it changed. There's a lot of .js files linked and none of them seem to be changing it.

I know this is probably too vague, but does anyone have any idea where I can start trying to solve this? I've been trying to fix it for days and it seems like it should be such a simple change.

UPDATE: Here is my CSS for nav-primary:

.nav-primary a {
color:#9a9a9a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.nav-primary a:hover {
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}
#header-account li a,
.nav-primary a.level0 {
width: 200px;
text-align: left;
color: #636363;
text-transform: uppercase;
line-height: 20px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
margin-left: 300px;
}
#header-account li:last-child a,
.nav-primary li.level0:last-child a.level0 {
border-bottom: 0;
}
.no-touch #header-account a:hover,
.no-touch .nav-primary a:hover {
text-decoration: none;
}
.nav-primary {
display: block;
padding-top: 30px;
}
.nav-primary a {
text-decoration: none;
position: relative;
display: block;
color: #636363;
line-height: 30px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
}
.nav-primary li {
position: relative;
}
.nav-primary li.level1 a {
margin-left: 350px;
}
.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
 display: block;
 }
.nav-primary li.level0 > a {
text-transform: uppercase;
}
/* ============================================ *
* Small Viewports - Accordion Style Menu
* ============================================ */
.nav-primary a.level0,
.nav-primary a {
 line-height: 25px;
 }
 .nav-primary li.level0 ul {
 display: none;
 }
.nav-primary li.level0 li {
 padding: 0 0 0 25px;
 }
 .nav-primary li.level1 a {
 padding: 0 15px 0 25px;
 }
.nav-primary li.parent > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid #cccccc;
 border-right: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
 .nav-primary li.parent.sub-menu-active > a:after,
 .nav-primary li.parent.menu-active > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-right: 5px solid transparent;
 border-left: 5px solid transparent;
 border-top: 5px solid #cccccc;
 border-bottom: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
.nav-primary li.menu-active > a,
.nav-primary li.sub-menu-active > a {
 color: #000;
 }
/* ============================================ *
 * Large Viewports - Dropdown Menu
 * ============================================ */
 .nav-primary li.menu-active > ul {
 display: block;
 }

This is the one that makes them either appear on hover or just be there:

.nav-primary li.level0 ul { display: none; } 

but i'm not sure what to change it to to go from hover to click?

Answer 1

The menu is indeed CSS driven, or at least it is in modern themes. I belive in older ones it was a javascript based approach.

Essentially, if you need to make use of Javascript you would be best to modify the menu template to build your own Javascript powered solution.

• user3217495: Thank you. I did not realize it was controlled through CSS. I couldn't find anything in my CSS but i'll look again. I also just updated my question regarding not diverting away from the page if you know how to solve that.
• Shaughn: Ahh damn, beat me to it.
• user3217495: Thank you to you both. Any idea what I would be looking for in the .CSS? Am looking now but I can't see anything that's triggering it

Answer 2

Im not a CSS pro, but im pretty sure the menu hover effect has something to do with some CSS trickery.

To point you in the right direction, open up the template:

app/design/frontend/[INTERFACE]/[THEME]/template/page/html/topmenu.phtml

and change the class "nav-primary" to something else. You should see menu without the hover effect. Thats just a test, so add it back and checkout the CSS in your skin folder for any pseudo hover effects for that CSS class.

• user3217495: Thank you. The test brought back all navigation items (parents and children) as just a single list (i.e. no parents and children)
• user3217495: Have updated my question with my CSS for nav-primary. Nothing seems to be triggering it though; perhaps you can see if you can see something I can't? Thank you in advance.
• user3217495: This is the one that makes them either appear on hover or just be there: .nav-primary li.level0 ul { display: none; } but i'm not sure what to change it to to go from hover to click?