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;
Related
My submenu disappeared all the sudden and doesn't show anymore when I hover over the menu item. I checked the menu section on my WP dashboard and it's there and assigned to show. The submenu still show on mobile device but on full browser the submenu items stopped showing up. I deactivated all the plugins to check if there is a conflict but the event doesn't appear to be plugin related. This is more of a CSS problem that I'm having.
Here's my website: http://www.apcm.ca
My CSS : http://www.apcm.ca/wp-content/themes/apcm/css/style.css?ver=4.6.1
You'll notice that your #header is set to overflow:visible in mobile, and that if you switch back to desktop resolution, the submenu will start working. So all you need to do is add overflow: visible to the #header in all resolutions.
change overflow:hidden to overflow:visible for the section#header
I've been working on our site using a WordPress theme that I've tweaked a bit, and noticed that the drop-down nav in Safari for :hover is displaying too low and pushing down other content on the page. Seems to be related to padding, but I can't figure it out.
I saw other posts on this sort of thing, but nothing quite like my scenario. Ideas?
http://dev2.bingdesign.com/ - the nav above the slider.
Thank you!
I think margin of span element doesn't work on safari.
So if you add the margin top to span element on safari, please change display: block into display: inline-block.
Please check this link: example
I am building a site on Drupal usiong a custom theme based on the zen theme and using the nice menus module to generate a horizontal sons of suckerfish dropdown menu. My horizontal nice menus block works brilliantly in all browser (even in IE!) but seems to break in firefox, which is extremely unusual.
The second level menu should drop down directly below the top level menu item, which it does in all browsers except firefox (I am currently using 9.0.1). When I open the 2nd level menu in firefox, the 2nd level menu is displayed below the first (as it should), but left aligned to the left of it's parent menu, instead of being aligned below it's parent menu item. Any ideas?
Here is the url: http://www.crowstonstack.co.uk/new
change the value as per below in http://www.crowstonstack.co.uk/new/sites/all/modules/nice_menus/nice_menus_default.css
This should fix it.
ul.nice-menu-down ul {
left: 57px;
}
This solution is only for firefox and might break the look in other browsers. So once you confirm its working you will need to put it as a condition. for more on this go to
Targeting only Firefox with CSS
Cheers,
Vishal
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.
I have a couple dropdown menus that are giving me issues in IE7. I've wasted the entire morning trying to fix it. The client is monitoring the site using IE7 so it's a top priority.
I've got a live demo and a jsfiddle demo set up. Here is the actual site I'm working on today as well just for reference, but the demos have the problems isolated. I left some of the reset css and such in case any of it is related.
There are 2 problems:
Most Important: There are z-index issues with the top menu and the header content in IE7. The headings are above the dropdown.
Less Important: There is a small gap in the top menu between the first link and the dropdown that sometimes causes the dropdown to disappear when moving the mouse to it from the top link. This occurs in at least Firefox 4 and IE 7. This issue doesn't occur in the bottom menu.
I removed javascript, tried removing any clearfix css, whittled down the css and html, switched from html5 to xhtml1 strict, played with the position and z-index properties, and read several articles here and elsewhere about z-index bugs in IE but I still can't get this one to budge.
I don't care about IE6 support or if I have to use javascript, I just need to get it working in IE7 for the client. Any help is greatly appreciated.
To #header and #nav add:
position:relative;
and
z-index:10 //for #nav
z-index:0 //for #header