Css menu dropdown

user_13569576 0
Viewed 48

I currently have a lack of idea on a css menu that I would like to realize. What I would like to do is that my menu is up and not down but that my TEST is at the top of my list and does not move until I no longer have my mouse on it. I don’t know how to do that right now, and if anyone has any ideas, I take it.Thank you for a good day.

.span1 {
  background-color: #e83737;
  color: white;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  top: 413px;
  left: 120px;
  width: 192px;
  height: 68px;
  font-size: 20px;
}

.span1:hover {
  background-color: #e83737;
  position: absolute;
  left: 120px;
  top: 123px;
  width: 192px;
  height: 68px;
  font-size: 20px;
}

.dropdown ul li:hover ul {
  height: initial;
  bottom: 100%;
  overflow: visible;
  background: lightgray;
}

.dropdown-child {
  display: none;
  background-color: #f28c8c;
  position: absolute;
  width: 192px;
  top: 190px;
  left: 120px;
}

.dropdown-child a {
  color: white;
  padding: 20px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-child {
  display: block;
}
<div class="dropdown">
  <span class="span1">TEST</span>
  <div class="dropdown-child">
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
  </div>
</div>

Codepen demo: https://codepen.io/tiboo__/pen/XWjoeQB

web css html javascript
2 Answers

Not sure if I got what you're trying to achieve but try to change .span1:hover { to .dropdown:hover .span1 {.

user_150255080

There must be a relative positioned parent for a child absolute block. Add this to your css:

.dropdown {
  position: relative;
}

And the positioning rules for .span1:

top: 0;
left: 0;

Also, some selectors contained extra rules and selectors.

.dropdown {
  position: relative;
}

.span1 {
  background-color: #e83737;
  color: white;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  top: 0;
  left: 0;
  width: 192px;
  height: 68px;
  font-size: 20px;
}

.dropdown ul li:hover ul {
  height: initial;
  bottom: 100%;
  overflow: visible;
  background: lightgray;
}

.dropdown-child {
  display: none;
  background-color: #f28c8c;
  width: 192px;
}

.dropdown-child a {
  color: white;
  padding: 20px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-child {
  display: block;
}
<div class="dropdown">
  <span class="span1">TEST</span>
  <div class="dropdown-child">
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
    <a href="">abc</a>
  </div>
</div>

user_135734440
Related