I recently created a pure css drop-down menu using Google tutorials.
I have an issue though:
If I give a small margin to the 2nd level ul, when you hover on the gap between the ul and parent li drop-down fades away.
Is there any way to fix this not involving Javascript?
Refer to the demo here : http://jsfiddle.net/ba76n/2/
that margin is causing the mouse to drop the "mouseover" state, without it it works fine.
If you switch to padding-top:.5em; it should work as expected. This is because margin is on the outside of block elements while padding is on the inside.
Use padding-top instead of margin-top.
See it working. http://jsfiddle.net/ba76n/5/
use padding-top instead of margin-top since margin is applied outside of the block so when you try to select the sub-menu its come on the margin and the block is changed so the sub-menu disappears
http://jsfiddle.net/ba76n/9/ updated your fiddle...hope it helps :)
( Just removed the margin top from the dropdown li and added a border )
Related
I have a ul with overlfow-y set to auto allowing me to have a nice scroll bar for all the li. However IE7 ignores all this and the list goes outside the container.
http://jsfiddle.net/asWeb/LnnmW/ see my code here.
I checked on the internet and the common solution was to put a position:relative to the outside div (registered_members) but it didn't work.
Thank you
Add position:relative to the ul tag. This will force IE to render the element tree correctly.
It is my first qustion :)
Box shadow does not cover drop-down ul. See the screenshot, please - http://i31.fastpic.ru/big/2012/0202/7d/83a6dfa12f24ace82a3df52b6fe0587d.png. I am trying to solve it for a several hours but no result :(
It is strange I have gave z-index to parent element 500 and to the drop-down ul 1 but shadow is still under drop-down ul not over it.
Here is the link: http://layot.prestatrend.com/
Hope someone will help me, thanks.
That's an issue regarding the stacking context.
The point is you can't place the block lower than the closest parent with non-static position and positive z-index. So, you have the z-index:100 on the #categories_block_top .tree li, so you can't place the ul under it.
To fix that (one of the ways) you can remove this z-index, then add position:relative;z-index:1; to the #wrapper and then add the negative z-index like z-index:-1; to an ul. Doing so you'll put it on the same level as the #wrapper, so it would be over the content after it, but under the box-shadow of the #subheader.
Prepend an inner (or inset) shadow on the first li element of the dropdown list.
I guess because the element will always be inside the main menu, the shadow won't work or appear above the sub list.
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
Okay, I have typical menu (ul>li>a). The mission is to draw background <div> (shadow, gradient etc) into an <li> element (ul>li>.shadow-bg-white)
(for example, the div is green bordered. all other borders are just for better visibility of problem)
http://jsfiddle.net/voilalal/P57yE/embedded/result/ or http://jsfiddle.net/voilalal/P57yE/6/
(for example, the div is bordered with green color)
If I hover over the items from left to right, everything is okay. However, if I hover over the items from right to left, items on the left side do not react to the :hover pseudo-class.
Every block has the CSS position property assigned, so z-index should work well, I hope.
At least, .shadow-bg-white z-index seems to be placed higher than the a item.
What solution can you recommend?
Benjam was on the general right track I think. I don't know your ultimate purpose, so the solution may not work in your case, but there is no other solution. The li you are hovering on must be set lower than the others so the div in it does not overlap them. Adding this:
#header-menu ul li:hover {
z-index: 498; /* one lower than your set z-index for li */
}
See here: http://jsfiddle.net/P57yE/8/.
The reason it worked going left is that by default when items are at the same z-index the one coming later in the source order is given precedence, so as you move right you move down in your html source order and the hover is picked up on the new element with the same z-index. But when you move left, you are going up in the html source order so the one you were hovering on had precedence and the hover remains.
They don't react because they are being covered by the div, therefore the div is stealing the hover from anything below it.
If the div does not need to be covering all of the LIs, you might want to place it below the LIs with z-index. But I'm not sure exactly what you're trying to do here, so I'm not sure if that solution will work for you.
I have been trying to add another button to my navigation bar at http://hawaiiislandpreservationsociety.org/ ,but the layout messes up. What do I need to tweak to get it inline with the rest of the buttons?
Much Appreciated,
Azeem
#header ul
change the width to 802px;
(then download Firebug)
adding 2px (making it 802px) to the #header ul makes it display correctly for me in firefox.
You mean the problem that "Blog" ends up on its own line? It seems like #go_learn has a padding defined which, combined with the width definition of 200px, ends up making the element actually 202px wide.