.current-menu-item functionality to make hover state and active state the same?

You can do that with CSS in your child theme.

The problem is that the hover state shows a light grey background but the active state is just like the unselected tabs. We want the the active state to be like the hover state.

It’s clear that the CSS is intended to make make the active state like the hover state, but on my site this doesn’t work. The active state fails to select a class in the output for which the background-color property can be set.

I got this working last night by changing the CSS code for the active state of the tab:

The original code is:

.ui-tabs ul.ui-tabs-nav li a:hover,
.ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a {
	background-color: #f5f5f5;
	color: #333;

But “.ui-tabs-selected” doesn’t seem to point to any CSS class in the widget output. By inspecting the plugin on the rendered page I was able to identify the class “.ui-tabs-active”, which does work. My working CSS code is now:

.ui-tabs ul.ui-tabs-nav li a:hover,
.ui-tabs ul.ui-tabs-nav li.ui-tabs-active a {
	background-color: #f5f5f5;
	color: #333;

But I have one further question. The selected tab shows a dotted border around it. This is distracting and superfluous, since the widget now shows the selected tab by the color of the background. A border around the tab is overkill and is inconsistent with the rest of my site design. I tried to undo the border through CSS but failed:

.ui-tabs ul.ui-tabs-nav li a:hover,
.ui-tabs ul.ui-tabs-nav li.ui-tabs-active a {
	background-color: #f5f5f5;
	color: #333;
	border: none;

Setting the border property to “none” does not work. I still get the border. Any ideas for how to remove it?

I figured it out. In order for Chrome’s element inspector to display the CSS for the active tab, the mouse can’t still be hovering over it, otherwise it gives the hover state. So I didn’t notice last night that the there was an outline set for the tab in the active state. (I guess that’s what sleep is for.)

I traced this property back to the “Baseline normalize” section of the CSS code for my theme (StudioPress Minimum Pro), which is just one long string of CSS. In this string there is a property for the “a:focus” tag that sets the outline to “thin dotted.”

a:focus{outline:thin dotted}a:active,a:hover{outline:0}

So the CSS I want for the widget is:

.ui-tabs ul.ui-tabs-nav li a:hover,
.ui-tabs ul.ui-tabs-nav li.ui-tabs-active a {
	background-color: #f5f5f5;
	color: #333;
	outline: none;

CSS outlines go outside the border, so changing the border property doesn’t affect them.

I’m not entirely sure why a baseline CSS would want an outline but there you go. Mystery solved.