0

3 レイヤーの li ul メニューを作成したいのですが、3 レイヤーが 2 番目のレイヤーを覆っています。誰かが3番目のレイヤーを2番目のレイヤーのすぐ隣に配置するのを手伝ってくれますか?

コメントありがとうございます！

ベスト、W

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

<HEAD><title>bla</title>

<style type="text/css">
ul {
font-family : Arial, Verdana;
font-size : 18px;
font-weight: bold;
margin : 0;
padding : 0;
list-style : none;
z-index: -10;
}
ul li {
display : block;
position : relative;
float : left;
}
li ul {
display : none;
position : relative;
}
ul li a {
display : block;
text-decoration : none;
color : #ffffff;
border-top : 0 solid #ffffff;
padding : 6px 25px 6px 25px;
background : #033a96;
margin-left : 0;
white-space : nowrap;
}

ul li a:hover {
background : #9092c7;
}
li:hover ul {
display : block;
position : absolute;
z-index: 10;
}
li:hover li {
float : none;
font-size : 14px;
z-index: 10;
}
li:hover a {
background : #9092c7;
z-index: 10;
}
li:hover li a:hover {
background : #033a96;
z-index: 10;
}

</style>
</head>


<body >

            <TABLE  border=0 align="center" cellPadding=0 cellSpacing=0 valign="top">
              <TBODY valign="top">
              <TR valign="top">

             <TD width="100%" bgcolor="#FFFFFF">

                 <TABLE height=19 valign="top" cellSpacing=0 cellPadding=0 width="100%" border=0>
                 <tr>
                 <td height=35 bgcolor="#033a96" > 
                 <div id="menu_about" style="position: relative; z-index: 10;"> 
                 <ul id="menu">
                    <li ><a class="link" href="index.htm" >Layer 1</a>
                    <ul>
                            <li ><a href="#">Layer 2 blblb</a></li>
                            <li ><a href="#">Layer 2</a></li>
                            <ul >
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                            </ul>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                        </ul>

                    </li>


                    <li><a class="link" href="#about" data-link="second">Layer 1</a>
                        <ul>
                            <li ><a href="#">Layer 2 blblb</a></li>
                            <li ><a href="#">Layer 2</a></li>
                            <ul >
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                            </ul>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                        </ul>
                    </li>

                </div>
                </td> 
                </tr>
                </TABLE>                  

            </TD>
            </TR>
            </TBODY>
            </TABLE>

</BODY>
</HTML>
4

1 に答える 1

0

WYSIWYG (Dreamweaver など) を使用してコードを生成していると思われますか? これに関する 2 つの注意事項:

  • インライン スタイルを避けるようにしてください
  • 表形式のデータを除いて、表ベースのレイアウトを使用しないでください。div、nav、footer、header、および aside 要素を使用する

あなたのソリューションのために：

  1. すべての z-index を削除しました。それらは必要ありません
  2. 第 3 レベルの ul を第 2 レベルの li にネストするのを忘れました
  3. ホバーではなく、通常の状態の要素に font-size などのプロパティを設定してみてください (変更されません)。
  4. ul と li に名前を付けるか、少なくとも css で論理的な順序で配置することをお勧めします。これは非常に面倒です。

ナビゲーションを修正する最も重要な部分は、私が追加したこの css です

ul li ul li ul {
margin-left: 100%;
}

ネストされた ul とその子のマージンを親 div の幅に設定します。

したがって、完全な新しいCSSは次のとおりです。

ul {
font-family : Arial, Verdana;
font-size : 18px;
font-weight: bold;
margin : 0;
padding : 0;
list-style : none;
}
ul li {
display : block;
float : left;
}
ul li ul li ul {
margin-left: 100%;
}
li ul {
display : none;
}
ul li a {
display : block;
text-decoration : none;
color : #ffffff;
padding : 6px 25px 6px 25px;
background : #033a96;
white-space : nowrap;
}

ul li a:hover {
background : #9092c7;
}
li:hover ul {
display : block;
position : absolute;
}
li li {
float : none;
font-size : 14px;
}
li:hover a {
background : #9092c7;
}
li:hover li a:hover {
background : #033a96;
}

そしてあなたのhtml（関連部分のみ）：

<div id="menu_about" style="position: relative; z-index: 10;">
<ul id="menu">
    <li ><a class="link" href="index.htm" >Layer 1</a>
        <ul>
            <li><a href="#">Layer 2 blblb</a></li>
            <li><a href="#">Layer 2</a></li>
            <li><a href="#">Layer 2</a>
                <ul >
                    <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                    <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                </ul>
            </li>
            <li><a href="#">Layer 2</a></li>
            <li><a href="#">Layer 2</a></li>
        </ul>
    </li>
    <li><a class="link" href="#about" data-link="second">Layer 1</a>
        <ul>
        <li ><a href="#">Layer 2 blblb</a></li>
        <li ><a href="#">Layer 2</a>
            <ul >
                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
            </ul>
        </li>
        <li><a href="#">Layer 2</a></li>
        <li><a href="#">Layer 2</a></li>
        <li><a href="#">Layer 2</a></li>
        </ul>
    </li>
</ul>
</div>
于 2013-04-28T23:34:20.120 に答える