[Resolved] Still having issues styling menus

[Author]

Posts

[TonyB4998]

I am trying to get hovering to work on my horizontal menu. I managed to finally get them colored and styled the way I want them to be, but I cannot seem to get my CSS selectors down to the point that it is actually selecting the correct elements, or having an effect on them. Without the following code, when I hover or focus on a menu item, they turn solid white. With the code, they just do nothing. I have to be selecting the appropriate thing to be canceling out wherever the white change is coming from... but why are my changes not showing... I am so frustrated by the perplexity of some of this Bootstrap 3 theming. I understand why the files are minified, but why can we not have them unminified to work with and be able to generate minified copies when we are ready to deploy them. It is impossible to really find anything in these minified files.

All I am trying to do is retain my color, and raise the opacity to 1.0. In Firefox, if I right click the node in the inspector, and activate hover, it does exactly what I want. If I mouse over that element in any browser...nothing.

I would love to just start with a completely blank "Layouts" supported theme and go from there so I was not battling other people's CSS striking from behind the scenes.

.ddl-nav > li#menu-item-57 > a:hover, .ddl-nav > li#menu-item-57 > a:focus {
	opacity: 1.0;
	background: #20cbd4;
}

.ddl-nav > li#menu-item-58 > a:hover, .ddl-nav > li#menu-item-58 > a:focus {
	opacity: 1.0;
	background:#592c82;
}

.ddl-nav > li#menu-item-59 > a:hover, .ddl-nav > li#menu-item-59 > a:focus {
	opacity: 1.0;
	background:#c98924;
}

.ddl-nav > li#menu-item-61 > a:hover, .ddl-nav > li#menu-item-61 > a:focus {
	opacity: 1.0;
	background:#2d892d;
}

.ddl-nav > li#menu-item-62 > a:hover, .ddl-nav > li#menu-item-62 > a:focus {
	opacity: 1.0;
	background:#2d5389;
}

.ddl-nav > li#menu-item-63 > a:hover, .ddl-nav > li#menu-item-63 > a:focus {
	opacity: 1.0;
	background:#892d3c;
}

#menu-item-57 {
	vertical-align: middle;
	font-size: 11pt;
	color: white;
	font-weight: 0500;
	background:#20cbd4;
	width: 170px;
	opacity: 0.7;
}

#menu-item-58 {
	font-size: 11pt;
	color: white;
	font-weight: 0500;
	vertical-align: middle;
	background:#592c82;
	width: 170px;
	opacity: 0.7;
}

#menu-item-59 {
	font-size: 11pt;
	color: white;
	font-weight: 0500;
	vertical-align: middle;
	background:#c98924;
	width: 170px;
	opacity: 0.7;
}

#menu-item-61 {
	font-size: 11pt;
	color: white;
	font-weight: 0500;
	vertical-align: middle;
	background:#2d892d;
	width: 170px;
	opacity: 0.7;
}

#menu-item-62 {
	font-size: 11pt;
	color: white;
	font-weight: 0500;
	vertical-align: middle;
	background:#2d5389;
	width: 170px;
	opacity: 0.7;
}

#menu-item-63 {
	font-size: 11pt;
	color: white;
	font-weight: 0500;
	vertical-align: middle;
	background:#892d3c;
	width: 170px;
	opacity: 0.7;
}

[TonyB4998]

resolved by dropping my selectors back to this:

.ddl-nav > #menu-item-63:hover, .ddl-nav > #menu-item-63:focus

and by doing this to get rid of the default white/light gray:

.ddl-nav > li > a:hover, .ddl-nav > li > a:focus {
	text-decoration: none;
	background-color: transparent;
}