My menu looks great in firefox and chrome. But IE. It dissapears. Anybody can help me ?
http://tinyurl.com/6yzd2jc
Here's my guess as to what's happening. Could be totally wrong.
The dropdown is supposed to disappear when the user mouses out of the link or the dropdown itself. But the problem is, there's a gap of a few pixels in between the link and the dropdown; this shows up in all browsers; I had trouble with it in Chrome before I even opened IE.
But when I did open it in IE, I saw that the links were even further away from the dropdown menus, so the problem was exacerbated.
If you go back to the CSS and make sure that there's no gap in between the link and the dropdown menu, does that fix the problem?
Edit to actually answer the question
There are a few CSS changes you could quickly make to fix the problem:
Get rid of the height style on #mNav
Add a <div> with the style clear: both to #topNav, after the <ul>
Give each ul li a style of height:25px
It's not pretty, but I think that solves it.
Related
I am having problems with my drop down menu. When I try to click on one of the links in the sub-menu, focus is lost from the parent and so the menu disappears, making it impossible to follow the links in the sub-menu. I have searched this forum and google and although there are many similar issues, I can't find any solutions to my particular problem. I would greatly appreciate any help on this. The site is www.emmatuscaloosa.com and the sub-menu is under the "categories" button.
Dont display the sub-menu none.. rather hide it with opacity.
I worked out a pretty simple fix for this by adding some CSS to the sub menu hover state. Im hiding / showing the sub menu using the max-height property and fixed the issue by writing:
.sub-menu:hover {
max-height:100%
}
That simple! Whenever the mouse is hovering on any sub menu item the menu must stay visible, allowing enough time to click on the enclosed links. Not sure if this is the "proper" way to fix the issue but it's working like a charm.
Dont' use focus. There are other ways, for example you could use :target or :hover to open the submenu. Using target, you will have to add an id to the submenu.
Target:
.sub-menu{display:none;}
#categories:target{display:block}
Another way is to use Javascript.
I'm seeing some strange flickering in a JS submenu implemented using jQuery.hoverIntent on this page here. The flicker only occurs over images that are further down the page, hidden by the appearing menu in Chrome and Firefox and the whole menu actually renders behind those images in IE7. Weirdly, the previous implementation (here) works without the flicker. I'm fairly certain that it's CSS issue, since we are in the middle of a refactoring in which we're trying to consolidate stylesheets and scripts. Any help is greatly appreciated :)
EDIT:
Although my initial answer below still works to fix the issue, here is the real cause of the issue and a better fix.
The image further down in the page is in a positioned div (which is position relative). When the menu loads, it sets the z-index last. If you specify the z-index in your stylesheet, the fade will work and it will no longer flicker. This worked for me while inspecting:
ul#topMenuJs li.qnav0>div {
z-index:5;
}
OLD ANSWER: You are seeing the flicker because you are fading in the dropdown menu. You can do two things:
Get rid of the fade altogether and just do a .show() on the dropdown
Give the ul#topMenuJs li.qnav0>div an opacity:1 !important; to override the js
The latter I tested and it works.
I am having a problem with the drop down menu on my website. I used the suckerfish menu and changed its css a little. You can see the website here.
The menu and slider plus the expandable div on top work great with Chrome and Firefox but there is something wrong going on with the drop down menu in Internet Explorer.
I moved the slider lower to check if its because it drops on top of the slider but its not it. I believe its z-index related but can't figure it out!
Try adding this to the menu's ul element:
z-index:999;
These are IE7 Only problems:
Navigation Problem
The active tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
http://dl.dropbox.com/u/6688069/navi.jpg
Search Filter Problem
I can't seem to get the height correct in IE7 without breaking the functionality.
Screenshot of what is should look like:
http://dl.dropbox.com/u/6688069/filter.jpg
Thanks!
What I'm seeing is that in IE7 this element:
<ul class="multiselect" id="multi-filtercountry"/>
is causing it those list items to expand... I also noticed that in Chrome, a real browser, none of those sidebar elements are expanding their parent. That means to me that you have one floating element in there somewhere, and the others aren't.
If you use Chrome's developer tools and mouse over the elements inside <span class="expanded"> you'll see that their position is determined to be up top, meaning they aren't flowing properly.
My best advice is to try to look at this not as an IE7 problem but a markup problem in general.
I am having a hell of a time figuring out what went wrong with one of my buddie's sites regarding the CSS navigation menus.
Here is the link to his site
http://www.rpmafitness.com
If you mouse over the About Us nav button, the menu drops down directly below it and everything works prefectly. But if you mouse over the Classes and Events, the nav pops up below and to the right and I cant figure out why. And to top it off, its just IE 7. IE 8, Chrome, FF work fine.
Any CSS gurus who want to take a peek and see what I am doing wrong would be appreciated.
Try this. On this line:
<li>Classes and Events<ul style="width: 110px;">
I would add style="width: 75px;" to the <li>. Adjust the width as needed if it isn't wide enough.