html - 格式化双列表

Question

我无法按需要格式化导航栏。我有这样的 html 设置

<nav>
   <ul>
      <li><a href="#">1</a><li>
           <ul>
               <li><a href="#">1.1</a></li>
               <li><a href="#">1.2</a></li>
           </ul>
      <li><a href="#">2</a><li>
           <ul>
               <li><a href="#">2.1</a></li>
               <li><a href="#">2.2</a></li>
           </ul>
           <ul>
               <li><a href="#">2.3</a></li>
               <li><a href="#">2.4</a></li>
           </ul>
      <li><a href="#">3</a></li>
   </ul>
</nav>

我的CSS是这样的

* {
margin: 0;
padding: 0;
color: #294076;
}

html {
background-image: url('2.jpeg');
}

nav {
min-width: 660px;
height:60px;
position absolute;
left:240px; 
}

header {
float: left;
min-width: 300px;
height: 60px;
font-size:45px;

}

nav ul {    
display: inline-block;
list-style-type:none;
margin: 6px -10px 0px 75px;
padding: 0;
font-size:25px;
}

nav ul > ul {
position: absolute;
}

ul > ul li {
float: top;
}

nav ul ul li {
display: none;
}

aside {
float: left;
font-size: 5px;
width: 160px;
padding: 0px;
margin: 0px;
}

section {
font-size: 10px;
position: absolute;
left: 165px;
min-width: 800px;       
}

a {
text-decoration: none;
}

nav ul:hover ul li {
display: block;
font-size: 15px; 
}

带小数点的列表不会直接内嵌在它们的父列表之下。我试过弄乱 position 属性并给它不同的间距，但它似乎仍然没有正确地格式化它们并将它们全部移动到彼此之上。我也无法让 2 岁以下的两个列表并排显示。它们只是堆叠在另一个之上。我怎样才能让他们并排站在一起，我怎样才能让所有的十进制列表直接在他们的父列表下格式化？

Answer 1

放置子菜单<ul>适当的元素<li>元素。像这样:

<li>
    <a href="#">2</a>
    <ul>
        <li><a href="#">2.1</a></li>
        <li><a href="#">2.2</a></li>
        <li><a href="#">2.3</a></li>
        <li><a href="#">2.4</a></li>
    </ul>
<li>

工作演示:http://jsbin.com/onugic/2/edit

始终提供HTML、CSS、JS相关问答的demo。