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%;}
Related
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;}
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
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.
my problem is that when I try to show my dropdown menu under "Departamentos" its kinda to the left... not in the right position under Departamentos...
I try for hours but nothing, What could be the problem??
LINK TO THE WEBSITE
Change #mainNav li from display:block; to display:inline-block;. Just tried in firebug, menu moves to the right place.
The problem is that with display:block or display:inline li has zero width (despite inner content) and thus all li elements are shifted to the left. display:inline-block makes it stretch to incorporate inner content.
You can see the area element takes highlighted if you move mouse over it in html tab in firebug.
I am not sure of how to get this to work, I have a Drop Down Menu that is cross browser compatible and I am trying to have the selected "bread crumb" menus system keep the arrows on the :hover style when I am on child menus. As you can see from the link here:
http://www.seth-duncan.com/Test/TestMenu.html
When I go to child menu items the menu reverts back to the blue arrows, when I need them to keep the hover style white arrows.
Any help ?
Thanks
Move
background:#A5CF8C url(images/DownArrow.png) no-repeat scroll right center;
from
#menu li a.sub:hover
to
#menu li:hover a.sub