See my code and demo Here plz. I am not very used to with css but its simple, i have seen many demos working nearly with same code. But i am unable to catch the difference which is causing problem
I need a submenu to be opened under UserForm but its not getting visible on hover (using css)
Remove "top" and "left" from #main_nav ul ul like this:
#main_nav ul ul {
position: absolute;
visibility: hidden;
}
It is because of how "position: absolute" works. In your case the parent "li" has "position: static" (default) and in that case "position: absolute" makes the child ul placed absolute in the entire document. You can see this if you just remove "visiblity: hidden" and then it is placed at the bottom of the page. Another solution is to set "position: relative" to the parent li
Related
I'm trying to make a pure CSS dropdown menu, but it has one odd bug;
when the page loads, the text in the main menubar is slightly offset to the right.
It jumps back to the left when the page is modified or when a menu item is moused-over.
This includes right-click > inspect element, which makes it really hard to find out what's going on.
Here's an example of it: http://jsfiddle.net/m75p3/1/
As you can see, it's in the wrong position on load, but jumps to the correct one a few milliseconds after. This is because jsfiddle is modifying the page.
If loaded from its own file, it will not exhibit this jumping behaviour until moused-over.
Any ideas why?
The problem is that you have declared 'position:absolute' on your 'toplink' elements but not given any left value, so their position is determined by their parent's text-align:center rule. When the transition occurs, that disturbs the layout so they move. To fix it you need to declare the li as position:relative, so that it becomes the layout parent, and then set left:0 on the 'toplink' a element.
Addition:
To prevent the text from wrapping in the sub-menus, you can set their white-space to nowrap.
#head ul li {
position: relative;
...
}
.toplink {
left: 0;
...
}
#head li li, #head li li a {
white-space: nowrap;
...
}
http://jsfiddle.net/m75p3/5/
I have a dropdown css menu that gets gets hidden behind the main page content when viewed in IE7. I've tried changing z-index values but have had no luck. I've also tried suggestions in other topics from this site but none have worked.
the page can be found here: www.melbournedodgeball.com.au/dodgeball2012/about
any help would be greatly appreciated
The CSS spec's paragraph on Z-index says that new stacking context is only created for positioned content with a z-index other than auto.
You have the li inside #nav with a position:relative, an apparently IE interprets this as a new stacking context.
Try this:
#nav li {
display: block;
position: relative;
z-index: 1; // force IE to recognize stack at this point
}
You need to add
position:relative;
To your <ul>
Z-Index is specified relative to all other elements in the same stacking context. You can have a Z-Index of 100 but it wont make a bit of difference if the elements belong to completely different stacking contexts.
I have test this code, It will work sure
Please set this css for IE7 only
#menu {position:relative; z-index:100;}
I have created a menu in HTML and CSS that works in all the major browsers (Chrome, Firefox, IE8+, and Safari). You can find it here: http://www.calvaryccm.com/MenuTest.aspx
The problem occurs in IE 7.
I have a hover menu using some JS for effect. When I try to render it in IE7 this is what happens:
I need some help figuring out how to position the menu under the text. Thank you for your help!
I'm not sure whether you want to use .block or .nav in the selectors below. I've gone with .block because I can see it being applied to the element.
On .block ul, remove overflow: hidden.
On .block li, add position: relative.
On .block ul.nav ul, add left: 0.
You now have the infamous IE6/7 z-index problem:
To fix it in this case, on .block ul, add position: relative; z-index: 3.
z-index: 3 to be one higher than the z-index on #player-area.
Also, you don't need to use javascript to add the 'hover' class as you've done. Just use the :hover pseudo selector in CSS:
ul.nav > li:hover
I tried to create a drop down menu. That's what I did so far:
http://gegensinn.org/test.html
(I made the drop down menu visible at all time for "debugging")
I think the problem is quite obvious: The menu is behind the text.
First I thought I could fix this with z-index.
Although I'm not quite sure which element has to get the z-index property.
I tried to set the whole menu to z-index:100; and at the same time set the z-index:1; of .main.
Afterwards I tried to set only the z-index of <li> and <a> but nothing worked.
add position:relative on #header :)
I think applying z-index like so should work.
CSS
#menu a
{
z-index: 100;
}
#menu ul li ul
{
position: absolute;
}
#main
{
z-index: 10;
}
Some browsers ignore z-index if it is not set on both elements in question.
add position relative to li and position absolute to sub ul and then z-index
For anyone else with this issue, just add !important and the z-index to the menu/header area:
position:relative !important;z-index:999
On this page: http://catonthecouchproductions.com/fish/boat-captain.html I have a list on the bottom right box in yellow, but it is not displaying as a list-style-type:circle, but i have it set in my CSS.
I am not sure why it is acting this way. Any ideas?
I have FireBug installed and it doesn't seem like anything is conflicting with it.
You need to add a left-margin to li to get them to show up.
ul li { margin-left: 10px; }
should do it
You haven't left any space for the circle to display - try margin:1px 10px; on the ul li instead
list-style-type:circle; should be defined for the ul and not the li.
Add a padding to the ul element that has been reset by reset.css.
Another detail, that I saw: your <ul> element has list-style-type:disc; and the <li> elements list-style-type:circle;. This property should only be declared for the <ul> element.
I had the same problem, when floating li.
As soon as I removed float from li element, the circles in ul showed up in IE7.