Reputation: 21

Multiple Drop Downs in Navigation Bar Overlapping each other in a HTML page

I am trying to implement two drop down items in a html page. But the problem is they are not position right at the bottom of there drop down text, but they are overlapping each other. Try margin property, but I want to position them automatically. I made the style sheet code so that i could use to universely use it, wherever I like, and to show the drop content, just I have to add hover event in the drop down

for the dropdown content, which will position it to absolute with block display.

The CSS Code is:

.NavBar{
    padding: 10px 10px 10px 0px;
    margin: 0;
    background-color: #616161;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-family: Arial, sans-serif;
}
.NavBarList{
    display: inline;
    padding: 10px;
    background-color: #616161;
    color: white;
    margin: 0;
}
.NavBarList:hover{
    background-color: black;
}
.content{
    display: none;
    margin: 10px 0 0 0;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
    z-index: 1;
}
.content a{
    display: block;
    background-color: white;
    color: black;
    min-width: 100px;
    text-decoration: none;
    padding: 5px;
}
.content a:hover{
    background-color: #81D4FA;
}
.content a:hover .NavBarList{
    background-color: black;
}


The HTML Code is:

<html>
    <head>
	<link href="NavBar.css" rel="stylesheet" type="text/css"/>
	<style>
	    #Home:hover #homeContent{
		display: block;
		position: absolute;
	    }
	    #AboutUs:hover #AboutUsContent{
		display: block;
		position: absolute; 
	    }
	</style>
    </head>
    <body bgcolor="#1976D2" >
	<ul class="NavBar">
	    <li class="NavBarList" id="Home">
		Home
		<div class="content" id="homeContent">
		    <a href="#">Bus</a>
		    <a href="#">Route</a>
		    <a href="#">Bus and Route</a>
		</div>
	    </li>
	    <li class="NavBarList" id="AboutUs">
		About Us
		<div class="content" id="AboutUsContent">
		    <a href="#">Bus1</a>
		    <a href="#">Route1</a>
		    <a href="#">Bus and Route1</a>
		</div>
	    </li>
	</ul>
    </body>
</html>

Upvotes: 1

Answers (3)

Saurav Rastogi

Reputation: 9731

Use position: relative on .NavBarList and left: 0 on .content, like:

.NavBarList {
    position: relative;
}
.content {
    left: 0;
}

Have a look at the snippet below:

.NavBar{
    padding: 10px 10px 10px 0px;
    margin: 0;
    background-color: #616161;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-family: Arial, sans-serif;
}
.NavBarList{
    display: inline;
    position: relative;
    padding: 10px;
    background-color: #616161;
    color: white;
    margin: 0;
}
.NavBarList:hover{
    background-color: black;
}
.content{
    display: none;
    left: 0;
    margin: 10px 0 0 0;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
    z-index: 1;
}
.content a{
    display: block;
    background-color: white;
    color: black;
    min-width: 100px;
    text-decoration: none;
    padding: 5px;
}
.content a:hover{
    background-color: #81D4FA;
}
.content a:hover .NavBarList{
    background-color: black;
}

<html>
    <head>
	<link href="NavBar.css" rel="stylesheet" type="text/css"/>
	<style>
	    #Home:hover #homeContent{
		display: block;
		position: absolute;
	    }
	    #AboutUs:hover #AboutUsContent{
		display: block;
		position: absolute; 
	    }
	</style>
    </head>
    <body bgcolor="#1976D2" >
	<ul class="NavBar">
	    <li class="NavBarList" id="Home">
		Home
		<div class="content" id="homeContent">
		    <a href="#">Bus</a>
		    <a href="#">Route</a>
		    <a href="#">Bus and Route</a>
		</div>
	    </li>
	    <li class="NavBarList" id="AboutUs">
		About Us
		<div class="content" id="AboutUsContent">
		    <a href="#">Bus1</a>
		    <a href="#">Route1</a>
		    <a href="#">Bus and Route1</a>
		</div>
	    </li>
	</ul>
    </body>
</html>

CSS Position References: CSS Tricks, Codeacademy

Hope this helps!

Upvotes: 1

Richie Thomas

Reputation: 3265

I think you mean that you want each dropdown menu to appear below its parent navbar element, as opposed to all dropdowns being shifted all the way to the left. If that's indeed what you mean, I tried changing the display property of the .NavBarList class from inline to inline-block, and that seemed to help (see screenshot above). The code for this change can be found @ this JSFiddle link here:

http://jsfiddle.net/1gk98gmw/

You can further adjust the grey space between the parent navbar elements and the grey navbar itself by removing the padding: 10px 10px 10px 0px from the .NavBar class:

Upvotes: 1

Ben Kolya Mansley

Reputation: 1793

Absolute positioning positions an element to it's closest positioned ancestor - as none of the element's ancestors have a set position then the element defaults to the position of the window. You need to set the position of the absolute element's parent, as well as give it a set left value, as below:

.NavBarList {
  position: relative;
}

.content {
  left: 0;
}

Upvotes: 0

Multiple Drop Downs in Navigation Bar Overlapping each other in a HTML page

Answers (3)

Related Questions