两列下拉菜单问题

Question

我有一个下拉菜单，我需要将它设为两列。我尝试插入#double li {}和.dropdown但没有效果。 我无法修复它，当我插入第二列时，它会消除背景bg_submenu_mid1.png图片并保持顶部和底部。请帮忙，谢谢！

以下是HTML代码：

<div class="wrapper_home">
<div class="home_logo"><img src="img/logo.png" width="443" height="79" alt=""></div>
<nav class="home_nav">
<div class="header_nav">
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="ist.html">Ist</a></li>
 <li><a href="#">DpdnMenu</a>
<ul class="children1">
<li><a href="">2010</a></li>
<li><a href="">2012</a></li>
<li><a href="">2013</a></li>
<li><a class="last"">2014</a></li>
</ul>
</li>
<li><a href="part.html">Part</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>

CSS：

.header_nav ul li ul.children1 {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
background: url(img/bg_submenu_top1.png) no-repeat 0px 0px;
padding-top: 35px;
display: block;
margin-left: 7px;
width: 400px;
}
.header_nav ul li ul li {
float: none;
background: url(img/bg_submenu_mid1.png) repeat-y 0px 0px;
display: block;
}

.header_nav ul li ul li:last-child {
background: url(img/bg_submenu_foo1.png) no-repeat 0px bottom;
padding-bottom: 22px;
}
.header_nav ul li ul li a.last {
background: url(none);

}
.header_nav ul li ul li a {
display: block;
font-size: 13px;
line-height: 26px;
font-weight: 400;
text-align: left;
width: 150px;
color: #777777;
margin: 0px 30px;
padding: 0px 0px 0px;
background: url(img/bg_submenu_border.png) repeat-x 0px bottom;
 }

 .header_nav ul li ul li a:hover {
color: #011929;

 }