CODEWITHSUNDEEP
javascripthtmlcssreactjs
Kerberos_666
Kerberos_666

Reputation: 21

dropdown menu doesn't show when i hover

#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;

when i hover on the link i can see a part of the menu showing but not all of it, i think it's because the container is covering it but i don't know how to make the menu independant or above the container to be shown. I tried to change position to absolute but it still doesn't work. can someone help me out :D

Upvotes: 0

Views: 61

Answers (1)

J4R
J4R

Reputation: 1104

if you remove overflow: hidden your code works.

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

Upvotes: 1

Related Questions