0

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:

alt text

If I were hovering over the first item on the left of the nav item. Here is a link to sample code. Thanks!

1 Answer 1

2

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>​
2
  • wasn't exactly what I was after but I was able to make it work how I wanted... THANKS!
    – mike
    Aug 30, 2010 at 18:09
  • Glad to have helped. I never got round to looking at the strange jumping behaviour, did you solve that problem? Aug 30, 2010 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.