OnMouseOver design in CSS List Menu web part: CSS-based solution
I don't get any rollovers in your CSS List Menu from the "Menu item design - On mouse over" section of the pages. For example: I have images in place for it, but no rollovers occur.
The CSS List Menu web part does not apply On Mouse Over design of menu items (contrary to e.g. Tab menu).
a. Exchange the web part
The easiest way for you would be to exchange the CSS List Menu with Tab menu. The first one does not reflect the mouse over action whilst the CMS Menu (Tab menu) changes the styles according mouse over action.
b. CSS-based soluton
1. Assign a custom CSS class to all the menu items that will require an image rollover.
2. In the CSS, take advantage of your new selectors by adding:
ul#menuElem li.[class name] a:hover {
background: url(/App_Themes/[replace with the path to the image]) top right no-repeat;
}
3. Be sure to change the alignment in the CSS to match the navigation layout you’re using. Then, you can use one big CSS entry to cover all your nav items:
ul#menuElem li. [clas sname] a:hover img, ul#menuElem li. [another class name] a:hover img {
display: none;
}
4. This will cause the normal image to disappear, and the :hover state will activate for the link, causing the image to change to the new one. Now, we’ll need to make sure the links will lay out on the page properly, so we need to make them the same size as the image used for the rollover state:
ul#menuElem a {
text-decoration: none;
font: normal normal normal 10px Georgia, serif;
line-height: 22px;
display: block;
width: 170px;
height: 20px;
}
5. Change the attributes in the CSS to match the image dimensions and fonts you’re using. You’re done! Pure CSS based image rollovers with no Javascript or variable references!
Please note that here are only used CSS for vertical navigation layouts, but you could do the same thing for horizontal layouts.
Applies to: Kentico CMS 3.x and later