CSS drop-down menus pushing page content down

Question

This is probably (hopefully) a pretty simple question, but I can\'t seem to get it to work so I\'ll turn to the experts here. I\'m using a pretty straightforward CSS drop-do

Answer 1

This is a pretty bad case of unnecessary Javascript to do what can be done via CSS itself. One way or another all you have to do is change:

#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;}

to:

#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left;position:absolute;}

Here's an example of an extremely simple and clean drop down menu. Hope it helps you out a bit. I added a lot of comments to help you figure out what the CSS is doing to the HTML.

    <style type="text/css">

    /* Get ride of default margin's and padding */
    ul, li {
        margin: 0;
        padding: 0;
    }

    /* Display parent unordered list items horizontally */
    ul li {
        float: left;
        list-style: none;       /* Get rid of default Browser styling */
        margin-right: 10px;     /* Add some space between items */
    }

        /* Hide inset unordered Lists */
        ul li ul {
            display: none;
        }

        /* Un-Hide inset unordered Lists when parent <li> is hovered over */
        ul li:hover ul {
            display: block;
            position: absolute;
        }

            /* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
            ul li:hover ul li {
                clear: left;            
            }

    </style>
    <ul>
        <li>
            <a href="#" title="">Link 1</a>
            <ul>
                <li><a href="#" title="">Link 1.1</a></li>
                <li><a href="#" title="">Link 1.2</a></li>
                <li><a href="#" title="">Link 1.3</a></li>
                <li><a href="#" title="">Link 1.4</a></li>
                <li><a href="#" title="">Link 1.5</a></li>
                <li><a href="#" title="">Link 1.6</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="">Link 2</a>
            <ul>
                <li><a href="#" title="">Link 2.1</a></li>
                <li><a href="#" title="">Link 2.2</a></li>
                <li><a href="#" title="">Link 2.3</a></li>
                <li><a href="#" title="">Link 2.4</a></li>
                <li><a href="#" title="">Link 2.5</a></li>
                <li><a href="#" title="">Link 2.6</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="">Link 3</a>
            <ul>
                <li><a href="#" title="">Link 3.1</a></li>
                <li><a href="#" title="">Link 3.2</a></li>
                <li><a href="#" title="">Link 3.3</a></li>
                <li><a href="#" title="">Link 3.4</a></li>
                <li><a href="#" title="">Link 3.5</a></li>
                <li><a href="#" title="">Link 3.6</a></li>
        </ul>
    </li>
</ul>