Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
613 views
in Technique[技术] by (71.8m points)

html - Hiding some items while the specific items pops on mouse hover . how? i am practicing making a dropdown menu

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...