I have a some drop-down menus set up here: http://emgraphics.net/sokoleye_wp The problem is they only work sporadically - three out of four times I can't click on a link and the menu disappears. However, there isn't any pattern - no page where it works regularly (or doesn't), no particular menu/link that does or doesn't work, sometimes it works on the first try, sometimes not at all until I switch pages. The problem seems consistent across browser/platform (I tried a bunch of options in Browserstack). Even IE follows the pattern! These are just a standard menu set up in WordPress. I assume there must be some css somewhere that is interfering, or something with the random images in the header? But why wouldn't it just stay broken/non-functional (or not)? Any idea what I am missing here? thanks!
For me (Chrome Version 26.0.1410.64 m) there is a gap between the menu items and the drop-down list. When the cursor hits this gap it is not in a hover state over the button or the list, causing the list to disappear.
Try changing the CSS for #access ul ul to:
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding-top: 4px;
}
..that should fix the issue.
You could add a border top to the above example if you still want to have the visual effect of a gap. Replace your existing CSS for the element below and it should fix your problem.
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
border-top:4px solid #7C7461;
}
Related
I'm making an website with DIVI, and used custom CSS code to skew and style the menu buttons, but now i have this strange effect on drop-down submenus when they are out of the style completely.
I was trying to apply same styles for drop-down items, but nothing seems to work.
Maybe anyone ran in this problem? You can check the website live - http://steel.cody.lt and the problem is with PRODUCT menu dropdown.
Add this css and try
#top-menu-nav #top-menu li li {
margin: 0;
padding: 0 0px;
line-height: 2em!important;
width: 100%;
transform: skew(-1deg);
}
#top-menu-nav #top-menu li li a {
width: 200px;
padding: 6px 0px;
width: 100%;
}
My submenu is not working properly. It's showing up, but if you click on the parent of the submenu, the color doesn't change. It's not even clickable, which makes me think that there's something that's blocking it. I know where the problem lies, a bit, but I don't know how I should solve it.
ul li ul {
display: none;
float: right;
position: absolute;
right: 0;
top:-5px;
padding-top:2em;
padding-bottom:5px;
z-index: 99999;
}
The top:-5px breaks it down. When I comment it out, the submenu's working, but it doesn't stick to the parent li. Someone else made this, and I am trying to solve it. Since I can't contact him, it's my job to fix this.
Link to site
Try clicking on "teams", or hover over it, then you'll see what I mean...
Edit: I have made a JSFiddle, trying to tidy the things up a bit.
It can be found here
It's because the ul is over the anchor element you can change it like so:
ul li ul {
display: none;
position: absolute;
right: 0;
padding-bottom: 5px;
z-index: 999;
top: 12px;
padding-top: 15px;
}
My dropdown menu works fine normally - http://imgur.com/Ljodw0J
But is covered by widgets on mobile - http://imgur.com/1AyGiaS
And is even covered by the chart on mobile - http://imgur.com/dpoOmai
Shouldn't they render the same?? AND what could be the source of the problem? and how can I fix this issue?
Details
Some styling details:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
}
NOTES
There is no z-index on the overlapping elements.
The entire content of the page has a snap-content class which sets the z-index: 2;. This is to let me use the snap.js plugin.
Yes, they should, but it's not uncommon that they don't. This is why cross-platform HTML, JS and CSS is such a PITA, and why, if you're good at it you print money.
I am having a problem with the way my horizontal sub navigation in IE9.
This page the navigation renders great in all the rest of browsers but in IE9 it ignores the style given to the list items and pushes the subnav up against the top nav.
Here is the link to the page I am working on:
http://test.shared-vision.net/menu_test.html
and here is the link to the css"
test.shared-vision.net/css/menuestyle.css
Any sugggestions are appreciated.
On your rule #menu li.selected ul you need to set a bottom value:
#menu li.selected ul {
bottom: -40px; /* this will make it appear in the right place */
display: inline;
float: right;
padding: 0;
position: absolute;
right: 0;
width: 150%;
}
My default page works fine in ie but Firefox it has problems with the a:link.
At my page http://www.printer-ink-toner.co.uk and half way down is a link to my status on ebay.
For Firefox this link does not work and for ie it does. I can reproduce this behavior on my development PC also.
The link is contained in a float div block called "centercol50pct" which has CSS of
.centercol50pct {
position: relative;
float: left;
width: 380px;
margin:0px 5px 0px 0px;
}
If the float:left; is removed it works fine. changing any other parameter does not have an effect on the problem.
In addition the search drop downs do not work in Firefox either. I assume it is related but thought I would try and solve the more simple 'a link' problem first
Thanks
Nigel
The centrecolLowerblock div was covering up the above content, therefore making the link unreachable.
Change
#centrecolLowerblock {
position: relative;
top: 20px;
}
to
#centrecolLowerblock {
clear: both;
position: relative;
top: 20px;
}
Also your dropdowns are not working due to the same problem (an element is overlapping them). Try changing.
h3.h3_Largeblue {
color: blue;
font-size: 20px;
}
to
h3.h3_Largeblue {
clear: both;
color: blue;
font-size: 20px;
}
That should sort the problem's :)