CSS Drop Down issue - html

Question

I have a very big issue with the Drop Down menu i have used the Css and HTML for the same.
The problem what i am facing is i need the background width of the nav to be 100% to the ontainer but niw when i am increasing the horizontal menu its shifting to next line
can you please help
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 87.5%;
}
.container{
width: 70%;
margin: 0 auto;
clear: both;
border:10px solid #0171bd;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #efefef;
background: linear-gradient(top, #0077bb 0%, #0171bd 100%);
background: -moz-linear-gradient(top, #0077bb 0%, #0171bd 100%);
background: -webkit-linear-gradient(top, #0077bb 0%,#0171bd 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
background: #bee6ff;
background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);
}
.nav ul li:hover a {
color: #363636;
}
.nav ul li a {
display: block; padding: 20px 12px;
color: #ffffff; text-decoration: none;
}
.nav ul ul {
background: #bee6ff;
background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);
border-radius: 0px;
padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6cbdef;
border-bottom: 1px solid #6cbdef;
position: relative;
}
.nav ul ul li a {
padding: 15px 10px;
color: #fff;
}
.nav ul ul li a:hover {
background: #0075bb;
color:#FFF;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
HTML Code is like below
<div class="container">
<div class="nav">
<ul>
<li>
Home</li>
<li>
Site Settings
<ul>
<li>Add Meta Tags</li>
<li>Add Page Title</li>
</ul>
</li>
<li>User Managment</li>
<li>
Upload Images
<ul>
<li>Upload Slider Image</li>
<li>Upload Ads Image</li>
</ul>
</li>
<li>Content Managment</li>
<li>
Devotees
<ul>
<li>Add Devotee</li>
<li>Edit Devotee</li>
</ul>
</li>
<li>
News
<ul>
<li>Add News</li>
<li>Edit News</li>
</ul>
</li>
<li>
Donation
<ul>
<li>View Request</li>
<li>Approve Request</li>
</ul>
</li>
<li>
Blogs
<ul>
<li>Add Blog</li>
<li>Edit Blog</li>
</ul>
</li>
</ul>
</div>
</div>

Answer 1

here is answer for same
.nav ul ul {
width: auto;
}

Answer 2

Please check once
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 87.5%;
}
.container{
width: 70%;
margin: 0 auto;
clear: both;
border:10px solid #0171bd;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #efefef;
background: linear-gradient(top, #0077bb 0%, #0171bd 100%);
background: -moz-linear-gradient(top, #0077bb 0%, #0171bd 100%);
background: -webkit-linear-gradient(top, #0077bb 0%,#0171bd 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
}
#nav > ul{display: table;}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav > ul > li {
display: table-cell;
}
.nav ul li:hover {
background: #bee6ff;
background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);
}
.nav ul li:hover a {
color: #363636;
}
.nav ul li a {
display: block; padding: 20px 12px;
color: #ffffff; text-decoration: none;
}
.nav ul ul {
background: #bee6ff;
background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);
border-radius: 0px;
padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6cbdef;
border-bottom: 1px solid #6cbdef;
position: relative;
}
.nav ul ul li a {
padding: 15px 10px;
color: #fff;
}
.nav ul ul li a:hover {
background: #0075bb;
color:#FFF;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
#media only screen
and (max-width : 992px) {
/* Styles */
.nav ul{
font-size: 12px;
padding: 0 5px;
}
.nav > ul > li > a{
padding: 10px 5px !important;
}
<div class="container">
<div class="nav">
<ul>
<li>
Home</li>
<li>
Site Settings
<ul>
<li>Add Meta Tags</li>
<li>Add Page Title</li>
</ul>
</li>
<li>User Managment</li>
<li>
Upload Images
<ul>
<li>Upload Slider Image</li>
<li>Upload Ads Image</li>
</ul>
</li>
<li>Content Managment</li>
<li>
Devotees
<ul>
<li>Add Devotee</li>
<li>Edit Devotee</li>
</ul>
</li>
<li>
News
<ul>
<li>Add News</li>
<li>Edit News</li>
</ul>
</li>
<li>
Donation
<ul>
<li>View Request</li>
<li>Approve Request</li>
</ul>
</li>
<li>
Blogs
<ul>
<li>Add Blog</li>
<li>Edit Blog</li>
</ul>
</li>
</ul>
</div>
</div>
you can decrease font-size for lower version using media queries.