CODEWITHSUNDEEP
jqueryhtmlcss
William
William

Reputation: 241

HTML CSS and jquery: Menu with Horizontal Submenu

I am work on this HTMl, CSS and maybe some javascript. I am trying create a menu with submenu, so when I hover on my menu, I want the submenu to display below with absolute position. My main menu is work, but the submenu is not work like the way I want it to. When I hover on my menu, the submenu does show, but only the first word is showing and the rest of the content are not showing. Below I image and code and also what I want to achieve. Any help, please?

Image of Main menu
enter image description here

On hover, this is what I am getting for my submenu enter image description here

And this is what I am trying to achieve enter image description here

Below is the HTML code and CSS 

body {
     padding: 0;
     margin: 0;
    }

    .container-fluid.wrapper {
    flex-direction: column;
    padding-bottom: 0px;
    }

    .navbar {
     overflow: hidden;
     background-color: #333;
     }

    .navbar a {
     float: left;
     font-size: 16px;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     }

     .nav-item {
     color: #000;
     text-decoration: none;
     display: inline;
     overflow: hidden;
    }

    .dropdown {
     float: left;
     position: relative;
     }
    .nav-item .dropdown-content {
    color: #000;
    float: left;
    position: absolute;
    display: none;
    z-index: 1;
    left: 0;
    top: 10px;
    width: 100% !important;
    }

   
    .nav-item .dropdown-content a {
     float: left;
     color: white;
     text-decoration: none;
     display: inline;
    }

    .nav-item .dropdown-content a{
     display: inline !important;
    }

    .nav-item:hover {
     color: #FFF;
     background: red !important;}
     .nav-item:hover a{
      color: #FFF !important;
      }

     .navbar-nav li:hover .dropdown-content {
       display: block;
      }

      .navbar-nav .dropdown-content a:hover {
       text-decoration: underline;
      }

      .navbar a:hover, .subnav:hover .subnavbtn {
        background-color: red;
       }

      .subnav-content a:hover {
        background-color: #eee;
        color: black;
       }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

  <header>
    <div class="container-fluid wrapper p-0">

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <div class="dropdown">
                <a class="nav-link" href="#">Women <span class="sr-only">(current)</span></a>
                <div class="dropdown-content">
                  <a href="#">Computer Science</a>
                  <a href="#">Math</a>
                  <a href="#">Other</a>
                </div>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Children</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Man</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <div class="conta-fluid">

  </div>
</body>
</html>

Upvotes: 1

Views: 1077

Answers (1)

Mouser
Mouser

Reputation: 13304

You just need to change a few things:

You've put position: relative on the dropdown container which has the buttons. This makes that when you absolutely position the menu it will get clipped by the container. So I've deleted this from 

.dropdown {
  float: left;
}

Furthermore I've edited the menu:

.nav-item .dropdown-content {
  ...
  background-color: red;
  top: 80px;
}

Inserted a red color so it sticks out against the background, like the example and gave it an absolute position on the page of 80px from the top.

body {
  padding: 0;
  margin: 0;
}

.container-fluid.wrapper {
  flex-direction: column;
  padding-bottom: 0px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-item {
  color: #000;
  text-decoration: none;
  display: inline;
  overflow: hidden;
}

.dropdown {
  float: left;

}

.nav-item .dropdown-content {
  background-color: red;
  color: #000;
  float: left;
  position: absolute;
  display: none;
  z-index: 2;
  left: 0;
  top: 80px;
  width: 100% !important;
}

.nav-item .dropdown-content a {
  float: left;
  color: white;
  text-decoration: none;
  display: inline;
}

.nav-item .dropdown-content a {
  display: inline !important;
}

.nav-item:hover {
  color: #FFF;
  background: red !important;
}

.nav-item:hover a {
  color: #FFF !important;
}

.navbar-nav li:hover .dropdown-content {
  display: block;
}

.navbar-nav .dropdown-content a:hover {
  text-decoration: underline;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: red;
}

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <header>
    <div class="container-fluid wrapper p-0">

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <div class="dropdown">
                <a class="nav-link" href="#">Women <span class="sr-only">(current)</span></a>
                <div class="dropdown-content">
                  <a href="#">Computer Science</a>
                  <a href="#">Math</a>
                  <a href="#">Other</a>
                </div>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Children</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Man</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <div class="conta-fluid">

  </div>
</body>

</html>

Upvotes: 1

Related Questions