1

シンプルな css ドロップダウン メニューがありますが、サブ メニューが親メニューのすぐ下にドロップされないようです。現在の外観へのリンクを次に示します。

デモ

助けてください。ありがとうございました。

*********ここにhtmlがあります*************************

<header>
<table>
      <td>
      <h1>Header</h1>
        <nav>
    <ul>
    <li><a href="#">menu1</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    <li><a href="#">menu2</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    <li><a href="#">menu3</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    <li><a href="#">menu4</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    </ul>
    </nav>
    </td>
    </table>
</header>

************** CSS はこちら************************

table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
header {
position: absolute;
top:0;
width: 100%;
border: 1px solid black;
}
header h1 {
display: inline-block;
}
nav {
display: inline-block;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
}
nav ul ul li a{
display: block;
}
nav li ul {
display: none;
}
nav li:hover ul{
display:block;
}
nav ul ul li{
display:block;
}
4

1 に答える 1

2

ulネストされたs が親に対して相対的に表示されるようにするには、いくつかの小さな変更が必要ですli。

nav li {
    display: inline;
    position: relative;
}

nav li ul {
    display: none;
    position: absolute;
    padding: 0;
}
于 2013-08-18T21:35:45.350 に答える