css目录布局技巧

#menu_con li a{

       display:block;

       float:left;

如何为一个元素设置左右两个背景图片

 

       background:url(images/menu_on_left2.gif) no-repeat left top;

       cursor:pointer;

       padding-left:3px;

}

#menu_con li a span{

       float:left;

       padding:6px 10px 4px 10px;

       line-height:12px;

       background:url(images/menu_on_right2.gif) no-repeat right top;

}

#menu_con li a:hover{

       text-decoration:none;

       background:url(images/menu_on_left2.gif) no-repeat left bottom;

}

#menu_con li a:hover span{

       background:url(images/menu_on_right2.gif) no-repeat right bottom;

}

<div id=menu_con>

  <div id=qh_con0 style="DISPLAY: block">

    <UL>

      <LI><a href="http://www.lanrentuku.com/"><span>栏目名称1</span></A></LI>

      <LI class=menu_line2></LI>

      <LI><A href="#"><SPAN>栏目名称2</SPAN></A></LI>

      <LI class="menu_line2"></LI>

      <LI><A href="#"><SPAN>栏目名称3</SPAN></A></LI>

    </UL>

  </div>

</div>

鼠标滑过