i want a subMenu appear as mouse hover on products while the other items(Home & Contact) hidden on mouse hover.
i'm practicing making a dropdown menu using html and css.
this is what i've tried .products:hover .menuBar>li:nth-child(odd) { display: none;}
any help.. thanks
this is my code:
body {
font-size: 18px;
}
li {
text-decoration: none;
list-style: none;
}
.menuBar {
position: relative;
display: flex;
justify-content: space-between;
background-color: green;
width: 700px;
padding: 20px;
margin: 0 auto;
}
.subMenu {
display: none;
}
.products:hover .subMenu {
display: flex;
justify-content: space-between;
position: absolute;
width: 40%;
left: 25%;
}
.products:hover .menuBar>li:nth-child(odd) {
display: none;
}
<body>
<ul class="menuBar">
<li>Home</li>
<li class="products">Products
<ul class="subMenu">
<li>Product A</li>
<li>Product B</li>
<li>Product C</li>
</ul>
</li>
<li>Contact</li>
</ul>
</body>
question from:
https://stackoverflow.com/questions/65849983/hiding-some-items-while-the-specific-items-pops-on-mouse-hover-how-i-am-pract 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
