I just discovered that the CSS dropdown menus on this site do not work in Internet Explorer. Not at all, absolutely nothing shows.
The menus work just fine in Firefox, and in Android
Here is the site: http://anlea.org
I've tried a number of fixes, but nothing makes the dropdown menus show up.
Any (simple!) solutions would be greatly appreciated
IE doesn't always play nice with li:hover which is what your CSS menu appears to be relying on. The accepted answer to this question may be of help: IE8 does not hover when using an li with position:absolute
You are not displaying the nested ul on hover, just the li's inside the nested ul. Try adding this:
.main_menu > ul > li:hover > ul {
display: block;
}
also i would advise you to work with child selectors so something like this:
.main_menu ul li /* this would also apply to the submenu's, you overwrite them later in your code */
would become
.main_menu > ul > li /* this will only apply to the top level menu */
for nested menu's. This should not brake the code, but will keep you much more in control and avoid unexpected results.
if you want all li to have the same background for example, both top level and nested, you could still use
.main_menu li
I'm using IE9 to view the site and the menu works fine, only after I switch back to IE9 Standard Mode.
Your site defaults to the Quirks Mode in IE9.
You can refer to here: http://blog.timolthof.com/disable-quirks-mode/ to try to disable Quirks Mode.
height and width of the drop down should be given in px not in % some versions IE does not support width and height in %
Related
See here: codepen.io/arnaudfabs/pen/waXWJLenter code here
I am using Zurb Foundation 5 to build a mega menu. I need the item name and its price on the same line for each product.
I added a span float right for the price and it shows well on Chrome and IE.
In Firefox, the price is going out of the li tag and is not even clickable.
See pictures:
Good:
Bad:
Any thoughts on what to do?? Thanks!
Removing the style white-space: nowrap; on .top-bar-section .dropdown li a seems to fix your problem in FireFox.
or just override it like this:
.top-bar-section .dropdown li a{
white-space: normal;
}
I'll try to explain this as best I can - I'm playing with a CSS vertical menu, take a look at it here:
http://codepen.io/jgclifton/pen/JIfhy
My question is, how do I ensure that the links keep their hover color when navigating to the submenu of that item.
I hope that makes sense, I tried using a:active but it seemed to have no effect.
Set the color on the hover state of the li:
.menu-side-menu-container li:hover > a
{
#FFFFFF;
}
Live Demo: http://jsfiddle.net/xxf9B/1
I'm not able to get CSS property "margin-top" to work consistently across all broswers (IE, FireFox, Chrome).
.navmenu { list-style: none; padding: 0px; margin-top:16px; }
This works fine in FireFox and Chrome, but does nothing in Internet Explorer.
An example can be seen here : http://www.pogocheats.net/template.php
Nav CSS can be found at : http://www.pogocheats.net/styles/test.css (starting at line : 276)
Is there an easy fix for this?
Rules for list-based menus:
1) Use a CSS reset
2) Don't style the LI, other than position: float: or display:
3) Put all styling on the A-tag and use display:block
4) Clear your floats (if using them)
See my list tutorial: preview.moveable.com/JM/ilovelists
On a clients website (HolidayHomes.ca) the dropdown menu doesn't appear to be working in Internet Explorer, not really sure how to go about fixing this..
It appears to have something to do with text-indent on the ul li.inner class. It was grabbing text-indent: -2000px; from #nav li, all of my submenu li's have the class .inner
I've tried adding text-indent: 0px !important; to ul li.inner, but it doesn't seem to be working? However I've noticed if I remove the text-indent from #nav li completely, it works fine?
Help is appreciated! I'm pulling a LOT of hair out over this.. and I'd rather fix it then have to install a new dropdown menu script completely... ugh.
Which flavor of IE is having a problem. In IE 8 and up you can turn on the developer toolbar and walk through the code (similar to firebug in firefox)
just pulled up the site in IE 8 and it appears to be working ok. What is the problem you're having?
After a few more hours of troubleshooting, I was able to fix this error by removing display: inline; from my #nav li ul element. :)
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.