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