Jump to content
Killersites Community
Sign in to follow this  
Wolfgang

Creating A Drop-Down Menu On Hover

Recommended Posts

Hi all

 

I am trying to build a website but I am struggling to understand and compute a few things.  In the 90's when I first learned HTML we used tables to achieve the look and feel of the website.  In comes a new millenium and in comes a much needed new design method .... CSS.

 

I am not sure if this is correct, but I am using <div> where I would have in past used <table> and <tr> (table row) and I am using <span> where I would have used <td> (table data).  If this is wrong then I would like to know.

 

Onto my problem: I want to create a drop-down menu on hover.  (I need to learn "Pseudo classes" but that will come in a related but new topic).  I kinda have the drop-down menu on hover but it needs some tweeking and for that i am struggleing. The problem is that the background-color for the <div> is being overwritten somewhere but I can not see it, the menu is not center in the <div> and the drop-down looks wrong.

 

Here is the css file:

/**************** Global ****************/


* { 
	font-family: Tahoma, sans-serif; /* corporate font */
	font-size: 12px; /* corporate font size */
	text-decoration: none; /* hyperlinks no underline by default */
}

div {
	background-color: #ee2326; /* Corporate red color */
	width: 1000px; /* Page width */
	margin: 0 auto; /* Center div */
}

.shadow { 1px 1px 1px #606163; } /* default shadow */

/**************** Pseudo classes ****************/

a { text-decoration: none;} /* removes underline for hyperlinks */

ul {
	border: 0px hidden;
	list-style: none;
	padding: 0px;
	margin: 0px; 
	width: 100%; 
	margin-left: auto; 
	margin-right: auto;
	font-family: Tahoma, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-shadow:1px 1px 1px #606163;
}
ul li {
	display: block;
	position: relative;
	float: left;
	text-align: left!important;
	text-shadow:1px 1px 1px #606163;
}
li ul {display: none;} /* Hides drop down menu */
ul li a {
	display: block;
	background: #ee2326;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
        white-space: nowrap;
	color: white;
	border: 10px 100px; /* Sets size of box */
}
ul li a:hover {background: #8523ee;} /* Sets the color of the hover on the parent */
li:hover ul {
	display: block; /* displays the drop down menu */
	position: absolute;
}
li:hover li {float: none;}
li:hover a {background: #ee2326;} /* sets the background-color of the drop down menu */
li:hover li a:hover {background: #8523ee;} /* Sets the color of the hover on the child */

/************************* ID's *************************/

<!------------------NavBar --------------------->

#NavBar {
	width: 100%; /* Sets the NavBar div to be equal the default div */
	/* height: 12px; not needed */
	margin: 0 auto; /* trying to center NavBar-Drop but doesn't work */

}

#NavBar-Drop li ul li {
	border-top: 0px;
	margin: 40px auto; /* Center NavBar - Not working */
}

and here is the html code:

	<div id="NavBar">
	  <span><ul id="NavBar-Drop">
  		<li><a href="#">Home</a></li>
		<li><a href="#">Swimwear</a></li>
  		<li><a href="#">Tops</a></li>
  		<li><a href="#">Bottoms</a></li>
      		<li><a href="#">Dresses</a></li>
     		<li><a href="#">jackets</a></li>
		<li><a href="#">lingerie</a>
		  <ul>
      		    <li><a href="#">Bras</a></li>
      		    <li><a href="#">Briefs & Thongs</a></li>
      		    <li><a href="#">hosiery</a></li>
      		    <li><a href="#">Nightwear</a></li>
		    <li><a href="#">Slips & Teddies</a></li>
    		  </ul>
		</li>
		<li><a href="#">footware</a></li>
     		<li><a href="#">sale</a></li>
		<li><a href="#">Additional Link</a>
		  <ul>
      		    <li><a href="#">Child Link1</a></li>
      		    <li><a href="#">Child Link2</a></li>
      		    <li><a href="#">Child Link3</a></li>
    		  </ul>
		</li>
	      </ul>
	  </span>
	</div>

Questions:

1) how do I center the menu in the div?

2) what is filling the <div> with the color white instead of the corporate red?

3) how do I change the size of the child menu so that all the text fits? (The child is the part which drops down when you hover).

 

Share this post


Link to post
Share on other sites

Just to quickly update you:  I have managed to work out where the white background on the span was coming from.  The parent <div> wasn't given a height so the span was filling the background with the default background-color white. I fixed this by giving the parent <div> ID a height of 30px. so the html looks like this:

	<div id="NavBar">
	  <span id="NavBar-Pad"><ul id="NavBar-Drop">
  		<li><a href="#">Home</a></li>
		<li><a href="#">Swimwear</a></li>
  		<li><a href="#">Tops</a></li>
  		<li><a href="#">Bottoms</a></li>
      		<li><a href="#">Dresses</a></li>
     		<li><a href="#">jackets</a></li>
		<li><a href="#">lingerie</a>
		  <ul>
      		    <li><a href="#">Bras</a></li>
      		    <li><a href="#">Briefs & Thongs</a></li>
      		    <li><a href="#">hosiery</a></li>
      		    <li><a href="#">Nightwear</a></li>
		    <li><a href="#">Slips & Teddies</a></li>
    		  </ul>
		</li>
		<li><a href="#">footware</a></li>
     		<li><a href="#">sale</a></li>
		<li><a href="#">Additional Link</a>
		  <ul>
      		    <li><a href="#">Child Link1</a></li>
      		    <li><a href="#">Child Link2</a></li>
      		    <li><a href="#">Child Link3</a></li>
    		  </ul>
		</li>
	      </ul>
	  </span>
	</div>

The global and Pseudo classes in css style sheet remain unchanged but the NavBar section changed to:

#NavBar {
	height: 30px;
}

#NavBar-Pad {
	display:block; 
	background-color: #ee2326; 
	text-align: center;
<!-- style="color:white; display:block; background-color: #ee2326; text-align: center;" -->

}

#NavBar-Drop li ul li {
	background-color: #ee2326;
	border-top: 0px;
/*	margin: 40px auto; Not needed sets the margns inbetween child links */
}

I solved the third question also and for this I removed the line: "border: 10px 100px; /* Sets size of box */" from the Pseudo class: ul li a.  So that pseudo class now looks like:

ul li a {
	display: block;
	background: #ee2326;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
        white-space: nowrap;
	color: white;
	border: 10px 100px; /* Sets size of box */
}

So, I have solved 2 out of the 3 questions (and in the words of Meatloaf - "2 out of 3 ain't bad").

 

My only outstanding question is:

how do I center the menu (NavBar) in the parent div?

 

Thank you in advance.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×