0

我无法根据需要格式化导航栏。我有这样的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 岁以下的两个列表并排出现。它们只是堆叠在另一个之上。如何让他们并排站立，如何让所有十进制列表直接在其父列表下格式化？

4

2 回答 2

0

您的标记格式不正确。您有几个<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>
于 2013-02-06T22:53:59.813 回答
0

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

于 2013-02-06T23:34:06.960 回答