Dropdown's ul and li width isn't being displayed properly - html

Question

I'm making a dropdown menu but for some reason the dropdown's width doesn't work.
I tried making a fiddle but I couldn't get it to work with the angular part.
I'm using angular so this is my HTML:
<ul id="main-menu">
<li data-ng-repeat="item in mainMenu" data-ng-switch on="item">{{item}}
<ul data-ng-switch-when="Mina sidor">
<li data-ng-repeat="subitem in subMenu.myPages">{{subitem}}</li>
</ul>
</li>
</ul>
CSS (I'm using SASS so it's a bit awkwardly formatted, I apologize for that) :
body, #main-menu, #main-menu li ul {
margin: 0;
padding: 0; }
body {
width: 100%; }
#main-menu {
list-style: none; }
#main-menu li:nth-child(even) {
background: red; }
#main-menu li {
width: 12.5%;
display: inline-block;
text-align: center; }
#main-menu li ul {
display: none;
width: inherit; }
#main-menu li ul li {
height: 30px;
line-height: 30px;
width: inherit;
height: 30px;
background: pink;
display: block;
text-align: left;
margin: 0; }
#main-menu li:nth-child(4) {
position: relative; }
#main-menu li:nth-child(4):hover ul {
position: absolute;
display: block;
background: yellow; }
Here's what the problem looks like:
The ul dropdown and it's li:s width doesn't work for some reason, even though the box model in the console says that their width is in fact 12.5%. Why aren't they stretching to this width?
Edit: I had set the dropdown ul's width to 12.5% instead of 100%, it works perfect now.