Question

#menu {
	overflow: hidden;
	background: #202020;
}

#menu ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
}

#menu a {
	display: block;
	position: relative;
	padding: 0px 100px 0px 40px;
	line-height: 70px;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Varela Round', sans-serif;
	font-size: 13px;
	color: rgba(255,255,255,0.5);
	border: none;
}

/* Dropdown Content (Hidden by Default) */
#menu .dropdown-container{
	position: relative;
}
#menu .dropdown {
	position: relative;
	display: inline-block;

  }
#menu .dropdown-content {
	position: absolute;
	display: none;
	background-color: #202020;
	min-width: 160px;
	z-index: 9999;
	box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.5);
  }
  
  /* Links inside the dropdown */
#menu .dropdown-cotainter a {
	color: rgba(255,255,255,0.5);
	padding: 3px;
	position: relative;
	text-decoration: none;
	display: Block;
	z-index: 9999;
  }
  
  /* Change color of dropdown links on hover */
#menu .dropdown-content a:hover {color: #ddd;}
  
  /* Show the dropdown menu on hover */
#menu .dropdown:hover .dropdown-content {
	display: block;
	z-index: 9999;
}

import React from 'react';
import {
  Link
} from 'react-router-dom';

function Header() {
  return (
    <div id="header-wrapper">
      <div id="header" class="container">
        <div id="logo">
          <img src="images/poli.png" height="200" alt="" />
        </div>
      </div>
      <div id="menu" class="container">
        <ul>
          <li><Link to="/">Homepage</Link></li>
          <li>
            <div class="dropdown">
              <a>Services</a>
              <div class="dropdown-container">
                <div class="dropdown-content">
                  <a>Link 1</a>
                  <a>Link 2</a>
                  <a>Link 3</a>
                </div>
              </div>
            </div>
          </li>
          <li><Link to="/AboutUs">About Us</Link></li>
          <li><Link to="/ContactUs">Contact Us</Link></li>
        </ul>
      </div>
    </div>
  );
}

export default Header;

当我将鼠标悬停在链接上时，我可以看到菜单显示的一部分但不是全部，我认为这是因为容器覆盖了它，但是我不知道如何使菜单独立于容器或位于容器上方被显示。我试图将位置更改为绝对位置，但仍然无法正常工作。有人可以帮我吗：D

Answer 1

如果您删除overflow: hidden，则代码有效。

#menu {
    overflow: hidden; //remove this line
    background: #202020;
}

悬停时不显示下拉菜单

1 个答案: