CSSをJSに渡すようにトレーニングしていますが、ドロップダウンメニューの実行に問題があるため、心配しています。
私はすでに得ている概念ですが、それを機能させると、一種のバグが発生し、を移動しnavます。
header {
overflow: auto;
}
header img {
float: left;
margin-left: 300px;
margin-top: 10px;
}
header img:hover {
opacity: 0.8;
}
nav {
float: right;
margin-right: 250px;
margin-top: 40px;
}
nav ul {
padding: 0px;
}
nav ul li {
display: inline;
margin-right: 50px;
border-right: 1px solid black;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color: black;
text-decoration: none;
font-weight: bold;
font-family: roboto;
margin-right: 50px
}
nav ul li a:hover {}
nav li ul {
display: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li:hover li {
float: none;
}<header>
<img src="logo.png">
<nav>
<ul>
<li>
<a href="#">Menu 01</a>
<ul>
<li><a href="#">Submenu 01</a></li>
</ul>
</li>
<li><a href="#">Menu 02</a></li>
<li><a href="#">Menu 03</a></li>
<li><a href="#">Menu 04</a></li>
</ul>
</nav>
</header>imgものの位置を明確にするために、タグ付きのコードを送信しました。私もそのことを学んでいるので、他のモニターではおそらく非常に悪いでしょう。
nav li ul{
display: none;
position:absolute;
}
nav li:hover ul{
display: block;
}それで全部です
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加