Problem with CSS sub menu that is partially hidden by other div

[Garidius]

Hello everyone,

I hope someone could help me with this problem.

I have a problem with a vertical menu that I'm trying to insert in a sidebar in a wordpress based site. The problem is that when hover the sub menus only are visible in the sidebar area, the other part is hidden or behind the central div.

How can I fix this problem?

The problem can be seen in this sample

and the correct behavior and the HTML and CSS code are here

I insert the code below for easy access.

<style type="text/css">
#navigation {font-size:0.75em; width:210px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}

ul.top-level {background:#000080;}
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}
#navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 font-size:13px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
}
#navigation li:hover {
 background: #f90;
 position: relative;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #888;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 120px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}
#navigation .sub-level {
    background: #999;
}
</style>

<div id="navigation">
    <ul class="top-level">
        <li><a href="#" style="color:#fff;">Documents Updates</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Documents1</a></li>
                <li><a href="#">Sub Menu Documents2</a></li>
            </ul>   
        </li>       
        <li><a href="#" style="color:#fff;">Our History</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu History1</a></li>
            </ul>
        </li>
        <li><a href="#" style="color:#fff;">News</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu News1</a></li>
                <li><a href="#">Sub Menu News2</a></li>
            </ul>
        </li>
    </ul>
</div>

Many thanks in advance for any help.

Regards

[carrieathomer]

you have to use the z-index of that vertical drop down

in css

add

li:hover .sub-level {
background: #888;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 120px;
top: 5px;
z-index:999999;
}

[Garidius]

Hi carrieathomer,

Many thanks for your reply and time.

I've just tried your suggestion in "li:hover .sub-level {}" and nothing happens. I've added to other rules where sub-level or navigation is present and nothing happens either.

Somewhere I saw that z-index doesn't work without using position:relative or position:absolute, I've tested in that way too and the behaviour of the sub menus still appear underneath the central div :-(.

Maybe you can help me in what more could be done to fix this issue.

Many thanks for help so far.

Regards

[carrieathomer]

use it in

#navigation

and

try applying lower z-index value may 0 for that central div

should work

[Garidius]

Usign firebug I think the div that could be over the sub menus is #content

I've added this rule to the wordpress theme:

#content {z-index:0 !important;}

and I've added to almont all rule of the CSS menu "z-index:999999" but still nothing happens :-(:

#navigation {font-size:0.75em; width:210px; z-index:999999;}
#navigation ul {margin:0px; padding:0px; z-index:999999;}
#navigation li {list-style: none; z-index:999999;} 
#navigation a:hover{
 text-decoration:underline;
 z-index:999999;
}
#navigation li:hover {
 background: #f90;
 position: relative;
	z-index:999999;	 
}
#navigation .sub-level {
    background: #999;
	z-index:999999;		
}

[carrieathomer]

now only i saw your web page

it is the navigation width: 210px causing the submenu to be masked.

just a hint, will analyze your code fully , recommend

[carrieathomer]

and suggest *

[Garidius]

Thank you carrieathomer.

That is the issue, it seems only is displayed inside the 210px area (that is the left sidebar). The other part is hidden for some reason :-(.

Many thanks in advance.

[carrieathomer]

you should not place the style tag inside body,

add it between head tags.

And the culprits are

#primary, #secondary { 
float: right;
overflow-x: hidden;
overflow-y: hidden;
width: 220px;
 }

this overflow-x and overflow-y is causing the menu to be hidden.

Removing it may rectify, buy may or may not show different behavior after full is site is completed.

it is the main css file of your wordpress

[Garidius]

And the culprits are

#primary, #secondary { 
float: right;
overflow-x: hidden;
overflow-y: hidden;
width: 220px;
 }

this overflow-x and overflow-y is causing the menu to be hidden.

Removing it may rectify, buy may or may not show different behavior after full is site is completed.

it is the main css file of your wordpress

Great!!! carrieathomer,

It seems to work. I've added this rule to the theme and the sub menus appear now:

#primary { 
overflow-x: visible;
overflow-y: visible;}

I hope adding this rule not affect any other behavior in the theme.

I just noticed onnly one more thing, when you hover the sub menus, some sub menus boxes appear at the top of the page, do you know why this happen?

Thank you thank you for that discovery.

Regards

[carrieathomer]

li:hover .sub-level {
    background: #888;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 120px;
    top: 5px;
    }

the li:hover should be inside #navigation

i did not verify though

try

#navigation li:hover .sub-level

because position: absolute should be inside position:relative

[Garidius]

try

#navigation li:hover .sub-level

because position: absolute should be inside position:relative

Jajaja you're great!!! it was exactly what you said.

I've learned a lot with your answers and help kindly provided to me here.

The very last question is about what you said before,

you should not place the style tag inside body, add it between head tags.

So, the correct way to insert a code like this should be something like below?

<html>
<head>
<style type="text/css">
#rule_1 {}
.
.
.
.rule_N {}
</style>
</head>
	<body>
		<div id="Myid">
			.
			.
			.
		</div>
	</body>
</html>

[carrieathomer]

yest that is correct, it should be inside the head as you indicated.

glad to be of help

thanks

[Garidius]

yest that is correct, it should be inside the head as you indicated.

glad to be of help

thanks

Is there a special reason for what must go between <head> tags?
PS: Sorry, extra question:D:$

Really thanks again for your great support.

Greetings

[carrieathomer]

simple that is the coding structure.

html is a markup language - markup - defining data only.

css is a stylesheet language - defines the style of the webpage

so in order to design the data complete, the style has to be loaded first, which happens when added between the head tag.

Ofcourse, you will see the output if it is inside the body tag... that is not good work though.

[Garidius]

I get it now, many thanks for your good explanation, it clarifies many things for me.

Much appreciated, really :)

Best regards carrieathomer