尝试使用@media 屏幕和悬停创建下拉菜单

Question

I am trying to adjust the layout of my website depending on the size of the screen. I want my buttons with images inside them to have dropdown menus when you hover over them, however I am putting the class name dropdown-btn and then hover, yet it doesn't respond. Is it some syntax error?

 @media screen and (min-width: 1900px) { .sidenav{ display: inline-block; position: relative; left: auto; width: auto; height: 100px; } .sidenav-free-text{ display: none; } .dropdown-container { display: none; } .dropdown-btn:hover .dropdown-container a{ display: block; visibility: visible; } .dropdown-btn{ width: 8.87%; display: inline-block; } .dropdown-btn img { width: 100%; } .dropdown-container { display: none; position: absolute; z-index: 1; } }

 <div class="sidenav"> <div class="sidenav-free-text"> <p>text.</p> </div> <a onclick="PlayMusicFinishedHTML('Home')" onmouseover="playMusicHover()" >Microsoft και MS-DOS (1974-1981)</a> <button class="dropdown-btn"><img src="../../../images\\Windows banners\\Windows1.0.png" alt="win1.0" onclick="PlayMusicFinishedHTML()" onmouseover="playMusicHover()"> </button> <div class="dropdown-container"> <a onclick="PlayMusicFinishedHTML('Windows DR5')" onmouseover="playMusicHover()">Windows DR5 (01/11/1984)</a> <a onclick="PlayMusicFinishedHTML('Windows PRE')" onmouseover="playMusicHover()">Windows Premiere Edition (30/07/1985)</a> <a onclick="PlayMusicFinishedHTML('Windows 1.04')" onmouseover="playMusicHover()" style="background-image: radial-gradient(circle, red, green, blue, yellow);">Windows 1.04 (08/04/1987)</a> </div>

Answer 1

There's a few problems with your code, I'll cover each individually.

1. (min-width: 1900px)

This reads as "apply the following styles when the page width is at least 1900px wide". Meaning you have to have a really wide browser to see the styles applied. I believe you have this backwards, and want to apply styles when the screen is small. You can do this simply by changing the media query to use max-width instead.

@media screen and (max-width: 800px) {

2. The selector .dropdown-btn:hover .dropdown-container a

A couple things here. .dropdown-container is a sibling of .dropdown-btn , not a child. You also hide .dropdown-container , not the a elements. Use the adjacent sibling combinator and apply styles to the dropdown-container instead:

.dropdown-btn:hover + .dropdown-container { }

With those changes I believe you will be closer to what you had in mind. Note that I simplified your HTML a bit just for ease of reading.

 @media screen and (max-width: 800px) { .sidenav { display: inline-block; position: relative; left: auto; width: auto; height: 100px; } .sidenav-free-text { display: none; } .dropdown-container { display: none; } .dropdown-btn:hover + .dropdown-container { display: block; } .dropdown-btn { display: inline-block; } .dropdown-btn img { width: 100%; } .dropdown-container { display: none; position: absolute; z-index: 1; } }

 <div class="sidenav"> <div class="sidenav-free-text"> <p>text.</p> </div> <a>Microsoft και MS-DOS (1974-1981)</a> <button class="dropdown-btn">Hover me</button> <div class="dropdown-container"> <a>Windows DR5 (01/11/1984)</a> <a>Windows Premiere Edition (30/07/1985)</a> <a style="background-image: radial-gradient(circle, red, green, blue, yellow);">Windows 1.04 (08/04/1987)</a> </div> </div>