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 未満の 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 に答える