Need sub headers in drop down menu

[Lorel]

This menu is working fine but I need to know if it's possible to add sub headers in the drop down portion of the following menu? I tried adding sub headers above and below the "section" tags but that didn't work. I want to add a sub header above the Indonesia links and eventually there will be sub headers above the other countries.

Here is the CSS:

/* to absolute position div around dm1 menu*/
.menu {position:relative;
top:108px;
margin: -125px 0 0 490px;}

.dm1 {height:20px;
background:transparent;
padding:0;
text-align:center; }

/*right side has no padding*/
.dm1 .item1,
.dm1 .item1:hover,
.dm1 .item1:visited,
.dm1 .item1-active,
.dm1 .item1-active:hover {
padding: 0 0 5px 15px;
text-decoration: none;
display: block;
font-weight:bold;
font-size: 13px;
position: relative;
font-family: Arial, sans-serif; }

.dm1 .item1,
.dm1 .item1:visited {
background:transparent;
color: #ccff66;}

.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-active:hover {
background: transparent;
color: #99ff33;
margin:0; }

.dm1 .item2,
.dm1 .item2:hover {
padding: 3px 8px 4px 8px;
text-decoration: none;
display: block;
white-space: nowrap;
text-align:left;
font-weight:bold;
font-size:12px;
font-family: palatino, 'Palatino Linotype', 'URW Palladio L', serif; }

.dm1 .item2,
.dm1 .item2:visited {
background: #99cc66;
color: #666666; }

.dm1 .item2:hover {
background: #99cc66;
color:#7F7E69;}

.dm1 .section {
position: absolute;
visibility: hidden;
z-index: -100;
white-space: nowrap; }

.dm1 .left, .dm1 .left:hover { border-style: solid none solid solid; }
.dm1 .right, .dm1 .right:hover { border-style: solid solid solid none; }

* html .dm1 td { position: relative; } /* ie 5.0 fix */


Here is the HTML:

<div class="menu">
<table cellspacing="0" cellpadding="0" id="menu1" class="dm1" border="0">
<tr><td>
<a class="item1" href="/">HOME</a>
</td><td>
<a class="item1" href="javascript:void(0)">FEATURE STORIES</a>
<div class="section">
<a class="item2" href="amazon.html">Amazon</a>
<a class="item2" href="china.html">China</a>
<a class="item2" href="equador.html">Equador</a>
<a class="item2" href="georgial">Georgia</a>
<a class="item2" href="indonesia1.html">Indonesia</a>
<a class="item2" href="indonesia2.html">Indonesia</a>
</div>
</td><td>
<a class="item1" href="videos.html">VIDEOS</a>
</td><td>
<a class="item1" href="about.html">ABOUT</a>
</td></tr></table>
</div> <!-- EndMenu -->

[SuzyUK]

I think this should be fairly easy just to add in

<h4>

elements or whatever you prefer, you may just need to change the hover code to maintain the hover on the droplist

e.g. change the

div .section

to:

<div class="section">
<h4>Subheading</h4>
<a class="item2" href="amazon.html">Amazon</a>
<a class="item2" href="china.html">China</a>
<a class="item2" href="equador.html">Equador</a>
<a class="item2" href="georgial">Georgia</a>
<h4>Subheading</h4>
<a class="item2" href="indonesia1.html">Indonesia</a>
<a class="item2" href="indonesia2.html">Indonesia</a>
</div>

and then this CSS:

.menu {
position:relative;
}

.dm1 {
height:20px;
background:transparent;
padding:0;
text-align:center;
}

.dm1 td {vertical-align: top;}

/*right side has no padding*/
.dm1 .item1,
.dm1 .item1:hover,
.dm1 .item1:visited,
.dm1 .item1-active,
.dm1 .item1-active:hover {
padding: 0 0 5px 15px;
text-decoration: none;
display: block;
font-weight:bold;
font-size: 13px;
position: relative;
font-family: Arial, sans-serif; }

.dm1 .item1,
.dm1 .item1:visited {
background:transparent;
color: #ccff66;}

.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-active:hover {
background: transparent;
color: #99ff33;
margin:0;
}

.dm1 .item2,
.dm1 .item2:hover {
padding: 3px 8px 4px 8px;
text-decoration: none;
display: block;
white-space: nowrap;
text-align:left;
font-weight:bold;
font-size:12px;
font-family: palatino, 'Palatino Linotype', 'URW Palladio L', serif; }

.dm1 .item2,
.dm1 .item2:visited {
background: #99cc66;
color: #666666; }

.dm1 .item2:hover {
background: #99cc66;
color:#7F7E69;}

.dm1 .section {
width: 100%;
white-space: nowrap;
display: none;
}

.dm1 .item1:hover + .section,
.dm1 .section:hover {display: block;}

I added in the last rule to activate the dropdown on hover, than when it's dropped down and hovered on

.section:hover

keeps the drop list active even if a subheading is hovered on.. is that what you're after?

[Lorel]

Hi Suzy,

I didn't want the subheadings as links, however, your comments gave me an idea. I just needed to add a background color to the existing section and text align left and that worked. Thanks.

[SuzyUK]

You're Welcome, & glad if it helped, yeh sorry, I didn't bother formatting them but I take it you got it :)