how to set menu to activate always hover effect on [closed]

Tags: html,css,design,menu,opencart

Problem :

How to set menu to always have the hover effect on without going over it with your mouse. I have a design issue as seen in the link. I really love the design but i cant fix this issue by changing the image.

So if you look in the image you will see a white background around the text, now it is readable. I would like it this way for all buttons even when the mouse is not hovering over the button.

Bonus fix: It would be nice to then maybe implement another hover.

Extra info: Reason i need to do fix this in the code is because i am working with opencart and want the client to keep the option of adding, removing or moving links in the menu.

LINK: http://imgur.com/owmuTyE

I think this can be solved by using CSS but i cant figure out the way of approaching this problem.

Edit: instead of downvoting why not explain an approach, i do not neccesarely need code. But here is the code, its a simple opencart menu. Apparantly i dont know how to do this and am obviously looking for an "approach" or something like: #menu { hover: on } , a function i do not know yet.

#menu {
    border-bottom: 1px solid #000000;
    height: 50px;
    margin-bottom: 15px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    padding: 0px 5px;
    background-image: url(../../../../../../geschenkenpakket/repakkettenuitgelichtenbtwvoltooing/menu/menu.png);

#menu > ul > li:hover > a {
    background: #000000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

---

Solution :

Not sure whether this will solve the problem, but certain element states could be also set by classes. This :hover state therefore could be also simulated by adding a class hover to that <li> element and defining this class behavior in CSS.

In your case you could do this - change

#menu > ul > li:hover > a {

into

#menu > ul > li:hover > a,
#menu > ul > li.hover > a {

and add a class hover to the <li> element you want to have the hover on it:

<li class="hover">

If you'd like to have a different hover behavior, then just change

#menu > ul > li:hover > a {

into

#menu > ul > li.hover > a {

and define new CSS styles for

#menu > ul > li:hover > a