I can't figure out why my dropdown menu won't show up in Internet Explorer 7. For example, in Firefox, the links under the Attorney Profile button show up fine on hover, but not in IE7.
CSS: http://pastebin.com/geCXmaz2
Website: http://josephruscitti.com/clients/gare/
Any help is appreciated. Thank you.
You're only adding a top value to your submenu on hover when it should be on the main rule itself so once you add it your menu works fine:
CSS
.mymenu li ul {
top:100%;
}
Related
Here is the menu I am working at:
I have added submenu items under a menu item.
But it does not work at all. How can I add submenu items? Or at least how do I check if the menu I am using can do that?
Here is the page I am working at: http://darnicgaz.md/?lang=en_us
Ok i have tested your site. submenu displaying fine in mobile and display none in web view.
style.css line no 1110
#primary-menu ul ul, #primary-menu ul li .mega-menu-content {
display:none
}
remove that display :none from this style
I've implemented a simple CSS dropdown menu that works perfectly in every browser I've tried except for Safari (on Windows). My page can be seen here. Within my primary navigation list items, I have an <li> class called "drop" that is set to position:relative and a div labeled "drop-container" that contains the drop-down menu items and is positioned absolutely with respect to the parent list item. I'm changing visibility on hover-- in this case nav#primary ul li.drop .dropcontainer-- to visible and changing the opacity from 0 to 1 to enable a CSS transition.
I can't figure out for the life of me why this simple menu isn't working in Safari-- any help is greatly appreciated.
Try to operating with display.
nav#primary ul li.drop .dropcontainer {display:none;}
nav#primary ul li.drop:hover .dropcontainer {display:block;}
For my navigation, I'm showing/hiding the sub-menus using height/width and opacity properties, rather than the display property, so that I can use CSS transitions to create a fade-in/fade-out effect for the sub-menus. This is working perfectly fine in every browser except for Safari, and I have no idea why.
The website is up at http://rtt.celero.com.au. Take a look at it in any browser other than Safari, and then compare to how it looks in Safari.
Other browsers:
Safari:
Anyone got any ideas about what's causing this bug in Safari?
EDIT: The website has been updated as per the float: none suggestion below, however now there seems to be another Safari-only issue, where the top-level navigation items are being expanded out to the width of the sub-menu. Any ideas on a fix for this?
New Safari issue:
This will fix the issue in Safari
ul.menu li ul.sub-menu li{
float:none;
}
ul.menu li ul.sub-menu{
position:absolute;
}
On a submenu on a website (lainegabriel.net), I have bottom borders that disappear on some of the links in the submenu under "Buy". This only appears in Chrome; Firefox and Safari render it properly. I believe the anchor tag is somehow overlapping over elements in the unordered list. But I simply cannot figure out what is happening.
And the problem goes away if you navigate to a page inside the submenu. Otherwise, some of the borders disappear.
Any ideas?
Thanks!
ul.sub-menu li{
float:none}
replace this with ul.sub-menu li{
display:block;
width:100%;}
On this site, when user hovers over nav menu title "About MCAEL" the last nav title in the drop down is hiding underneath the left arrow button.
I've added z-index: 2000 to various portions in the nav css (i.e. #nav #nav ul & nav ul li), as well changed the button's z-index to 1, but still in modern browsers the drop down is hiding behind that button. Oddly enough in ie6 & 7 there isnt an issue.
Any ideas and or suggestions to try?
If you add z-index: -1 to your main_body div, it works.
By the way, I checked in FF 3.6 and Chrome 8.