Hi,
I'm having trouble with this dropline menu - how can I get the subnav to line up with the right edge of the parent item? what I'm trying to achieve would look something like this:
If I were hovering over the first item on the left of the nav item. Here is a link to sample code. Thanks!
I've posted a demo here: http://jsbin.com/onofo4
I think it does what you require, though hovering over the 'Second' causes the parent menu to jump a little to the left. I'm not sure why (it's late, I'm tired etc...) as yet, but I'll try and iron that out tomorrow.
I've copied the code from the jsbin demo below, I think it's fairly self-explanatory, but if you have any questions feel free to raise them in the comments and I'll do what I can to help you out.
Code:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
}
);
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#nav {width: 50%; }
li {border: 1px solid #ccc; padding: 0.2em 0.5em;}
li li {border: 0 none transparent; border-right: 1px solid #ccc; }
#nav > ul {list-style-type: none; text-align: right; }
#nav > ul > li {list-style-type:none; position: relative; display: inline; }
#nav > ul > li > ul {display: none; position: absolute; top: 1.8em; right: -1px; width: 15em; }
#nav > ul > li > ul > li {width: 15em; }
#nav > ul > li:hover > ul {display: block; }
#nav > ul > li:hover > ul > li {display: inline; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li>First
<ul>
<li>Sub One</li>
<li>Sub Two</li>
</ul></li>
<li>Second
<ul>
<li>Sub Three</li>
<li>Sub Four</li>
</ul></li>
</ul>
</div>
</body>
</html>