I'm having an IE (8 and up) css problem with a pretty typical list-based drop down menu generated in Wordpress. This is not a javascript issue.
If someone could please look here: http://jchmusic.com
Click on the 'MORE' link at right. The drop down sub menu appears. So far, so good.
But in IE, when one moves the mouse off the 'MORE' to the drop down (which is a ul) the drop down can't be reached. In Chrome, FF, Safari it works fine.
However, if I add a background color to the ul which encompasses the drop down then the hover 'works' fine.
Any suggested workaround?
<li id="menu-item-3570" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home">
More…
<ul class="sub-menu">
<li id="menu-item-1835" class="menu-item menu-item-type-post_type menu-item-object-page">Downloads
</li>
<li id="menu-item-1873" class="menu-item menu-item-type-post_type menu-item-object-page">
<li id="menu-item-1849" class="menu-item menu-item-type-post_type menu-item-object-page">
<li id="menu-item-2025" class="menu-item menu-item-type-post_type menu-item-object-page">
<li id="menu-item-3585" class="menu-item menu-item-type-post_type menu-item-object-page">
</ul>
</li>
Elements with a transparent background are also "transparent" to mouse events in IE.
You can fix this by using an "almost-but-not-quite-transparent" background (rgba(0,0,0,0.01)), but this'll only work in recent versions. The alternative is to just have a solid-colour background.
Related
It is my understanding that any CSS selector with ::name is a pseudo-class and needs to be used as part of a tag selector, ex. li::marker. I have recently run into some code that has ::marker outside the tag.
Here is how it shows in Page View
<li id="menu-item-435" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-435">Latest Post</li>
Here is how it shows in the Firefox Inspector
<li id="menu-item-435" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-435">::markerLatest Post</li>
What is the difference?
I'm trying to use the wordpress custom menu to allow users to link their social media sites easily. So far I set up a wordpress menu "Social Icons" in my functions.php theme file and am using the custom menu widget to place it on the site. This is the html wordpress generated for the menu and widget
<div class="menu-social-icons-container">
<ul id="menu-social-icons" class="menu">
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73">Facebook</li>
<li id="menu-item-74" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74">Twitter</li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76">Instagram</li>
<li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-77">Youtube</li>
</ul>
</div>
I'm assuming the id "menu-social-icons" is due to either the theme location or menu name I created so IF the id is based upon that I could use this method to allow users to link up their social media icons. Will the id "menu-social-icons" be the same for any user that uses this theme, or is it a generated id like "menu-item-73" in the li.
If it will be the same, I am trying to style the nth child a elements to backgrounds of the icons but I'm confused as to which selectors to use in css because for example if I use
ul#menu-social-icons li a:link:nth-child(1){
background-img:url(images/facebook.png);
}
ul#menu-social-icons li a:link:nth-child(2){
background-img:url(images/twitter.png);
}
ect
I don't get anything
What selectors do I need to use to style achieve this?
consider to this example http://jsfiddle.net/jogesh_pi/d85Ae/
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
CSS
ul li:nth-child(1) a{ color: #ff0000; }
ul li:nth-child(2) a{ color: green; }
ul li:nth-child(3) a{ color: #ff9900; }
Note: Make sure about the path of images that you want to implement on the menus
I'm using Wordpress and i'm trying to have my navigation display a color for that active navigation link IE a blue link on home when home page selected and a red link on services page when services page clicked.
I'm trying to do this using CSS. The navigation code is below:
<div id="menu-secondary" class="site-navigation menu-container" role="navigation">
<span class="menu-toggle">Menu</span>
<div class="wrap">
<div class="menu">
<ul id="menu-secondary-items" class="nav-menu sf-js-enabled">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
Home
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
Welcome
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
Services
</li>
Here is CSS that makes each current active link be yellow.
#menu-secondary li.current-menu-item a {
color: #FFCC33;
}
but i want each page to show a different color.
I'm thinking of something like this, but its not working
#menu-secondary li. menu-item-18{
color: #0F0;
}
You can target a div with an ID and Class active at the same time like so:
#menu-secondary #menu-item-18.current-menu-item a{
color: #0F0;
}
As a sidenote, avoid using the li at the start when using an ID , like:
li.#menu-item-18.current-menu-item
as you're just slowing things down (an ID is already unique so doesn't need the li specified).
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.
I've created a site where I built a 3-level drop-down menu. Everything is working great in every browser I've tested in so far except for IE8. In IE8, when you hover over the highest level buttons, the drop-down menus appear. When you mouse over any secondary pages that have children under then, the menus SHOULD appear to the right of the parent page, and it does this in Chrome, Firefox, Safari, and IE9+.
I was hoping someone could take a look at the site and let me know if you've got any ideas.
http://sightlines.quantumdynamix.net/
Hover over "Who We Are" and "Our Team" should have a tertiary level menu, but it does not display in IE8.
Here is the CSS that displays the tertiary level menu:
#mainNavContainer .sub-menu li:hover > div > .sub-menu {
display: block;
}
And here is the menu code (trimmed down since you wouldn't need the entire menu for this). Sorry for the large amount of classes, but it is a Wordpress menu.
<div id="mainNavContainer">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72">
Who We Are
<div class="sub-menu-container">
<ul class="sub-menu">
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
Our Story
</li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74">
Our Team
<div class="sub-menu-container">
<ul class="sub-menu">
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
Executive Team
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
Leadership Team
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Here is a screenshot of what is happening. The blue box is generated from the Dev Tools in IE8, indicating that the browser does know where the sub-menu should be, but it does not display when I hover over Our Team.
This CSS was line was causing the error:
filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444);
When I viewed the site in IE8's dev tools, that line read as follows:
filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444); BORDER-LEFT: #d5d5d5 1px solid
Now that I've made changes to this, I cannot get the full list to come back, but originally many other styles besides the BORDER-LEFT appears in the filter line.
I'm unsure what in the filter was causing the error, but we decided to nix the drop shadow for ie8 or older users, and so removing the filter line fixed everything.
I cannot use Spoon.net — it is a paid service — but try this:
#mainNavContainer .sub-menu li:hover > div > .sub-menu:hover {
display: block;
}
And please, try to give a picture of your problem.