CODEWITHSUNDEEP
css
aleczandru
aleczandru

Reputation: 5459

Setting a child on top of the parent

Hi I have a problem in my css that I can not quite figure out how to solve I am not sure if there is even a way to solve it but here goes.

Let's say we have this html:

<ul id="menu">
   <li>
       <a href="#">Auto-moto, piese, accesorii<i class="icon-caret-right"></i></a>
       <ul class="product-submenu">
                <li><a href="#"><i>Auto-moto, piese, accesorii</i> <span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Auto-moto, piese, accesorii</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
                 <li><a href="#"><i>Item</i><span>Short description</span></a></li>
         </ul>
   </li>
</ul>

And this css:

ul#menu{
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow:         5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    position:relative;
}
ul.product-submenu{
     position:absolute;
}

If for example I would want to be able to set the ul#menu to be on top of the ul.product-submenu how would I achieve that given the fact that ul.product-submenu is a child of ul#menu?

This would havee been easily solved with z-index with the tags were siblings but in this case I can not seem to figure it out.

I added a fiddle in this link what I would want is to be able to set the red container on top of the green one : fiddle

Upvotes: 1

Views: 107

Answers (1)

jtgaut17
jtgaut17

Reputation: 86

Mr Lister's suggestion works and if you add 20px to the ul.product-submenu's top attribute, then it will uncover the submenu.

JSFiddle: http://jsfiddle.net/5rmgR/3/

ul.product-submenu{
     position:absolute;
    background-color:green;
    top:20px;
    left:100px;
    z-index:-1;
}

You may even be able to get away without a z-index if you just add the 20px to the top attribute.

If you want the menu to be on top in the other meaning of the term, then you could try something like this: JSFiddle: http://jsfiddle.net/5rmgR/6/

ul#menu{
    background-color:red;
}
ul.product-submenu{
    position:relative;
    background-color:green;
    top:0;
    left:100px;
    width: 50%;
    z-index: -1;
}

Upvotes: 1

Related Questions