How to style my drop down menu? - css

Question

I have followed a tutorial to build my own drop down menu. Im having problem to style my submenus. Can't find the right class to change it. want the sub menus to come under in one line and in a box.
Can anyone help me?

Answer 1

This is how I do my dropdowns, a bit modified to look more like yours, and you may need to modify it to suite your needs. You can take this code, place it in a text file, and open it with a browser. It should work fine. Also, personally, I don't like using tables or lists for menus but this is just personal preference. Here you go - pure HTML and CSS:
<style>
body { margin: auto; }
.menu
{
position: relative;
background: gray;
height: 40px;
}
.menuItem, .dropdownItem
{
position: relative;
float: left;
width: 150px;
color: black;
}
.menuItem:hover, .dropdownItem:hover
{
background: black;
color: white;
}
.menuItem
{
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.dropdownItem
{
height: 100%;
line-height: 40px;
}
.dropdown
{
position: absolute;
top: -1000px;
width: 450px;
background: gray;
height: 40px;
}
.menuItem:hover .dropdown { top: 100%; }
</style>
<div class="menu">
<div class="menuItem">
Build New
<div class="dropdown">
<div class="dropdownItem">
Bath
</div>
<div class="dropdownItem">
Bathroom Lightning
</div>
<div class="dropdownItem">
Bathroom Faucet
</div>
</div>
</div>
<div class="menuItem">
Construction Of
</div>
<div class="menuItem">
Renovating
</div>
</div>
I hope that this helps.