How do i make a drop down navigation bar in css

jhooga

New Member
I have found many programs that do it for you with all this extra mumbo jumbo but how do i create one from scratch on my own. I just want to create a simple drop down navigation bar. If there are other posts in here im sorry :/
 

anna

New Member
Create an unordered list, then style the list. You can google search and find many, many different tutorials that will walk you right through the process. Good luck!
 

jhooga

New Member
im having trouble with the formatting part of it, i have the list and thats how it appears on my screen as well, can someone help out and take a look at what i have

here is my html
<div id="wrapper">
<div id="header"> <a href="index.htm"></a>
<h1 class="style1"></h1>
<h1 class="style2">&nbsp;</h1>
<h1 class="style2">Tech Central </h1>
</div>
<div id="multi_drop_menus">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="">Computers</a>
<ul>
<li><a href="Eesktop.html">Desktops</a></li>
<li><a href="Laptop.html">Laptops</a></li>
<li><a href="Netbook.html">Netbooks</a></li>
<li><a href="allinone.html">All-In-One</a></li>
</ul>
<li><a href="">Televisions</a>
<ul>
<li><a href="">Plasma</a></li>
<li><a href="">LCD</a></li>
<li><a href="">DLP</a></li>

</ul>
</li>
<li><a href="">Accessories</a>
<ul>
<li><a href="">Television Stands</a></li>
<li><a href="">Computer Desks</a></li>
<li><a href="">Monitors</a></li>
<li><a href="">Computer Parts</a></li>
</ul>
</li>
<li><a href="">On Sale</a>
</li>
</ul>
</div>
</div>

here is my css
div.multi_drop_menus * {
margin:0; padding:0;
}

div.multi_drop_menus {
behavior:url(../../lib/js_tools/csshover.htc);
font-family: arial, sans-serif;
font-size:.8em;
margin:0px 0 10px 0px;
background-color:transparent;
}
div.multi_drop_menus ul {
border-left:1px solid #CCB;
display:inline;
}
div.multi_drop_menus li {
background-color:#E0E7C9;
border-right:1px solid #CCB;
}
div.multi_drop_menus li:hover {
background-color:#F0F7D9;
}
div.multi_drop_menus a {
color:#776;
padding:.2em 5px;
}
div.multi_drop_menus a:hover {
color:#443;
}
div.multi_drop_menus ul li ul {
width:12em;
}
div.multi_drop_menus li li {
background-color:#E0E7C9;
border-bottom:1px solid #CCB;
}
div.multi_drop_menus ul li ul li ul {
border-top:1px solid #CCB;
top:-1px;
}
div.multi_drop_menus li li li {
background-color:#EEB;
}
div.multi_drop_
 
Top