Digg style navigation

[JYM]

Hi

I'd like to know how Digg.com made their navigation, which is a nested link navigation and when you click on the arrow, it displays the submenus.

I've looked at their code for hours and I can't see how they coded the CSS to display the arrow box right beside the menu title.

This is what I have so far

<div id="sidebar">
<ul>
<li class="menu"><a href="/music" class="menulink">Music</a>
<ul class="submenu" id="sm1"><a href="toggle">arrow</a>
<li><a href="/rh">Rap/Hip-Hop</a></li>
<li><a href="/rock">Rock</a></li>
<li><a href="/rs">R&B/Soul</a></li>
<li><a href="/tt">Trance/Techno</a></li>
<li><a href="/pop">Pop</a></li>
<li><a href="/classical">Classical</a></li>
<li><a href="/country">Country</a></li>
</ul>
</li>


I can't seem to put the arrow box beside the "Music" menu link... If anyone could provide some rough CSS, that would be very helpful. Width of sidebar is 165px, width of arrow box is 23px, with 2px space between arrow box and menu link.

 

[lee101]

i think it is done using javascript, as i know that you can use javascript to adjust element properties, here is an example of what you could do

<script language="JavaScript" type="text/javascript">
//Javascript code to hide the navigation
function hide_sm1(){
document.getElementById("sm1").style.height = "15px"; //make this just tall enough so that you can only see the top part
}
//javascript code to show the navigation menu
function smow_sm1(){
document.getElementById("nav").style.height = "250px"; //set this to a value where you can see all of the nav menu, or whatever is set in your css stylesheet
}
</script>

That should work, than you would just call the functions with a link, like the togglelink

Hope this helps, lee