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;
}
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%;
}
i have some problems with the CSS code below. The problem is that only one of the icons are visible (#maps), guess it is some problem with the positioning? (70%?) i cant find the problem, hope that someone here can help.
Thanks in advance.
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 10px;
left: 70%;
}
#navlist li, #navlist a {
height: 64px;
display: block;
}
#face{
left: 0px;
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
#maps{
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
Html code:
<ul id="navlist">
<li id="face"></li>
<li id="maps"></li>
</ul>
there is definetly an issue with #face! Although I´m not sure if that will make it visible again because I would also need your HTML code. You gave it the attribute left:0px; (btw. you dont need to write "px" if it is 0 anyways). But the browser cant do anything with that because it doesnt know with which kind of positioning you are working! The attribute left:0; makes only sense if you have already given it either position:absolute; or position:relative;. All over all I would advise you to read more about the basic position techniques and upload you HTML for a closer look.
EDIT: Found the problem.You think #face has the attribute left:0;? You are wrong! Because #navlist li { left:70%} beats #face{left:0;} So just remove that attribute at #navlist li and add it at #maps! It will fix it! It was a cascading issue if you are want to read more about it google: CSS cascading system.
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;
}
I need to make a vertical menu using CSS and <ul> <li> tags. But when ever I put the cursor on a link that contains submenu, other main items move to another place.
This is my jsfiddle.
Can anybody help me ?
Instead of making the sub menu position: relative (which still makes it part of the flow) make the containing li position: relative and the menu_sub position: absolute with the appropriate left/right/top/bottom settings:
#menu li {
position: relative;
}
#menu_sub {
margin:0;
padding:0;
position: absolute;
list-style:none;
display:none;
left: 70%;
top: 0;
}
http://jsfiddle.net/Kc6m4/3/
Explosion Pills response works. As does this:
By floating the sub menu, you can also break it you of the normal flow, but still retain it's relationship to the parent UL:
http://jsfiddle.net/Kc6m4/4/
#menu li:hover ul {
display: block;
float: right;
clear: none;
position: absolute;
top: -30px;
left; 0;
}
Then you adjust the position using top, left, right, etc. In my example above, I used a negative top position to clear the height of the parent list item so they start at roughly the same position.
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%;
}