Sub Menu

Webdoc posted this at 21:21 — 8th November 2009.

They have: 4 posts

Joined: Nov 2009

Hello

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

The CSS

#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;
}

The Code

<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

Jack Michaelson posted this at 08:30 — 9th November 2009.

He has: 1,733 posts

Joined: Dec 1999

Here's your submenu:

<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>
<ul id="submenu">
<li>submenu item 1</li>
<li>submenu item 2</li>
<li>submenu item 3</li>
</ul>
</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>

Shakespeare: onclick || !(onclick)

Webdoc posted this at 01:20 — 10th November 2009.

They have: 4 posts

Joined: Nov 2009

Hello

Thanks for the above will this pick up the same style as the top menu (edit in answer to this no it does not have just tried it), or do I need to add to the css to get the same styling, and if so how please.

How would I edit the above css to make the sub menu pop out to the right, and for it to be styled in the same way as the rest of the menu?

Regards

Webdoc