menu and sub menu (drop down) styling questions

jvmalotki · May 2017

Hi guys,

I am trying to style the menu of

http://58224982.swh.strato-hosting.eu

I would like to achieve the following.

- in the dropdown the link should be underlined on hover like on the main menu

- the dropdown menu items are the same hight as the main menu, can that be made smaller? Or can the text at least be vertically centered in the dropdown box?

- how can I turn off the highlighting for main menu items that have submenu items?

- how can I turn off the highlighting of main menu items with individual links on the same page?

I would like to only have the page the user is on highlighted.

Cheers,

Jörg

Bryan · May 2017

Hi,
The last two points are not possiblem sorry
the first two will be done with this css

#Top_bar .menu li ul {
		top: 55px !important;
}
#Top_bar .menu .sub-menu li a {
	
	height: 25px !important;
}


#Top_bar .menu li ul li a:hover span {
	
	text-decoration: underline;
}

thanks

jvmalotki · May 2017

Hi guys,

thanks for the quick response.

I needed to not use this one:

#Top_bar .menu li ul li {

top: 55px !important;

}

That screwed everything up, not sure why. But the rest worked and does what I needed.

Can I turn of highlighting altogether? Or have it only on when the mouse hovers?

Cheers,

Jörg

Bryan · May 2017

Only when mouse hovers.

jvmalotki · May 2017

That would be great, I would like to try it out. How can I set it up?

Custom CSS or a setting that I haven't found?

Cheers,

Jörg

Bryan · May 2017

Can you please explain what do you mean? I do not understand what should happen on hover. Attach a screenshot with description if possible.
thanks

jvmalotki · May 2017

I was refering to my previous question:

"Can I turn of highlighting altogether? Or have it only on when the mouse hovers?"

Which you answered by:

"Only when mouse hovers."

So, can I have the links in the menu only highlighted on mouse hover?

Right now, for example, the home menu link is highlighted while being on the home page.

Cheers,

Jörg

Bryan · May 2017

Try this css

#Top_bar .menu > li.current-menu-item > a, #Top_bar .menu > li.current_page_item > a {
	color:black !important;
}
#Top_bar .menu > li.current-menu-item a::after, #Top_bar .menu > li.current_page_item a::after {
	background:transparent !important;
}
#Top_bar .menu > li.current-menu-ancestor > a, #Top_bar .menu > li.current_page_ancestor > a {
	color:black !important;
}
#Top_bar .menu > li.current-menu-ancestor a::after, #Top_bar .menu > li.current_page_ancestor a::after {
	background:transparent !important;
}

menu and sub menu (drop down) styling questions

Comments