Первый ребенок, последний ребенок или нет?

Question

У меня есть 4 мыши над изображениями, которые выходят из ящика с 3 ячейками, отображающими название, дату и абзац. Мне нужно, чтобы первый и последний выпадающие страницы были перемещены внутрь на странице, чтобы не быть обрезаны левой и правой сторонами. Я был круглым и первым ребенком последнего ребенка без везения. Можно ли изменить положение слева и справа, не влияя на средние выпадающие позиции? Если да, то как? Спасибо.

.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; \t 
 
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; \t 
 
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 { 
 
/* \t 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><a href="#link1" STYLE="text-decoration: none"><img src="img/image1.jpg" width="150px" height="70px" border="0" /></a> 
 
     <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><a href="#link1"><strong>Read More</strong></a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#link2" STYLE="text-decoration: none"><img src="img/image2.jpg" width="150px" height="70px" border="0" /></a> 
 
     <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><a href="#link2"><strong>Read More</strong></a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#link3" STYLE="text-decoration: none"><img src="img/image3.jpg" width="150px" height="70px" border="0" /></a> 
 
     <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><a href="#link3"><strong>Read More</strong></a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#link4" STYLE="text-decoration: none"><img src="img/image4.jpg" width="150px" height="70px" border="0" /></a> 
 
     <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><a href="#link4"><strong>Read More</strong></a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Вы ищете что-то вроде этого?

.simple li:first-child ul { 
    left: 0px; 
} 
.simple li:last-child ul { 
    right: 0px; 
    left:initial; 
} 

Answer 2

Добавьте приведенный ниже код в ваш CSS будет работать:

В классе простой дополнительно добавить ширину,

ul#drop-nav li:first-child ul{margin-left: 65px;} 
ul#drop-nav li:last-child ul{margin-left: -101px;} 

для контрольной проверки этой скрипку:

http://jsfiddle.net/o17ogsa8/