Creating A Drop-Down Menu On Hover

[Wolfgang]

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).

 

[Wolfgang]

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.