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.


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 {


#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 {


#menu > ul > li.hover > a {

and define new CSS styles for

#menu > ul > li:hover > a

    CSS Howto..

    How to place an image properly with CSS

    how to allow transform in htmlpurifier

    html - how to make images stay on certain part of background

    How do you make a nav bar “sticky”?

    How to - dynamically - change link text color in jQuery Mobile?

    How to write css for specific div selection like before after

    How to create offer tag with css and pass value to it

    How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

    How to prevent CSS declaration dropped errors cross browser?

    How does the DiggBar work?

    How to display a list in two rows?

    How do I put a border around a tr tag?

    how to find a class and apply a style with jquery?

    How to remove pseudo-element styles from the first element?

    Why is the icon shown in some browsers while other it is not

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to draw grid around irregularly arranged web elements?

    how to use css sprites? [closed]

    How to add a z-index to separate image from div border

    How to configure CSS with Spring MVC and Tiles

    jQuery increase box to show overflow contents

    How to make menu fold like paper using CSS?

    How to skew image with CSS?

    custom radio button show value inside

    How to structure css using BEM methodology for adaptive web pages?

    CSS media query height greater than width and visa versa (or how to imitate with JavaScript)

    How hard is it to make an expanding tab in CSS?

    How to hide header on scroll down, show on scroll up like linkedin menu

    CSS how to change text color of disabled option inside a select?

    How can I make a fluid width, fluid height, fixed header table with jQuery?