Second level menu behaving abnormal - html

Question

I have a menu created for my website in which I have second level menu aswell but the problem is that the second level menu has some problems:
It's size is bigger
It's menu items are floating right
It's going into another first level menu item's territory
I want to solve these problems but I am not able to do it on my own.
HTML:
<header>
<div class="welcome_area">
<p>Welcome, <b>Arkam Gadet</b>
</p>
</div>
<div class="menu">
<nav>
<ul style="z-index: 20;">
<li> My Profile
<ul style="display: none; background-color: #eee; box-shadow: 0px 0px 2px 3px #bbb; z-index: 1;">
<li>My Questions
</li>
<li>Settings
</li>
</ul>
</li>
<li>Inbox
</li>
<li>Notifications
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background-color: #eee;
height: 45px;
box-shadow: 0px 2px 3px 1px #bbb;
}
a {
color: black;
text-decoration: none;
}
h2 {
color: #f79a1d;
}
.welcome_area {
float: left;
margin-left: 5%;
}
.menu {
float: right;
margin-right: 5%;
}
.menu nav > ul {
position: relative;
}
.menu nav ul li {
display: inline;
padding: 5px;
}
.menu nav ul li a {
padding: 2px;
}
.menu nav ul li a:hover {
background: #eee;
border: 0;
border-radius: 3px;
box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
position: absolute;
left: 0;
}
.menu nav > ul li > ul li {
display: block;
}
Demonstration.
As you can see in the fiddle the items are floating towards right in the second level menu, I want them to
Float left the second level menu items
Shorten the second level menu's width
Send them back of the navbar.
Prevent it from going into another first level menu item's place.

Answer 1

Here are my responses to your issues and a corresponding Fiddle.
1) Float left the second level menu items
Removed padding.
.menu nav ul { padding:0px; }
Also repositioned drop-downs (tweak this as neccessary):
.menu nav > ul ul {
position: absolute;
left: 5px;
top:22px;
}
2) Shorten the second level menu's width
Was this satisfied by #1?
3) Send them back of the navbar.
Added position and z-index.
.menu nav ul li a {
position:relative;
padding: 2px;
z-index:5;
}
This positions the drop-downs behind the main <a>s.
However, if you want the drop-downs to come from behind the actual menu bar (gray bar), you'll need to restructure things.
4) Prevent it from going into another first level menu item's place.
I'm not sure what this means. Possible to clarify?

Answer 2

Add this to your css
.menu nav ul li ul {
padding:0px;
margin-left:45px;
}
Demo