drop down menu

how to make the dropdown menu appear on focus of the link menu.
on tabbing it should navigate to the items and on after last item it should close the dropdown menu.
please help.

<!DOCTYPE html>
<head>
<style>
.hide {
	display:none;	
}
</style>
</head>
<body>
<a href="#">Menu</a>
<ul class="hide">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 4</a></li>
</ul>
</body>
</html>

Open in new window

codelevelAsked:
Who is Participating?
 
Habib PourfardSoftware DeveloperCommented:
sorry it took a while to get back to you. I was testing it on chrome and it was working. but after I tested that in Firefox I found that the solution is not working so I spent more time to figure out what's wrong. here is the solution:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .hide {
            display: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
        $(function () {
            $(".menu-container").focusout(function () {
                var $container = $(this);
                setTimeout(function () {
                    var $newFocus = $(':focus');
                    if (!$container.find($newFocus).length)
                        $container.find(".dropdown").hide();
                }, 10);
            });
            $(".menu-container").focusin(function () {
                $(this).find(".dropdown").show();
            });

        });
    </script>

</head>
<body>
    <div class="menu-container">
        <a href="#">Menu</a>
        <ul class="dropdown hide">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
            <li><a href="#">item 5</a></li>
        </ul>
    </div>
</body>
</html>

Open in new window

0
 
Habib PourfardSoftware DeveloperCommented:
You can do it by use of jQuery:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .hide {
            display: none;
        }
    </style>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
        $(function () {
            $("#menu-container").focusin(function () {
                $(this).find(".dropdown").show();
            });
            $("#menu-container").focusout(function () {
                $(this).find(".dropdown").hide();
            });
        });
    </script>

</head>
<body>
    <div id="menu-container">
        <a href="#">Menu</a>
        <ul class="dropdown hide">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
            <li><a href="#">item 4</a></li>
        </ul>
    </div>
</body>
</html>

Open in new window

0
 
codelevelAuthor Commented:
once i tab from the menu link the sub menus dissappear rather than going to the first submenu link.
0
 
codelevelAuthor Commented:
works. thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.