Hello

I am new to using CSS and I am using the following menu on my site coding below.

#menu12 {
width: 178px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #6898d0;
color: #333;
}
#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
} 
#menu12 li {
border-bottom: 1px solid #90bade;
margin: 0;
width: auto;
}
#menu12 li a {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
#menu12 li a:hover {
border-left: 5px solid #800000;
border-right: 5px solid #800000;
background-color: #FF7C3E;
color: #fff;
}
.bt1 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 10px; 
text-align : left; 
font-weight : bold; 
color : #ffffff; 
background-color : #8AA1B6; 
padding-top : 3px; 
padding-bottom : 4px; 
padding-left : 4px; 
border-left: 5px solid #FF7C3E;
display : block; 
}
.ht11 {
font-size : 10px; 
font-weight: bold;
color : #000; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
text-decoration : none; 
} 
.hw12 {
font-size : 11px; 
font-weight : bold; 
color : #ffffff; 
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none; 
}
 
 
<div id="menu12">
<ul>
<li><div class="bt1"><span class="ht11">»&nbsp;</span>
<span class="hw12">Navigation Menu</span></div></li>
<li><a title="Home" href="#">Home</a></li>
<li><a title="Photos" href="#">Photo Gallery</a></li>
<li><a title="Events" href="#">Events Calendar</a></li>
<li><a title="Forum" href="#">Community</a></li>
<li><a title="Articles" href="#">Article Directory</a></li>
<li><a title="Link Directory" href="#">Link Directory</a></li>
<li><a title="Download" href="#">Freeware Download</a></li>
</ul>
</div>

I would like to use a submenu within this menu, but I am having problems adapting the above coding to show a sub menu, could someone point me in the right direction please.

Regards

Webdoc

#menu12 {
width: 178px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #6898d0;
color: #333;
}
#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#menu12 li {
border-bottom: 1px solid #90bade;
margin: 0;
width: auto;
}

#menu12 li a {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}

#menu12 ul li a:hover {
border-left: 5px solid #800000;
border-right: 5px solid #800000;*/
background-color: #FF7C3E;
color: #fff;
}

#menu12 ul li ul li a:hover{
    background: #FF7C3E;
    border-left:1px solid #fff;
}

#menu12 ul li:hover ul{
    display: block;
    left:180px;
    top:160px
}

#menu12 ul ul {
    position: absolute;
    top: 0px;
    display:none;
}


<div id="menu12">
<ul>
<li><div class="bt1"><span class="ht11">»&nbsp;</span>
<span class="hw12">Navigation Menu</span></div></li>
<li><a title="Home" href="#">Home</a></li>
<li><a title="Photos" href="#">Photo Gallery</a></li>
<li><a title="Events" href="#">Events Calendar</a></li>
<li><a title="Forum" href="#">Community</a></li>
<li><a title="Articles" href="#">Article Directory</a></li>
<li><a title="Link Directory" href="#">Link Directory</a></li>
<li><a title="Download" href="#">Freeware Download</a></li>
<li><a href="#">Home</a>
      <ul>
         <li><a href="#">Photo Gallery</a></li>
         <li><a href="#">Events Calendar</a></li>
         <li><a href="#">Article Directory</a></li>
      
      </ul>
       </li>
</ul>
</div>

Hi here i added submenu within this menu..

Hi

Thanks for that, I had worked out how to add a sub menu in the html coding, its the CSS to run this sub menu I am having problems with.

Regards

Webdoc