CSS position absolute and width of parent container in percent

html css drop-down-menu css-position
chris picture chris · May 14, 2013 · Viewed 88.7k times · Source

I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...

How can I solve this?

Here is the code:

See the result here: http://jsfiddle.net/5uf2Y/ Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...

Answer

artSx picture artSx · May 14, 2013

You have forget two elements for display 100%.

Correction here

1st elements forgets it's :

Related questions

How to style the option of an html "select" element?

Here's my HTML: <select id="ddlProducts" name="ddProducts"> <option>Product1 : Electronics </option> <option>Product2 : Sports </option> </select> I want to make the name of the product (i.e. …

Read More
How to remove the default arrow icon from a dropdown list (select element)?

I want to remove the dropdown arrow from a HTML <select> element. For example: <select style="width:30px;-webkit-appearance: none;"> <option>2000</option> <option>2001</option> <option>2002</…

Read More
How can change width of dropdown list?

I have a listbox and I want to decrease its width. Here is my code: <select name="wgtmsr" id="wgtmsr" style="width: 50px;"> <option value="kg">Kg</option> <option value="gm">Gm&…

Read More