CODEWITHSUNDEEP
htmlcss
Nicco
Nicco

Reputation: 286

absolute position stay with parent of parent instead of parent

I ran into some problem when trying to position an absolute positioned div. its working as its should i guess, however i want it to stay with parent of parent instead of parent becouse i have a dropdown list and it will follow the parent down on the side when i want it to stay in top like first li with div is displayed. ive created a jsfiddle to show the problem. http://jsfiddle.net/trptR/ can this be done using css only or is Javascript a must?

HTML

<div id="navmenu">
    <ul>
        <li>example
            <ul>
                <li><a href="#">sub example1</a></li>
                <li><a href="#">sub example2</a></li>
                <li><a href="#">sub example3</a></li>
                <li><a href="#">sub example4</a></li>
            </ul>
        </li>
        <li>Test
            <ul>
                <li>Sub Test 1
                    <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
                <li>Sub Test 2
                <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#navmenu{
display:inline-block;
background:red;     
}
#navmenu ul{
list-style:none;
margin:0;
padding:0;  
}
#navmenu ul li{
float:left; 
position:relative;
display:block;
padding:0.5em;
}
#navmenu ul li ul{
position:absolute;  
display:none;
border:solid 1px #333;
background:#fff;
}
#navmenu ul li:hover ul{
display:inline-block;   
}
#navmenu ul li ul li{
float:none;
display:block;
position:relative;
}
#navmenu ul li ul li:hover{
background-color:#EBEBEB;
}
#navmenu ul li ul li div{
display:none;   
width:10em;
height:14.6em;
background:blue;
position:absolute;
top:0;
left:6em;
border:solid 1px #000;

}
#navmenu ul li ul li:hover div{
display:block;  
}

Upvotes: 0

Views: 78

Answers (3)

Philipp Kyeck
Philipp Kyeck

Reputation: 18820

think about using 

#navmenu > ul > li{
  float:left;   
  position:relative;
  display:block;
  padding:0.5em;
  cursor:pointer;
}

because otherwise your selectors overwrite each other.

Upvotes: 0

5260452
5260452

Reputation: 11598

Could you remove position:relative from both your #navmenu ul li style set and from you #navmenu ul li ul li style set? http://jsbin.com/ziqov/1/edit

Upvotes: 1

Robert Koritnik
Robert Koritnik

Reputation: 104999

Positioning is key

I'm not sure I understand the explanation of your problem, but I do think I understand when you say you have

parentElementTop > parentElementBelow > element

that you want element to be aligned to parentElementTop rather than the parentElementBelow.

To align element absolutely to parentElementTop all you need to do in CSS is to not set position to relative or absolute on the intermediate parentElementBelow and any subsequent absolutely positioned element will be aligned according to last non-statically positioned ancestor. In your case that would be the parentElementTop which is what you want.

Upvotes: 0

Related Questions