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.

I think it is @media the code you use for RWD and I personally think that all websites should be built for it considering the number of smart phone and tablet users.

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