% width of what part does this <div> take - css

Question

So there might be an easier way to explain this problem but this is how I know:
This basically is a simple dropdown menu inside a dropdown menu. I know how this dropdown works but the real problem here is width of .
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
Now the question is if I give 50% width to "dropcontents" then it takes like the half the whole website width. SO isn't it supposed to take 50% of "nav2" as it is inside that div? And I don't want to use pixel here. And I noted that "sub-dropcontents" take 50% width of "dropcontents" which I assume is correct.
Here's the pictorial representation:

Answer 1

The problem is the position value:
If the parent and the children are not positioned, 50% width for the children means 50% width of the parent
If the children is position:absolute; 50% of width means 50% of the first parent that is positioned; if there is not any parent it'll refer the percentage to the whole document.
To fix that just put position:something; in the div that the percentage must refer to.
For a better explanation see this DEMO.
.parent {
width: 500px;
height: 200px;
background-color: red;
margin-bottom:10px;
}
.child {
width: 50%;
height: 200px;
background-color: blue;
}
.absolute {
position:absolute;
}
.relative {
position:relative;
}
Parent-> not positioned and Child -> not positioned
<div class="parent">
<div class="child">
</div>
</div>
Parent-> not positioned and Child -> absolute
<div class="parent">
<div class="child absolute">
</div>
</div>
Parent-> relative and Child -> absolute
<div class="parent relative">
<div class="child absolute">
</div>
</div>
Parent-> absolute and Child -> absolute
<div class="parent absolute">
<div class="child absolute">
</div>
</div>

Answer 2

it(any element) takes the percentage width of its parent element.

Answer 3

Note nav2 is a block element and it will take out the entire width of of its parent (in this case the body)
See this snippet
#nav2{
border:solid red;
}
#dropcontents{
border:solid;
width:50%;
}
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
If you set the width of nav to to 50% of its parent width, you will notice that the dropContents div will adjust to 50% of nav2
See snippet below
#nav2 {
border: solid red;
width: 50%
}
#dropcontents {
border: solid;
width: 50%;
}
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>