CODEWITHSUNDEEP
javascripthtmlcss
FatimahFatCakes
FatimahFatCakes

Reputation: 331

HTML / CSS top horizontal navigation bar

I need help with my top horizontal navigation bar. Currently i have a dropdown menu and i'm not sure why when i hover on it and the dropdown opens, the background colour of the nav bar extends further down. Can someone help me with this. Thanks

Here is jsbin

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffff00;
    z-index: 10;
}

.topmenu {
    float: left;
    font-family: 'Lato', sans-serif;
}

.topmenu a {
    display: block;
    color: #424242;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #c7cc00;
    color: white;
}

.dropdown:hover .dropbtn {
    background-color: green;
}

li.dropdown {
    display: inline-block;
    text-align: left;
}

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

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

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

.dropdown:hover .dropdown-content {
    display: block;
}
<ul class = "topnav">
   <h3>
    <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li>
    <li class = "topmenu"><a href="index.html">Home</a></li>
    <li class = "topmenu"><a href="context.html">Context</a></li>
    <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li>
    <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li>
    <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li>
    <li class = "topmenu"><a href="aboutUs.html">About Us</a></li>
    <li class = "topmenu dropdown">
        <a href="javascript:void(0)" class="dropbtn">Help</a>
        <div class="dropdown-content">
            <a href="#">FAQ</a>
            <a href="#">Contact</a>
        </div>
    </li>
    </h3>
</ul>
<div class="content">
<p>ABOUT US</p>
<p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p>
</div>

Upvotes: 1

Views: 1033

Answers (4)

Minal Chauhan
Minal Chauhan

Reputation: 6148

You need to add position:absolute instead of position:relative in .dropdown-content

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  //overflow: hidden;
  background-color: #ffff00;
  z-index: 10;
}

.topmenu {
  float: left;
  font-family: 'Lato', sans-serif;
}

.topmenu a {
  display: block;
  color: #424242;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #c7cc00;
  color: white;
}

.dropdown:hover .dropbtn {
  background-color: green;
}

li.dropdown {
  display: inline-block;
  text-align: left;
  position:relative;
}
li.dropdown:hover .dropdown-content {
  display:block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}

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

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

.dropdown:hover .dropdown-content {
  display: block;
}
.content {
    margin-top: 75px;
}
<!DOCTYPE html>

<html>
    <head>
        <title>MIE - About Us</title>
        <link rel="stylesheet" type="text/css" href="Index.css">
        <link rel="stylesheet" type="text/css" href="topNav.css">
        <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> -->
    </head>
    
  <h1>Money Isn't Everything</h1>
    <body>
        <ul class = "topnav">
           <h3>
            <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li>
            <li class = "topmenu"><a href="index.html">Home</a></li>
            <li class = "topmenu"><a href="context.html">Context</a></li>
            <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li>
            <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li>
            <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li>
            <li class = "topmenu"><a href="aboutUs.html">About Us</a></li>
            <li class = "topmenu dropdown">
                <a href="javascript:void(0)" class="dropbtn">Help</a>
                <div class="dropdown-content">
                    <a href="#">FAQ</a>
                    <a href="#">Contact</a>
                </div>
            </li>
            </h3>
        </ul>
        <div class="content">
        <p>ABOUT US</p>
        <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p>
        </div>
    </body>

</html>

Upvotes: 1

Maulik
Maulik

Reputation: 785

just remove the overflow from 'topnav' and apply absolute position to '.dropdown-content'

See the Below Snippet:

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    //overflow: hidden;  /* Change Here */
    background-color: #ffff00;
    z-index: 10;
}

.topmenu {
    float: left;
    font-family: 'Lato', sans-serif;
}

.topmenu a {
    display: block;
    color: #424242;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #c7cc00;
    color: white;
}

.dropdown:hover .dropbtn {
    background-color: green;
}

li.dropdown {
    display: inline-block;
    text-align: left;
}

.dropdown-content {
    display: none;
    position: absolute;  /* Change Here */
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

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

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

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>

<html>
    <head>
        <title>MIE - About Us</title>
        <link rel="stylesheet" type="text/css" href="Index.css">
        <link rel="stylesheet" type="text/css" href="topNav.css">
        <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> -->
    </head>
    
  <h1>Money Isn't Everything</h1>
    <body>
        <ul class = "topnav">
           <h3>
            <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li>
            <li class = "topmenu"><a href="index.html">Home</a></li>
            <li class = "topmenu"><a href="context.html">Context</a></li>
            <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li>
            <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li>
            <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li>
            <li class = "topmenu"><a href="aboutUs.html">About Us</a></li>
            <li class = "topmenu dropdown">
                <a href="javascript:void(0)" class="dropbtn">Help</a>
                <div class="dropdown-content">
                    <a href="#">FAQ</a>
                    <a href="#">Contact</a>
                </div>
            </li>
            </h3>
        </ul>
        <div class="content">
        <p>ABOUT US</p>
        <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p>
        </div>
    </body>

</html>

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56650

Do you want something like this?

Note: Please click on full page link in the below snippet window, to see the output properly!

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffff00;
  z-index: 10;
}

.topmenu {
  float: left;
  font-family: 'Lato', sans-serif;
}

.topmenu a {
  display: block;
  color: #424242;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #c7cc00;
  color: white;
}

.dropdown:hover .dropbtn {
  background-color: green;
}

li.dropdown {
  display: inline-block;
  text-align: left;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

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

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

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

.content{
  margin-top:75px;
}
<!DOCTYPE html>

<html>

<head>
  <title>MIE - About Us</title>
  <link rel="stylesheet" type="text/css" href="Index.css">
  <link rel="stylesheet" type="text/css" href="topNav.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> -->
</head>

<h1>Money Isn't Everything</h1>

<body>
  <ul class="topnav">
  <h3>
    <li class="topmenu"><img src="logomain.png" style="width:150px;height:64px;"></li>
    <li class="topmenu"><a href="index.html">Home</a></li>
    <li class="topmenu"><a href="context.html">Context</a></li>
    <li class="topmenu"><a href="countryExamples.html">Country Examples</a></li>
    <li class="topmenu"><a href="takeTheTest.html">Take the Test </a></li>
    <li class="topmenu"><a href="loginSignup.html">Login/Signup</a></li>
    <li class="topmenu"><a href="aboutUs.html">About Us</a></li>
    <li class="topmenu dropdown">
      <a href="javascript:void(0)" class="dropbtn">Help</a>
      <div class="dropdown-content">
        <a href="#">FAQ</a>
        <a href="#">Contact</a>
      </div>
    </li>
    </h3>
  </ul>
  <div class="content">
    <p>ABOUT US</p>
    <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p>
  </div>
</body>

</html>

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

You use position:relative in dropdown so navbar extends yellow color.

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;    
    background-color: #ffff00;
    z-index: 10;
}

.topmenu {
    float: left;
    font-family: 'Lato', sans-serif;
}

.topmenu a {
    display: block;
    color: #424242;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #c7cc00;
    color: white;
}

.dropdown:hover .dropbtn {
    background-color: green;
}

li.dropdown {
    display: inline-block;
    text-align: left;
    position: relative;
}

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

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

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

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>

<html>
    <head>
        <title>MIE - About Us</title>
        <link rel="stylesheet" type="text/css" href="Index.css">
        <link rel="stylesheet" type="text/css" href="topNav.css">
        <!-- <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"> -->
    </head>
    
  <h1>Money Isn't Everything</h1>
    <body>
        <ul class = "topnav">
           <h3>
            <li class = "topmenu"><img src = "logomain.png" style = "width:150px;height:64px;"></li>
            <li class = "topmenu"><a href="index.html">Home</a></li>
            <li class = "topmenu"><a href="context.html">Context</a></li>
            <li class = "topmenu"><a href="countryExamples.html">Country Examples</a></li>
            <li class = "topmenu"><a href="takeTheTest.html">Take the Test </a></li>
            <li class = "topmenu"><a href="loginSignup.html">Login/Signup</a></li>
            <li class = "topmenu"><a href="aboutUs.html">About Us</a></li>
            <li class = "topmenu dropdown">
                <a href="javascript:void(0)" class="dropbtn">Help</a>
                <div class="dropdown-content">
                    <a href="#">FAQ</a>
                    <a href="#">Contact</a>
                </div>
            </li>
            </h3>
        </ul>
        <div class="content">
        <p>ABOUT US</p>
        <p>information on us (NAMES, SID, UNIKEY, YEAR, DEGREE)</p>
        </div>
    </body>

</html>

Upvotes: 1

Related Questions