horizontal navigation bar with submenu(s).
this just doesn't happen in ie. i need to write a solid menu that works across all browsers, when i do, i'll slap it here.
here's what it looks like.
<ul id="navigation">
<li><a href="#1">link one</a>
<ul>
<li><a href="#1-1">link one submenu link one</li>
<li><a href="#1-1">link two submenu link two</li>
<li><a href="#1-1">link one submenu link three</li>
</ul>
</li>
<li><a href="#2">link two</a></li>
<li><a href="#3">link three</a>
<ul>
<li><a href="#3-1">link three submenu link one</li>
<li><a href="#3-1">link three submenu link two</li>
<li><a href="#3-1">link three submenu link three</li>
</ul>
</li>
<li><a href="#4">link four</a></li>
<li class="last"><a href="#5">link five</a></li>
</ul>
#navigation
{
width:500px;
margin:0;
padding:0;
list-style-type:none;
}
#navigation li
{
border-right:1px solid #2B3536;
display:inline;
margin:0;
padding:0 0.5em 0 0.5em;
}
#navigation li.last
{
border-right:0;
}
#navigation li a:link,
#navigation li a:visited
{
color:#fff;
text-decoration:none;
padding:0 0 0.25em 0;
}
#navigation li a:hover
{
border-bottom:1px solid #1d7cd0;
}
#navigation li ul
{
display:none;
}
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#navigation ul').hide();
$('#navigation li').each(function()
{
$(this).mouseover(function()
{
$('ul', $(this)).show();
}).mouseout(function()
{
$('ul', $(this)).hide();
});
});
});
</script>