Подскажите, пожалуйста, как сделать такое меню, целый день мучаюсь. Вроде получилось, но не могу сделать границу слева!
Код:
<div id="menu_bottom">
<div class="left">
<a href="#"><div class="top"><span>Пункт 1</span></div></a>
<a href="#"><div><span>Пункт 1</span></div></a>
<a href="#"><div><span>Пункт 1</span></div></a>
<a href="#"><div><span>Пункт 1</span></div></a>
<a href="#"><div><span>Пункт 1</span></div></a>
<a href="#"><div class="bottom"><span>Пункт 1</span></div></a>
</div>
</div>
Код:
#menu_bottom{
width:175px;
background:#fae2d3 url(image/menu_border_vert.jpg) right repeat-y;
display:block;
}
#menu_bottom .left{
width:175px;
background:url(image/menu_border_vert.jpg) left repeat-y;
}
#menu_bottom .top{
background:url(image/menu_top.jpg) no-repeat top;
border-top:none;
}
#menu_bottom a:hover .top{
background:#e66d24 url(image/menu_top_h.jpg) no-repeat top;
}
#menu_bottom .bottom{
background:url(image/menu_bottom.jpg) no-repeat bottom;
}
#menu_bottom a:hover .bottom{
background:#e66d24 url(image/menu_bottom_h.jpg) no-repeat bottom;
}
#menu_bottom div{
width:100%;
background:url(image/delimeter_menu.gif) no-repeat;
padding-bottom:10px;
padding-top:10px;
border-top:1px solid #e66d24;
}
#menu_bottom span{
padding-left:15px;
}
#menu_bottom a{
text-decoration:none;
outline:none;
color:#000000;
}
#menu_bottom a:hover{
background:#e66d24;
color:#FFFFFF;
}
#menu_bottom a:hover div{
background:#e66d24;
color:#FFFFFF;
}