I am very inexperienced with CSS and need a little help. I have been given responsibility for a site that uses a CSS menu. I'm looking to add a submenu to it. so far I written my submenu in html by nesting <ul> <li>, but am stuck with how to edit the css (see below). Your help is really appreciated.



nav {
background-color:rgb(255,255,255);
height:50px;
-moz-box-shadow:1px 1px 2px rgba(51,51,51,0.2);
-webkit-box-shadow:1px 2px 1px rgba(51,51,51,0.2);
box-shadow:1px 1px 2px rgba(51,51,51,0.2);
-ms-filter:"progidXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#4d333333,Positive=true)";
filterrogidXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#4d333333,Positive=true);
}

.nav-logo {
max-width: 70%;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 50px;
}

nav ul li {
height: 50px;
}

nav ul li a:hover {
background-color: rgb(0,63,127);
color: #FFF !important;
text-shadow:0px 1px 0px rgba(155,16,0,0.5);
-ms-filter:"progidXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#e69b1000,Positive=true)";zoom:1;
filterrogidXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#e69b1000,Positive=true);
}

nav ul li.active a {
background-color: rgb(49,120,191);
color: #FFF !important;
text-shadow:0px 1px 0px rgba(155,16,0,0.5);
-ms-filter:"progidXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#e69b1000,Positive=true)";zoom:1;
filterrogidXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#e69b1000,Positive=true);
}

nav ul li a, nav ul li a:visited {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1pt;
color: #999;
text-align: center;
}

nav ul li a:active,
nav ul li:nth-child(2) > a:active,
nav ul li:nth-child(3) > a:active,
nav ul li:nth-child(4) > a:active {
color: #FFF;
background-color: #555;
text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}

nav ul li a i {
font-size: 14px;
}