I have a dropdown menu that I am using and can't quite get it to work.
<ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
<li>Home</li>
<a href="http://www.example.com/products/index.php"><li class="dir">Products
<ul>
<li class="dir">Buckyballs</li>
<li class="dir">Calico Critters</li>
<li class="dir">Games</li>
<li class="dir">Magnetics</li>
<li class="dir">Playmobil</li>
<li class="dir">Quercetti</li>
</ul>
</li></a>
<li>Calendar</li>
...
</ul>
The menu is white with red text and then changes when I hover over them from red background to white text. However, when I hover over Products, the whole thing goes red when I hover over the li tag, and the text only goes white when I hover over it. But when I hover over what drops down, it's all red again. See the Navigation bar at redballoontoystore.com . Any help?
Add
.dir:hover a {
color: white!important;
}
to your css code. The !important is probably optional if you place the rule in the right place.
I'm pretty sure that if you switch the nesting of list item elements with your anchor tags, this will fix your issue:
<li class="dir">Buckyballs</li>
Related
This sounds like it might be a Wordpress question, but I was told at the Worpress Exchange that it's a generic CSS question and that that's off-topic for the Wordpress Exchange site. Before someone closes this as off-topic for Stack Overflow, can you look at it long enough to determine if it's just a generic CSS question? (The theme I'm using doesn't provide support for child theme development either, so I'm out of routes to get help.)
I'm trying to change the default menu appearance (in Wordpress using the Genesis theme, but again, try to hold off the assumption this is anything beyond generic CSS before someone looks at it long enough to determine that). For instance, by default the menu shows black text on a white background. I'd like to change that to white text on a green background. I looked at the markup in my browser's developer's tools window. (The markup is at the end of this post.)
First I made these changes to the main button menus. It wasn't hard to come up with this.
li.menu-item a {
color: #fff;
background-color: #18ddb1;
}
But this didn't change the background of the sub-menus (the ones that drop down when you hover over the main menu buttons).
I tried using the above CSS with other selectors, like .sub-menu li, .sub-menu a, and a number of other combinations, but nothing changed the background color of the drop-down sub-menus. What am I doing wrong?
<nav id="genesis-nav-primary"
class="nav-primary genesis-responsive-menu">
<div class="wrap">
<ul id="menu-mine"
class="menu genesis-nav-menu menu-primary js-superfish sf-js-enabled
sf-arrows"
style="touch-action: pan-y;">
<li id="menu-item-??"
class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-??">
<a class="sf-with-ul" href="...">
<span itemprop="name"> ...menu item text... </span>
</a>
<button class="sub-menu-toggle>
</button>
<ul class="sub-menu">
<li id="menu-item-??" class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-??">
<a href="...">
<span> .. menu item text .. </span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
On 3 buttons at the end of each of my post page, I would like to put a hover color when people are clicking on one of them. Here is an example of the 3 buttons:
In my PHP file, these 3 buttons are located here: Post Page
<ul class="tabnav-widget ui-tabs-nav">
<li class="ui-tabs-selected">
<a class="" href="#tab1-widget">written by</a>
</li>
<li>
<a class="" href="#tab3-widget">Related Posts</a>
</li>
<li class="">
<a class="" href="#tab4-widget">In this Category</a>
</li>
</ul>
But I don't know what CSS class I have to modify and which CSS code to add in order to maintain a hovering color when clicking on one of the three buttons.
I thank you in advance, any help is appreciated.
Change this in the CSS
.tabnav li:hover, .tabnav-widget li:hover {
background: #color;
}
Additionally, if you would like to change the color when the button is pressed down, use :active.
Add something like this:
.tabnav li:active, .tabnav-widget li:active {
background: #color;
}
I want to keep hover color on parent list, when child list is hovered.
Here's example where second menu has submenus and when you hover over submenus, color of main menu is gone.
http://jsfiddle.net/ya8ga/
Thanks
HTML
<div id="menu2">
<ul>
<li class="l1">Home</li>
<li class="l2 dropDown">Hotel
<ul class="sub1">
<li class="l1">Hotel Sub 1</li>
<li class="l2">Hotel Sub 2
</li>
</ul>
change this:
#menu2 li a:hover{background:#89E00C; color:#2D1C13;}
to this:
#menu2 li:hover{background:#89E00C; color:#2D1C13;}
I am using superfish menu and I am having a problem which I can't figure out although I'm sure the answer is probably obvious and I'm just missing it...
Basically my a elements are not expanding to fill their containing li elements, even though the a elements are set to display:block
Please see example here:
http://www.spiritlevel.co.uk/fpatest/index_hover2.html
css is here:
http://www.spiritlevel.co.uk/fpatest/css/superfish.css
http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css
Here's the relevant HTML
<div id="homenav">
<ul id="nav" class="sf-menu sf-vertical">
<li id="company">COMPANY
<ul id="companymenu">
<li id="profilelink">Profile</li>
<li id="activitylink">Activity</li>
<li id="strategylink">Strategy</li>
<li id="teamlink">Team</li>
<li id="financelink">Finance & Governance</li>
</ul>
</li>
<li id="development">DEVELOPMENT
<ul id="developmentmenu">
<li id="partnerslink">Development Partners</li>
<li id="sociallink">Social Responsibility</li>
</ul>
</li>
<li id="projects">PROJECTS</li>
<li id="contact">CONTACT US</li>
</ul>
</div><!--end homenav -->
A second issue I am having is how to get the second level menu to appear in the same place for each first level link. If you hover over company then it's 2nd level nav appears in the right place. But if you hover over development, it appears 1 row too low - i would like it to appear in the same place as the company menu did
Can anyone help me out with this please? thanks
Remove padding-right from .sf-menu a.sf-with-ul (superfish.css line-93) and add width 100% or 140px (home.css line 75) in #nav li a. I've tested it on your site and works fine. Tested in chrome and ff.
The reason your links aren't expanding to fill the box is because they are floated left. Remove that and you should be fine.
I'd like to have a logo (say it's square for simplicity) with 4 links that pop up when it is moused over. These would be positioned Above, Below and to the sides of the menu/logo.
Is this achievable with only CSS? Any suggestions for how one might go about doing it?
Semantically I'd like to order them with in the page something like:
<ul><li>Logo
<ul><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
But have them show up on the page like:
North
West Logo East
South
Yes.
HTML
<ul><li>Logo
<ul id="map"><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
CSS
#map li a {
display: none;
}
#map li:hover a {
display: block;
}
Note that IE6 won't fire the :hover pseudo class on anything but links (you might want to change your markup).
Also simply use absolute positioning to position the popups.
See the general idea here.