Kuba Krzyżyński Kuba Krzyżyński - 1 month ago 17
CSS Question

Submenu with divs

I was wondering if is it possible to create a submenu using divs? All online tutorials use this ul li thing. I don't know how to activate my submenu by hovering over an option. Should I add new class to "director" div? Incuding photos and code pieces.

HTML:



.menu_opcje {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
}
.menu_wysuwane {
min-width: 100px;
text-align: center;
border-bottom: dotted 2px black;
padding: 10px;
display: none;
}
.menu_wysuwane:hover {
background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
background-color: lightgray;
cursor: pointer;
}

<div id="menu">
<div class="menu_opcje">Strona główna</div>
<div class="menu_opcje">Galeria</div>
<div class="menu_opcje">Reżyserzy
<div>
<div class="menu_wysuwane">Quentin Tarantino</div>
<div class="menu_wysuwane">Bracia Coen</div>
<div class="menu_wysuwane">Wes Anderson</div>
</div>
</div>
</div>






Answer

It is semantically incorrect, though making it appear on hover, do like this

.menu_opcje:hover div {
  display: block;
}

Sample snippet

.menu_opcje {
  float: left;
  min-width: 100px;
  text-align: center;
  border-right: dotted 2px black;
  padding: 10px;
}
.menu_wysuwane {
  min-width: 100px;
  text-align: center;
  border-bottom: dotted 2px black;
  padding: 10px;
  display: none;
}
.menu_wysuwane:hover {
  background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
  background-color: lightgray;
  cursor: pointer;
}
.menu_opcje:hover div {
  display: block;
}
<div id="menu">
  <div class="menu_opcje">Strona główna</div>
  <div class="menu_opcje">Galeria</div>
  <div class="menu_opcje">Reżyserzy
    <div>
      <div class="menu_wysuwane">Quentin Tarantino</div>
      <div class="menu_wysuwane">Bracia Coen</div>
      <div class="menu_wysuwane">Wes Anderson</div>
    </div>
  </div>
</div>