Return to Snippet

Revision: 50173
at August 13, 2011 12:10 by marshalletm


Initial Code
<style>
/* Nav menu with drop down feature */
  
#navMenu {
    margin: 0;
    padding: 0;
    
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: red;
}

#navMenu ul li a {
    text-align: center;
    font-family: "Comic Sans MS", cursive;
    text-decoration: none;
    height: 30px;
    width: 150px;
    display: block;
    color: #FFF;
    border: 1px solid white;
    text-shadow: 1px 1px 1px #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}

#navMenu ul li:hover ul {
    visibility:visible;
}

/********************************/

#navMenu li:hover {
    background: #09F;
}

#navMenu ul li:hover ul li a:hover {
    background: #E55451;
    color: #000;
}

#navMenu a:hover {
    color: #000;
}

#rightnav {
    text-align: center;
    float: right;
    width: 139px;
    height: 400px;
    background-color: lightgreen;
    border-left: 1px dashed #000000;
}

/* end of nav menu */
</style>



<header>
                <div id="buttonbar">
                    <div id="navMenu">
                        <ul>
                            <li>
                                <a href="#">Products</a>
                                <ul>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                </ul>
                            </li><!-- end main LI --> 
                        </ul><!-- end main UL -->
                        <ul>
                            <li>
                                <a href="#">Services</a>
                                <ul>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                </ul>
                            </li><!-- end main LI --> 
                        </ul><!-- end main UL -->
                        <ul>
                            <li>
                                <a href="#">Events</a>
                                <ul>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                </ul>
                            </li><!-- end main LI --> 
                        </ul><!-- end main UL -->
                        <ul>
                            <li>
                                <a href="#">Funny Stuff</a>
                                <ul>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                </ul>
                            </li><!-- end main LI --> 
                        </ul><!-- end main UL -->
                        <ul>
                            <li>
                                <a href="#">Contact Us</a>
                                <ul>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Link Item</a>
                                    </li>
                                </ul>
                            </li><!-- end main LI --> 
                        </ul><!-- end main UL --> 
                    </div>
                </div>
                <div id="rightnav">This is the rightnav</div>
                <div id="body">This is the body</div>
            </div>
        </header>

Initial URL

                                

Initial Description
Insert the <style> attribute into linked CSS stylesheet

Initial Title
HTML and CSS for drop down menu

Initial Tags

                                

Initial Language
HTML