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; 
}

使用小数设置的列表不会直接在其父级列表下内联。我已经尝试弄乱了位置属性并赋予它各种间距，但它似乎仍然没有正确地形成它们并将它们全部移到彼此之上。我也无法将我在2岁以下的两个列表并排显示。它们只是堆叠在另一个之上。如何让它们并排站立？如何让所有小数列表直接在其父列表下进行格式化？

Answer 1

您的标记格式不正确。您有几个未关闭的<li>元素。

也许这更接近你想要的东西？

<nav>
<ul>
    <li>
        <a href="#">1</a>
        <ul>
            <li>
                <a href="#">1.1</a>
            </li>
            <li>
                <a href="#">1.2</a>
            </li>
        </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>
    <li>
        <a href="#">3</a>
    </li>
</ul>
</nav>

Answer 2

将子菜单<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相关问题和答案的演示。

格式化双列表

2 个答案: