html - 图像上的重叠 div

Question

这是我想要完成的:

 _____________________________________________________________________________
|    option             option               option            option         |
|_____________________________________________________________________________|
  |  image  |         |  image  |          |  image  |       |  image  |
  |_________|         |_________|          |_________|       |_________|

在只有选项没有按钮的菜单栏中。另外，图像仅显示下半部分。我试过这个:

HTML

<div class="m_img"> <img src="image1.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image2.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image3.png" width="60px" height="30px"> </div>
<div class="m_img"> <img src="image4.png" width="60px" height="30px"> </div>
<div id="menu_bar" class="centered">
    <a class="m_button" href="javascript:change(0)"> text0 </a>
    <a class="m_button" href="javascript:change(1)"> text1 </a>
    <a class="m_button" href="javascript:change(2)"> text2 </a>
    <a class="m_button" href="javascript:change(3)"> text3 </a>
</div>

CSS

.m_img {
     float: left;
     width: 250px;
     z-index: 1;
}
.m_button {
     float: left;
     width: 250px;
     font-size: 110%;
     z-index: 2;
}

但是菜单栏向下并且不与图像重叠。知道如何设置吗？

Answer 1

HTML:

<div style="width:400px; background-color: red; font-size:1em; height:1em">
    <span class="menup option">option1</span>
    <span class="menup option">option2</span>
    <div style="z-index: -1; width: 100%; position:relative; top:-0.5em;">
        <span class="menup">menu1</span>
        <span class="menup">menu2</span>
    </div>
</div>

CSS:

.menup { background-color: blue; width: 6em; display: inline-block; margin-left: 1em; margin-right: 1em; }
.option { background-color: green; }

参见 http://jsfiddle.net/mK4bJ/1/

如果您有任何意见，我很乐意听取。