Dropdown menu adaption for Vitor Walter

A request from Vitor Walter for a dropdown navigation that is not at the top of the webpage, centered with list items that are parted.

by Matthew Dewhurst

HTML

<div id="header">
    <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA0LzMwLzFlL2NvZGluZ2Z1dHVyLmQ1MzY5LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/fce2cac8/a4d/coding-future.jpg" width="600px" />
</div><!-- Header end -->


<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href="#">item #1</a></li>
            <li><a href="#">dropdown #1</a>
                <ul>
                    <li><a href="#">dropdown item #1</a></li>
                    <li><a href="#">dropdown item #2</a></li>
                    <li><a href="#">dropdown item #3</a></li>
                    <li><a href="#">dropdown item #4</a></li>
                </ul>
            </li>
            <li><a href="#">item #2</a></li>
            <li><a href="#">item #3</a></li>
            <li class="nav-last"><a href="#">dropdown #2</a>
                <ul>
                    <li><a href="#">dropdown item #1</a></li>
                    <li><a href="#">dropdown item #2</a></li>
                    <li><a href="#">dropdown item #3</a></li>
                    <li><a href="#">dropdown item #4</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- Nav wrapper end -->
</div><!-- Nav end -->

CSS

body{ overflow-y: scroll; padding: 0; margin: 0; }

#header{ text-align: center; margin: 20px 0 20px 0; } /* This header is just in place to make a gap between the top of the page since you said your navigation bar was not at the top */


#nav{ } /* You won't need to add anything into this as you don't want the navigation across the whole webpage */
#nav_wrapper{ width: 600px; margin: 0 auto; text-align: center; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; }
#nav ul li{ background-color: #222; display: inline-block; margin: 0 10px 0 0; } 
/* Set the background-color to the 'ul li' instead of the 'ul'
To seperate the 'ul li's from each other you want to add some margin to the left or right, in this case I have added 10px of margin to the right of each li 
However, you will want to add '.nav-last' (which will have no margin) to the last 'ul li' in your list to make sure it stays centre */
#nav ul li.nav-last{ margin: 0; }

#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }

#nav ul li:hover ul{ display: block; }
#nav ul ul{ position: absolute; display: none; }
#nav ul ul li{ display: block; background-color: #333; margin: 0; } /* You want to make sure these list items do not have margin */
#nav ul ul li a,visited{ color: #888; }
#nav ul ul li a:hover{ color: #FFF; }