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 highlight an image after selection using css or jquery? [closed]

    How to add a id tag in php output?

    How to get alternate colors div with pure css and with IE 7 support?

    how to avoid overlapping of text

    How to make sure Text always stays on top of Image (even when resizing)?

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How am I supposed to change the Bootstrap CSS properties in a new Yeoman project?

    pure css horizontal accordion: how to have panel open on load

    How to remove CSS underline?

    How should I modify this code so it works with severel id's?

    How to combine multiple CSS declarations to shorthand

    How can i use ng-class variable from controller?

    How to get element by its partial class name CSS

    CSS Transitions using AngularJS ng-show

    How to highlight a window in JavaFX?

    How to make Internet Explorer 8 to support nth child() CSS element?

    How to change this table layout to a css layout?

    How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?

    How do I fit text into footer margins

    How to stick to bottom on layout by using CSS?

    How to pass to next line that cutted elements in a list?

    how to connect circles with lines without ovelaping

    How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

    How to create a skin for mediaelement.js?

    How to show the same font which in photoshop on my webpage?

    How to style CGI python with CSS?

    How to specify styles for h:panelgrid in jsf

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    How do I add a css class to an Div element in JQuery?

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?