Home/ Questions/Q 1032189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T14:02:36+00:00

I’m having trouble with this dropline menu – how can I get the subnav

  • 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>​
    • 0