How do I use CSS to make submenu appear on mouse hover?

Classic Themes
1

Hi,

I am new to Rapidweaver, CSS etc. I am using the tesla theme. I would like to use CSS (if possible) to make the sub navigation bar appear when the mouse is hovered over the top level navigation bar, rather than having to click on it.

In addition, is it possible to use CSS to make the sub-navigation bar always visible - i.e. before it is clicked on or hovered over?

Thanks for your help,

Oliver

2

Hi Oliver,
Don’t think you can do what you are asking with CSS. Telsa is a responsive theme and is using javaScript to work the navigation for smaller sizes. Hover effects don’t work on mobile devices; touch screens don’t have a hover function.

You could make the sub-nav bar show all the time, it would only show the the sub menu items for the current active page.
If the page does not have a sub-page then the blank (gray) bar would appear.

#sub_navigation_bar {
	display: block !important;
}
3 Likes
3

Hi Doug,

Thanks for the information. I have added your code and it works as expected. I’ll look into alternative themese.

Oliver