z-index problem with parent/child relations

[x386]

For a navigation menu, i have this:

Code:

• HCC
  • Company
  • Title 2
  • Title 3
  • Services
  • Softwares
  • Games
• Net Services

  • Card Validation
  • Email
• About us
• Contact us
• Archives

Clean, and semantic.

And heres the css:

Code:

#navigation {
width: 240px;
}

#navigation ul {
list-style: none;
margin-bottom: 0;
}

#navigation ul li {
direction: rtl;
float: right;
height: 26px;
border-bottom: 1px solid #c9dbdf;
position: relative;
}

#navigation ul li ul {
list-style: none;
position: absolute;
display: none;
width: 100px;
}

#navigation ul li:hover ul {
display: block;
position: absolute;
left: 0;
top: 0px;
border-left: 1px solid #FFF;
}

#navigation ul li ul li:hover ul {
display: block;
position: absolute;
left: 140px;
top: -1px;
border-left: 1px solid #FFF;
}

#navigation ul li a {
display: block;
width: 240px;
height: 25px;
line-height: 25px;
background-color: #a5b9be;
border-bottom: 1px solid #869ba0;
text-indent: 20px;
}

#navigation ul li a:hover {
background-color: #597076;
}

what I’m going to create can be viewed here: http://hcc.ir. In fact, I’m recoding this site, for usability reasons. The navigation is at the top left of the page. You see that when you roll over the item’s, the sub items will appear on top of the other items.

The problem is that in my code, submenu items will go under the parent’s sibling "li"s (I mean, sub items’ uncles). Even with changing the z-index. It seems that the z-index is not a matter. Is it a bug or there’s a problem with my codes?

[Author]

Posts