0
追加オプションの上に、より多くのオプションが表示されます。水平ナビゲーションバー
https://i.stack.imgur.com/M7GWI.jpg
しかし、スクリーンショットに見られるように、「Option」、「Option2」、「Option3」はインラインではありません。これが私が達成しようとしているものです。
#menu{
}
#ulmain{
}
#limain{
\t list-style:none;
}
#ulsub {
\t visibility:hidden;
}
#lisub{
\t list-style:none;
\t display:inline;
}
#ulmain:hover #ulsub{
\t visibility:visible;
}
#ulsubsub {
\t visibility:hidden;
}
#lisub:hover #ulsubsub{
\t visibility:visible;
}
#lisubsub{
\t list-style:none;
\t display:inline;
}
#menu a{
\t background-color:pink;
\t text-decoration:none;
}
#ulmain, #ulsub{
\t display:inline;
}<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <link rel="stylesheet" href="index.css">
\t \t <title>New Menu</title>
\t </head>
\t <body>
\t \t <div id="menu">
\t \t \t <ul id="ulmain">
\t \t \t \t <li id="limain"><a id="amain" href="#">Menu</a>
\t \t \t \t \t <ul id="ulsub">
\t \t \t \t \t \t <li id="lisub"><a id="asub" href="#">Option</a>
\t \t \t \t \t \t \t <ul id="ulsubsub">
\t \t \t \t \t \t \t \t <li id="lisubsub"><a href="#">Sub-Option</a></li>
\t \t \t \t \t \t \t \t <li id="lisubsub"><a href="#">Sub-Option2</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li id="lisub"><a href="#">Option2</a>
\t \t \t \t \t \t \t <ul id="ulsubsub">
\t \t \t \t \t \t \t \t <li id="lisubsub"><a href="#">Sub-Option3</a></li>
\t \t \t \t \t \t \t \t <li id="lisubsub"><a href="#">Sub-Option4</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li id="lisub"><a href="#">Option3</a>
\t \t \t \t \t \t \t <ul id="ulsubsub">
\t \t \t \t \t \t \t \t <li id="lisubsub"><a href="#">Sub-Option5</a></li>
\t \t \t \t \t \t \t \t <li id="lisubsub"><a href="#">Sub-Option6</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t </ul>
\t \t </div>
\t </body>
</html>どのように私は、 'オプション'、 'オプション2'、および 'オプション3' インラインを取得することができます。ここではHTMLとは？ありがとう。
はここに読みました：https://css-tricks.com/the-difference-between-id-and-class/をして、あなたのコードを調整します。 – Gerard