first child, last child or neither? - css

Question

I have 4 mouse over images that pop out a box with 3 cells showing a title, date and paragraph. I need the 1st and last drop downs to be moved inward on the page so as not to be clipped by the left and right sides. I have been round and round with first child last child without any luck. Is it possible to change position of the left and right without affecting the middle drop down positions? If so How? Thank you.
.simple {
position: relative;
font-family: arial, verdana, helvetica, sans-serif;
background: black url(images/subbar.jpg) repeat-x top left;
font-size: 12px;
z-index: 0;
text-align: center;
}
.simple ul {
list-style: none;padding: 0px;margin: 0px;
display: inline-block;
}
.simple ul li {
display: block;
position: relative;
float: left;border: 0px solid #000;
text-align: left;
}
.simple li ul {
display: none;
background-color: lightyellow;
border: 1px solid gray;
padding: 3px 5px 3px 5px;
z-index: 50;
position: absolute;
top: 72px;
left: -60px; /* left 5px, middle 2 -60px and right -90px (currently all at -60px) */
}
.simple ul li a {
/* display: block;background: #fff; */
padding: 5px 5px 5px 5px;
text-decoration: none;
color: #000;
}
.simple li:hover ul {
display: block; position: absolute; /* show or hide dropdown */
}
.simple li:hover a {
background: none;
}
#drop-nav li ul li {
border-top: 0px;
}
<div class="simple">
<ul id="drop-nav">
<li><img src="img/image1.jpg" width="150px" height="70px" border="0" />
<ul>
<li><a><img src="img/golddesign.jpg" width="300px" height="26px" border="0" /><br /><strong>Title 1</strong>
Date 1<br>Paragraph 1..</a><strong>Read More</strong></li>
</ul>
</li>
<li><img src="img/image2.jpg" width="150px" height="70px" border="0" />
<ul>
<li><a><img src="img/golddesign.jpg" width="300px" height="26px" border="0" /><br /><strong>Title 2</strong>
Date 2<br>Paragraph 2..</a><strong>Read More</strong></li>
</ul>
</li>
<li><img src="img/image3.jpg" width="150px" height="70px" border="0" />
<ul>
<li><a><img src="img/golddesign.jpg" width="300px" height="26px" border="0" /><br /><strong>Title 3</strong>
Date 3<br>Paragraph 3..</a><strong>Read More</strong></li>
</ul>
</li>
<li><img src="img/image4.jpg" width="150px" height="70px" border="0" />
<ul>
<li><a><img src="img/golddesign.jpg" width="300px" height="26px" border="0" /><br /><strong>Title 4</strong>
Date 4<br>Paragraph 4..</a><strong>Read More</strong></li>
</ul>
</li>
</ul>
</div>

Answer 1

You are looking for something like this?
.simple li:first-child ul {
left: 0px;
}
.simple li:last-child ul {
right: 0px;
left:initial;
}

Answer 2

Add the below code in your css it will work:
In class simple additionally add the width,
ul#drop-nav li:first-child ul{margin-left: 65px;}
ul#drop-nav li:last-child ul{margin-left: -101px;}
for reference check this fiddle:
http://jsfiddle.net/o17ogsa8/