Home/ Questions/Q 8248863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T23:20:31+00:00

I am trying to learn jquery and I got an example of a dropdown

  • 0

I am trying to learn jquery and I got an example of a dropdown menu like following:

<html>
<head>
<title>CSS Dropdown</title>

<style type="text/css">

    /* General */
    #cssdropdown, #cssdropdown ul { list-style: none; }
    #cssdropdown, #cssdropdown * { padding: 0; margin: 0; }

    /* Head links */
    #cssdropdown li.headlink { width: 220px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
    #cssdropdown li.headlink a { display: block; padding: 15px; }

    /* Child lists and links */
    #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
    #cssdropdown li.headlink:hover ul { display: block; }
    #cssdropdown li.headlink ul li a { padding: 5px; height: 17px; }
    #cssdropdown li.headlink ul li a:hover { background-color: #333; }

    /* Pretty styling */
    body { font-family: verdana, arial, sans-serif; font-size: 0.8em; background-color: black; }
    #cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; }
    #cssdropdown li.headlink { background-color: white; background-image: url(bg.gif); }
    #cssdropdown li.headlink ul { background-image: url(bg.gif); background-position: bottom; padding-bottom: 10px; }
</style>
<script language="JavaScript">
    window.onload = function()
    {
        var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
        for(i = 0; i < lis.length; i++)
        {
            var li = lis[i];
            if (li.className == 'headlink')
            {
                li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
                li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
            }
        }
    }
    /* or with jQuery:
    $(document).ready(function(){
        $('#cssdropdown li.headlink').hover(
            function() { $('ul', this).css('display', 'block'); },
            function() { $('ul', this).css('display', 'none'); });
    });
    */
</script>
</head>

<body>
    <ul id="cssdropdown">

        <li class="headlink">
            <a href="http://google.com/">Search Engines</a>

            <ul>
                <li><a href="http://google.com/">Google</a></li>
                <li><a href="http://yahoo.com/">Yahoo</a></li>
                <li><a href="http://live.com/">Live Search</a></li>
            </ul>
        </li>
        <li class="headlink">
            <a href="http://shopping.com">Shopping</a>

            <ul>
                <li><a href="http://amazon.com/">Amazon</a></li>
                <li><a href="http://ebay.com/">eBay</a></li>
                <li><a href="http://craigslist.com/">CraigsList</a></li>
            </ul>
        </li>

    </ul>

</body>
</html>

However, it works strangely for me means dropdown menu works but I can only found menu items if I slide onto it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I understand the problem, it is that when you hover one of the dropdown menus then the box that appears is just white, and you have to move the cursor over the links so that they change color and can be seen. To fix this you need to change the styling. Either change

    #cssdropdown li.headlink ul

    to have a different background (it has inherited the white background from the parent element) and/or change the styling of 

    #cssdropdown li.headlink ul li a

    Try changing the background property of these elements and see what happens.

    Edit: Or change the color attribute on #cssdropdown li.headlink ul li a because the text in these elements are white, and thus invisible against the white background.

    • 0