CSS Drop-Down Navigation Links Cramped - html

Question

I'm trying to create a responsive, drop-down CSS menu, and I have a media query that targets mobile devices (760 pixels). I'm trying to make all the links occupy the entire width, and that goes well, but the problem is when I display the drop down menu when the width is less than 760 pixels, all of the links of the drop down menu are cramped into the navigation links. I would like to know how to solve this problem, because I have been thinking for a long time and haven't figured out a solution. I want the drop-down menu for services to be directly below services, and the final contact link to go below the drop-down menu. This is the problem:
Below is the HTML and the CSS, as well as a link to the JSFiddle.
HTML:
<div class="wrapper">
<ul class="links">
<li id="active">home
</li><li>about
</li><li>services
<ul class="links">
<li>web development
</li><li>design templates
</li><li>networking
</li><li>custom builds
</li>
</ul>
</li><li>contact</li>
</ul>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
font-family: Source Sans Pro, Helvetica, sans-serif;
}
.wrapper {
width: 100%;
height: auto;
}
ul.links {
margin: 0px;
padding: 0px;
list-style: none;
background-color: #EBEBEB;
}
ul.links a {
color: #737373;
text-decoration: none;
}
ul.links ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
}
ul.links li {
background: none;
color: #737373;
display: inline-block;
position: relative;
font-size: 19px;
padding-top: 22px;
padding-bottom: 22px;
padding-left: 35px;
padding-right: 35px;
transition: background 0.2s linear 0s, color 0.2s linear 0s;
-webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
}
ul.links ul li {
position: relative;
font-size: 18px;
display: block;
float: left;
width: 100%;
}
ul.links li:hover {
background-color: #6ECFFF;
}
ul.links li:hover ul {
display: block;
}
ul.links li:hover .link {
color: #F0F0F0;
}
ul.links ul li:hover .link2 {
color: #F0F0F0;
}
#active {
background-color: #6ECFFF;
}
#active a {
color: #F0F0F0;
}
#media screen and (max-width: 760px) {
ul.links li
{
width: 100%;
}
ul.links ul {
position: absolute;
left: 0;
}
ul.links ul li {
background: #EBEBEB;
}
}
JSFiddle: https://jsfiddle.net/7tkn7zzs/

Answer 1

You should make ul.links ul { to position: relative; in media query to display it proper.
ul.links ul {
position: relative;
left: 0;
}
Working Fiddle

Answer 2

ul.links ul {
position: relative;
left: -35px; /* equal to padding left */
}