Showing one div by hovering over another with css

Question

I would like to make a drop-down menu but whenever I find them online they are so confusing, I thought I had it but it doesn't work what have I done wrong here:

css:

.dropDownContents{
    display:none;
    }
.dropdown:hover .dropDownContents{
    color:white;
    background-color:black;
    border:solid 1px white;
    vidibility: visible;
    display: block;

And the html:

<div class = "dropDownbtn">
    <button class = "dropdown">H1</button>
    <a href = "" class = "dropDownContents">P1</a>
    <a href = "" class = "dropDownContents">P2</a>
</div>

It's `visibility` not `vidibility`. But it makes no sense to use visibility anyway since you're changing the display property. You're also missing a closing `}` — j08691, Aug 30 '17 at 20:56
My pure-CSS drop-down menus are organized as `ul` with `li` and `li > ul` children, all within a `
` ... so my CSS is all about `#menu` with `#menu ul > li` and `:hover` rules, so things like `#menu ul li` and `#menu ul ul` etc. I have things like `#menu > ul > li:hover { display: block; }` where otherwise, without hover, they are `display: none;`. My actual menu picks are `` as you have. You shouldn't have to put classes on everything; it is the top-level class (or id) that says the thing is a menu. — Stephen P, Aug 30 '17 at 22:50

raina77ow · Accepted Answer · 2017-08-30T21:06:59.940

See, in your example elements with .dropDownContents are not descendants of .dropdown - they're its siblings. So the selector should be changed accordingly:

.dropDownContents{
    display:none;
}
.dropdown:hover ~ .dropDownContents{
    color:white;
    background-color:black;
    border:solid 1px white;
    display: block;
}

<div class="dropDownbtn">
    <button class="dropdown">H1</button>
    <a href="" class="dropDownContents">P1</a>
    <a href="" class="dropDownContents">P2</a>
</div>

It's not that simple, however: as long as you hover over any of those a elements, they disappear - as the pointer moves out from the button, and its hover state is dropped.

That's why most of the time dropdown menus are implemented as descendants (children usually) of the element triggering its appearance:

.dropDownContents{
    display:none;
}
.dropDownbtn:hover .dropDownContents{
    color:white;
    background-color:black;
    border:solid 1px white;
    display: block;
}

<div class="dropDownbtn">
    <button>H1</button>
    <a href="" class="dropDownContents">P1</a>
    <a href="" class="dropDownContents">P2</a>
</div>

farmer · Answer 2 · 2017-08-31T12:52:03.523

This drop down menu works using CSS. I just included it on the page and would give credit where I found it - but have long since lost that page.

Also my Drop Down Menu would not work once I published to the website until I turn Compatibility Mode OFF(Yes we are required to use IE and have no control over that decision):

<style type="text/css" media="screen"> 
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    font-size: 15px;
    border: none;
    cursor: pointer;
}

.dropdown {
    float:left;
    position: relative;
    display: inline-block;
}

 .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    -moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
 }

 .dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

    </style>

The DROP DOWN MENU:

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown" >
  <button class="dropbtn">Admin</button>
  <div class="dropdown-content">
    <a href="#">@Html.ActionLink("Re Names", "Index", "MTS_RENAME")</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Dropdown2</button>
  <div class="dropdown-content">
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
  </div>
</div>

Showing one div by hovering over another with css

2 Answers2