changing a div's visibility through a button click/hover html

user_19169118 0
Viewed 42

disclaimer: i am new to html and don't know javascript so if possible to do only using html and css. also not native english and this is my first ever question on stack overflow so thank for your patience.

i have a div containing a list that should not be visible. i have a button that should display the div whenever i click it or hover it.

the problem is: -if the div is outside the button tag the hover thing doesn't work but the div looks perfect

div with list outside the button tag

-if the div is inside the button tag the hover "function" works but if i move to slowly i can't select any of the items from the list because it seems to me there is a little space between the button and the div; also the div looks weird like this: div with list inside the button tag

this should be the code:

  <style>
.total{
  margin-left: 61px;
  margin-right: 61px;
  height:100vh;
}
.meniu{
  position:absolute;
  top:0px;
  right:0px;
  height:61px;
  width:61px;
}


*{
  margin:0;
  padding:0;
}

.lista-container{
  background-color: lightgreen;
width:auto;
height:auto;
position:absolute;
top:61px;
right:15px;
border:solid black 2px;
display:none;
}

ul{
  list-style: none;
  font-size:20px;
  color: black;
  line-height: 40px;
}
ul li a{
  text-decoration:none;
  display:block;
}
ul li a:hover{
  background-color:lightblue;
}

.meniu:hover .lista-container{
  display:block;
}

      </style>
<body>

<div class="total" >
<button class="meniu" >Menu
  <div class="lista-container">
    <ul>
      <li><a href="#">Arcul de Triumf</a></li>
      <li><a href="#">Ateneul Roman</a></li>
      <li><a href="#">Casa Poporului</a></li>
      <li><a href="#">Muzeul Antipa</a></li>

    </ul>
  </div>
</button>


</div>



    </body>

been struggling with this for like 2 days thanks.

css html
1 Answers

Since you do nos cripting, you should remove the button which is a trigger to fire a script.

Then you have in CSS no selector to recognize if a button was clicked. A CSS-Solution would be to use a checkbox which can use a pseudo-selector :checked:

#button {
  display: none;
}

.total {
  margin-left: 61px;
  margin-right: 61px;
  height: 100vh;
}

.meniu {
  border: 1px solid black;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 61px;
  width: 61px;
}

* {
  margin: 0;
  padding: 0;
}

.lista-container {
  background-color: lightgreen;
  width: min-content;
  white-space: nowrap;
  height: auto;
  position: absolute;
  top: 61px;
  right: 15px;
  border: solid black 2px;
  display: none;
}

ul {
  list-style: none;
  font-size: 20px;
  color: black;
  line-height: 40px;
}

ul li a {
  text-decoration: none;
  display: block;
}

ul li a:hover {
  background-color: lightblue;
}

.meniu:hover .lista-container,
#button:checked + .meniu > .lista-container {
  display: block;
}
<div class="total">
  <input type="checkbox" id="button">
  <label for="button" class="meniu">Menu
    <div class="lista-container">
      <ul>
        <li><a href="#">Arcul de Triumf</a></li>
        <li><a href="#">Ateneul Roman</a></li>
        <li><a href="#">Casa Poporului</a></li>
        <li><a href="#">Muzeul Antipa</a></li>
      </ul>
    </div>
  </label>
</div>

user_140724200
Related