The submenu's don't seem to align themselves at correct positions. 

My html is: 

```
<nav class="nav">
        <ul class="menu">
        <li><a href="#">HOME</a></li>
        <li class="parent"><a href="#">PROFILE</a>
            <ul class="children submenu0">
                <li><a href="#">SIZE</a>

                 </li>
                 <li class="parent"><a href="#">NATURE</a>
                 <ul class="children submenu1">
                        <li><a href="#">SMALL</a></li>
                        <li><a href="#">MEDIUM</a></li>
                    </ul>
                 </li>
            </ul>
          </li>
        <li><a href="#">CONTACT</a></li>
      </ul>                 
  </nav>

```

And my css is as follows: 

```
.nav{
    display: block;
    float: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 100%;
    clear: both;
    background-color: #000000;
    height: auto;
}

.nav .menu {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    list-style-type: none;
    float: left;
}
.nav .menu li {
    float: left;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;   
}

.nav .menu .parent .children{
    float: none;
    position:absolute;
    margin-top: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -50px;
    width:auto;

}

.nav .menu .parent .children li{
    float:none; 
}
.nav .menu .parent .children li a {
    display: block;
    color:#C0F;
    background-color:#0FF;
    white-space:nowrap;
}
.nav .menu li a {
    color: #fff;
    text-decoration: none;
    display: block;
    float: left;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.nav .menu .parent .children .parent .children {
    width:auto;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    float: none;
    position: absolute;

}
.nav .menu .parent .children .parent .children li a{
    display:block;
    color:#9C0;
    background-color:#F03;
    white-space:nowrap; 
}

```

When I add submenu1 to say size the alignment is all wrong even for nature its overlapping it instead of fitting perfectly next to it. 

How do I get it to fit on its own. 

Also my css is damn complicated so far is there any way I can simplify it so all the parent elemnts behave in a way and all children elements behave in a particular way irrespective of depth?