CODEWITHSUNDEEP
jquery
alessandro
alessandro

Reputation: 1721

Dropdown doesn't show menu items until I mouseover

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.

Upvotes: 0

Views: 487

Answers (1)

Stian
Stian

Reputation: 886

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.

Upvotes: 1

Related Questions