Question

我有4个鼠标悬停在图像上，弹出一个包含3个单元格的框，显示标题，日期和段落。我需要在页面上向内移动第一个和最后一个下拉菜单，以免被左侧和右侧夹住。我和第一个孩子最后一个孩子一直都没有运气。是否可以在不影响中间下拉位置的情况下改变左右位置？如果是这样如何？谢谢。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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/

第一个孩子，最后一个孩子或两个？

2 个答案: