Codepen: http://codepen.io/marcoms/pen/vAgep/
The above pen has a <nav>bar with a dropdown list, with the hierarchy:
nav > ul.nav-list > li.parent > ul /* ul: dropdown list */
The subsequent <p> hides the dropdown, which is unwanted, and I can't figure out how I can stop it.
Oddly, if a {-webkit-,-moz-,...}transform is applied then the dropdown stacks itself above the <p>. (paste -webkit-transform: translateX(0) in the pen and see), which is almost certainly a bug, but I'm not sure what I can do to fix this, aside from changing display and z-indexes.
For z-index to work properly, you must also use position:relative (or any position really, but relative in this case)
Related
I have problem with rendering in Firefox. My code is working fine in Chrome and IE. Menu elements with the submenus are going few pixels down when rendering in Firefox.
Here is the example images:
Try removing your inline block.
but this does shift everything to the left, not sure if thats what you want?
I've solved it. Removing dipslay: inline-block; from #cssmenu span element did it. Removing padding from #cssmenu > ul > li > a and giving margin to #cssmenu also works fine also.
I have a css menu i'm working on. I'm trying to get the menu items inline, however, it they always display vertically instead. I've tried putting display:inline-block on all of the elements and it still doesn't want to go inline. Any suggestions? Code here: http://jsfiddle.net/3aShL/
<li>s are block-level items, so just because the <a> is, still means with every <li> you will get a new line.
http://jsfiddle.net/3aShL/1/
display: inline;
On the .nav-collapse_ .nav > li will fix it.
Just add this to css
li
{
display:inline;
}
display:inline; - By default, li elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
Demo fiddle
I have a drop down list that I'm trying to get working in IE7. Amongst other bugs, the one that has me beat is the anchors on hover not pushing the background to full padding height. It seems to stay within the dimensions of its li and ultimately the ul. I've tried expanding the height of both ul and li but this doesn't seem to work. Works correctly in all other browsers:
http://jsfiddle.net/gzLVR/2/
What you should see: The anchor tag, on hover, should expand at the bottom by 50px (as per the css #menu > ul > li:hover > a { padding-bottom:50px; }. This expansion is performed, but the background-color doesn't seem to push to the anchor's margins.
What am I doing wrong?
IE7 does not support :hover on items other than <a> tags. Since you have your :hover on an <li> it is not working in IE7.
You'll need to add some javascript to add a .hover class to the <li> when you mouseover, and then adjust your css to include it as well:
#menu > ul > li:hover > a,
#menu > ul > li.hover > a{
padding-bottom:50px;
}
[EDIT]
It appears this is only true when IE7 renders in quirksmode. If you are using a strict doctype, you should be able to use :hover on an <li>
I think trigger hasLayout will fix it; you can do it with somthin like this:
#menu > ul > li > a { display: inline-block;}
Be aware of that IE don't supports :last-child up to IE8, but you can use :first-child.
I would also suggest to use a pseudo element for the part you used the <i></i>, so you don't have unneccessary markup in your HTML.
I ended up finding the solution myself. Each li's anchors are by default set to wrap around it's content (display:inline?), and setting the display to inline-block is somewhat dangerous as its behavior in IE7 is somewhat unpredictable.
By simply setting the anchor to display:block, you allow it to take on dimensions of itself in IE7, so you break it away from having it simply wrap around its content. Thus, it's possible for it to affect the needed padding when on hover.
This will now work in IE7:
http://jsfiddle.net/gzLVR/5/
Have you tried changing the anchor to
display:inline-block;
zoom:1;
The zoom should only be required for IE7, it triggers 'hasLayout'
I have created a dropdown menu using CSS and JavaScript and I'm having an issue making the sub-menus appear correctly on IE7. When you hover on an anchor tag the background changes to blue. The problem is that in IE7 the background only changes for the length of the text rather than filling the width of the ul. So, if you have one item that has a long name, the rest display incorrectly as shown by the picture below.
You can see the problem on jsfiddle here. Just make sure you open it in IE7 or use IE9 in compatibility mode.
I have tried a bunch of things like setting the width to 100% and the display to block but haven't been able to get it to work. Has anyone solved this problem?
Thanks
Well, let's see what do you have:
<li>Content</li>
so you can see that the problem is that the hover is being applied to the <a> and because it's not wide enough it does not work correctly.
Why don't you hover the <li> instead then?
changing from
#mainmenu li a:hover { background: #008de2; }
to
#mainmenu li:hover { background: #008de2; }
P.S. I'm using IE9, so I can't test it properly :-/
Try setting display:block on those anchor tags.
You may find your solution here (jsfiddle).
I made a few changes to #mainmenu li ul li, as well as adding #mainmenu li ul li:hover { background: #008de2;}. Seems fine on my IE7, IE9 (don't have IE8 to test), Safari, Firefox, Opera, and Chrome :)
What I want to achieve is to make links on my site move 1px down when they are in an active state (user clicks on them)
I am doing this by applying this global style:
a:active {
position:relative;
top:1px;
}
And it of course works - in most cases. Problem is when I try to do the same on links that are positioned absolutely. Since the above style will change their position to relative and thus return them to to document flow, distorting the layout, so I have applied this style for them:
#absolutly-positioned-link:active {
position:absolute;
/*and here I state their current position - 1px*/
}
Now instead of moving the element a pixel down, from some reason this sends it to the top of the wrapper element.
Here is a simple demo of what happens -> http://jsfiddle.net/Husar/ns5L7/
In the fiddle I have both examples, as you can see, the header links works just fine, but clicking the prev/next links at the bottom just launches them to the top.
The only solution I found so far is that instead of the global a:active style I explicitly state which links are not absolutly positioned (ie something like a long nav a:active, p a:active, h2 a:active, li a:active selector), and than apply the styles for the absolutely positioned elements by just changing their coordinates, without stating in the :active selector that they are absolutely positioned.
Simplified, this fiddle demonstrates it -> http://jsfiddle.net/Husar/HfvCs/
This works fine, however I don't think it to be the most elegant solution nor do I understand why this behavior is occurring.
If anyone knows something more about this issue and how it can be solved, help will surly be appreciated.
The problem is that you override the position: absolute; with your position: relative; so the positioning is totally screwed :P I usually use margin as a work-around. But of course this only works if your element is not supposed to have any other top margin...
a:active {
margin-top:1px;
}