带有两列问题的CSS下拉菜单

Question

我已经制作了菜单，但它给了我一些问题。由于某些原因，在我的小提琴中，两列不能在第一个菜单上正确显示，而在第二个菜单上，背景颜色不均匀。如果它们太长，还会出现溢出的问题。有什么想法吗？

非常感谢你！

http://jsfiddle.net/001u1n48/1/

<div id="navbar">
   <ul id="dropdown">
      <li class="topnav"><a href="#">Menu 1</a>
     <ul>
        <div class="column">
           <li><a href="#">Hyperlink 1</a></li>
           <li><a href="#">Hyperlink 2</a></li>
           <li><a href="#">Hyperlink 3</a></li>
        </div>
        <div class="column">
           <li><a href="#">Hyperlink 4</a></li>
           <li><a href="#">Hyperlink 5</a></li>
           <li><a href="#">Hyperlink 6</a></li>
        </div>
     </ul>
     <li class="topnav"><a href="#">Menu 2</a>
     <ul>
        <div class="column">
           <li><a href="#">Hyperlink 1asdfasdf</a></li>
           <li><a href="#">Hyperlink 2</a></li>
           <li><a href="#">Hyperlink 3fadsfasdfasdfasdfasdf</a></li>
        </div>
  </li>

Answer 1

JsFiddle

将width:50%更改为width:100%，如果您希望拖曳列位于Meun 1的一行中。您应该合并Menu 1的两列。

.column {
    display:inline-block;
    list-style-type: none;
    float: left;
    padding: 1 1 1 1;
    width:100%;
}