CSS - Sub Menu Navigation. (HELP ME!)

[cwesty]

Hi All,

I've been working on a site, and i need to add a sub-category to one of the current lists.

The HTML looks like this...
<div id="rightnav">
<a href="#">Shop</a>
<a href="#">New Products</a>

</div>

The CSS associated with this looks like this:

#rightnav {
display:block;
float: right;

width: 160px;
height: auto;
margin: 2px 6px;
border: 1px solid #cccccc;

}

#rightnav a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
font-size:12px;
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}

#rightnav a:hover{
background-color: #C6F575;
display:block;
}




SO - Can anyone suggest the best way to float a sub category out to the left handside (without having to re write all my menus>???)

Your help is much appreciated.

Craig

 

[pengu]

change your DIV to an UL, wrap each A in an LI, and then ad a UL inside each LI you want a submenu on, after the A

ie:

<ul id="sideNav">
<li><a href="page1.html">Page 1</a>
<ul>
<li><a href="page1_1.html">Page 1.1</a></li>
<li><a href="page1_2.html">Page 1.2</a></li>
<li><a href="page1_3.html">Page 1.3</a></li>
</ul>
</li>
<li><a href="page2.html">Page 2</a>
<ul>
<li><a href="page2_1.html">Page 2.1</a></li>
<li><a href="page2_2.html">Page 2.2</a></li>
<li><a href="page2_3.html">Page 2.3</a></li>
</ul>
</li>
<li><a href="page3.html">Page 3</a>
<ul>
<li><a href="page3_1.html">Page 3.1</a></li>
<li><a href="page3_2.html">Page 3.2</a></li>
<li><a href="page3_3.html">Page 3.3</a></li>
</ul>
</li>
</ul>

and then use this for the CSS:

ul#sideNav li
{
position: relative;
}

ul#sideNav li ul
{
display: none;
}

ul#sideNav li:hover ul, ul#sideNav li.hover ul,
{
position: absolute;
display: block;
top: 0;
left: 100px;
}

this however relies on the browser supporting :hover on LI elements, which MSIE6 doesn't.

i've written a small javascript function that goes through a node (ie, the #navBar UL) and applies the correct behaviours to it to simulate the :hover pseudo selector (the script uses the hover class)

i don't have the script here (home) but i can post it tomorrow (monday) if you want.

 

[cwesty]

thanks dude!! that's really helpful!