www.webdeveloper.com
Results 1 to 2 of 2

Thread: horizontal navigation submenus scroll up down on onmouse

  1. #1
    Join Date
    Nov 2010
    Posts
    8

    horizontal navigation submenus scroll up down on onmouse

    I have the horizontal menu with multiple submenu with large items, I want to scroll submenu vertically ud down on onmouse when items going behind the vertical window till last item.In Example Long items tab items going behind the window.

    [B]Here is My Code Example:http://jsfiddle.net/fCFJV/4/


    My Code looks like:-

    ul id="firstLevel">
    <li><a href="#">Tab one</a>
    <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    <li><a href="#">Link five</a></li>
    </ul>
    </li>
    <li class="active"><a href="#" class="active">Tab two</a>
    <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    <li><a href="#">Link five is a long link that wraps</a></li>
    </ul>
    </li>
    <li><a href="#">three</a>
    <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    <li><a href="#">Link five</a></li>
    </ul>
    </li>
    <li><a href="#">Long Tab</a>

    <div id="wrap" style="">
    <ul id="lastlevelUL">
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    <li><a href="#">Link five</a></li>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    <li><a href="#">Link five</a></li>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    <li><a href="#">Link five</a></li>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
    <li><a href="#">Link five</a></li>
    <li><a href="#">Link five</a></li>
    </ul>
    </div>

    </li>


    Any Thoughts!??

    thanks

  2. #2
    Join Date
    Feb 2011
    Posts
    231
    Hi,
    Try add a "height" and "overflow" to "ul ul" in css.
    Code:
    ul ul {
       display:none; /* Sub menus are hiden by default */
       position:absolute;
       top:2em;
       left:0;
       right:auto; /*resets the right:50% on the parent ul */
       width:10em; /* width of the drop-down menus */
        height:15em;
        overflow:auto;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles