Menu Items with Shadow

by achudars

HTML

<div id="container">

    <div id="header-left"></div>
    <div id="header-right"> </div>
    <div class="clear"></div><div id="toplinemenu"></div>
    <div id="menu">  
        <ul>
            <li><div id="listitems"><div id="menuheader">Steps:</div><a href="#nogo">Section One</a> <div id="smalltext">Description Text here</div>
                <ul>
                    <li><a href="#nogo">A</a></li>
                    <li><a href="#nogo">B</a></li>                                                      <li><a href="#nogo">C</a></li>
                                        <li><a href="#nogo">D</a></li>                    <li><a href="#nogo">E</a></li>                    <li><a href="#nogo">F</a></li>                    <li><a href="#nogo">G</a></li><li><a href="#nogo">H</a></li>
                </ul>
                </div>     </li>
        <li><div id="listitems"><div id="menuheader">One</div><a href="#nogo">Section Two</a> <div id="smalltext">Find out about our App</div>
                <ul>
                    <li><a href="#nogo">iPhone App</a></li>
                    <li><a href="#nogo">iPad App</a></li>
                    <li><a href="#nogo">Android App</a></li>
            </ul></div>
            </li>
            <li><div id="listitems"><div id="menuheader">&nbsp;</div><a href="#nogo">Section Three</a><div id="smalltext">For a variety of groups</div>
                <ul>
                    <li><a href="#nogo">Example One</a></li>
                    <li><a href="#nogo">Example Two</a></li>
                    <li><a href="#nogo">Example Three</a></li>
                    <li><a href="#nogo">Example Four</a></li>
                    <li><a href="#nogo">Example Five</a></li><li><a href="#nogo">Example Six</a></li>
                </ul></div>
            </li>
            
    <li><div id="listitems"><div id="menuheader">Section Four</div><a href="#nogo">Community</a> <div id="smalltext">Connect with Others</div>
                <ul>
                   ...

CSS

* { margin:0; padding:0; }
#container { width: 1700px; height:100%; font-family: Helvetica Neue; background: #fff; }
#header-left { width:50%; float:left; height:120px; position:relative; background:#fff; }
#header-right { height:120px; width:50%; float:right; position:relative; background:#fff; }
#toplinemenu { width: 100%; height: 2px; background: #838fbb;  margin-left: 20px; margin-right: 20px; }
#listitems:hover { box-shadow: 2px 4px 8px #888888; position: relative; }

#menuheader { text-transform: uppercase; float: center; padding-top: 10px; padding-bottom: 5px; text-align: center; font-size: 14pt; background: #fff; }

#menu { height: 130px; border-bottom: 3px solid #08123a; font-size: 14px; margin-left: 20px; margin-right: 20px; }
/* The height of the entire menu */

#menu ul { display: block; position: relative; z-index: 100; width: 1700px; }
/* The width of the entire menu outter box */

#menu a:hover { /* background-color: #fff; */ color: #092288; }

#menu ul li { float: left; list-style: none; /* margin: 0; padding:0; */ } 
/* The width of the top menu items */


#menu ul li ul { display:none; }
#menu ul li a { width: 200px; height: 50px; display: block; text-decoration: none; text-align: center; line-height: 30px; background-color: #fff; color: #1C47F2; }
/* The color of the menu links */

#menu ul li a:hover { /* background-color: #fff; */ color: #092288; }
/* The hover color of the menu links */

#menu ul li:hover ul { position: absolute; display: block; width: 75px; font-size: 90%;  }
/* The size of the sub-menu font */

#menu ul li:hover ul li { display:block; box-shadow: 2px 4px 8px #888888; }

#content-holder { min-height:600px; width:100%; float:left; position:relative; background:#eee; text-align:center; }
.text { margin-top: 30px; font-family:"Helvetica Neue"; font-size:12pt; }
.clear {clear:both;}
#hover-menu-holder { width:100%; height:200px; float:left; position:absolute; background: #eee; opacity: 0.2; visibility:hidden; }

 #smalltext {
 ...