Andrew Bellamy

based on Pure CSS Vertical Menu by Devin R. Olsen

complete demo

html markup for menu

<div id="navigation">
    	<ul>
        	<li>Menu
            	<ul>
                	<li>Menu Item</li>
                    <li>Sub Link
                    	<ul>
                        	<li>Menu Item</li>
                            <li>Menu Item</li>
                            <li>Menu Item</li>
                            <li>Menu Item</li>
                        </ul>
                    </li>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                </ul>
            </li>
            <li>Menu</li>
            <li>Menu</li>
            <li>Menu
                <ul>
                	<li>Menu Item</li>
                    <li>Sub Link
                    	<ul>
                        	<li>Menu Item</li>
                            <li>Menu Item</li>
                            <li>Menu Item</li>
                            <li>Menu Item</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Menu
            	<ul>
                	<li>Sub Link
                    	<ul>
                        	<li>Menu Item</li>
                            <li>Menu Item</li>
                            <li>Menu Item</li>
                            <li>Menu Item</li>
                        </ul>
                    </li>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                </ul>
            </li>
        </ul>
    </div>

css code for menu

#navigation { width:150px; font-size:12px; }

/*Main Menu*/
#navigation ul { margin:0px; padding:0px; background-color:#000; }
#navigation ul li {
	height:25px;
	line-height:25px;
	list-style:none;
	padding-left:10px;
	color:#FFF;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	cursor:pointer;
}
#navigation ul li:hover { background-color:#a60000; position:relative; color : #fff; }

/*Sub Menu*/
#navigation ul ul { display:none; position:absolute; left:75px; top:5px; border:1px solid #fff; background-color:#cacaca; }
#navigation ul li:hover ul { display:block; }
#navigation ul ul li { width:150px; float:left; display:inline; border:none; }
#navigation ul ul li:hover { border:none; background-color:#ff0000; color:#000; }

/*Sub-sub Menu*/
#navigation li:hover ul li ul { display:none; }
#navigation ul ul li ul { left:110px; background-color:#ff4040; }
#navigation ul ul li:hover ul { display:block; }
#navigation ul ul li:hover ul li { color:#fff; }
#navigation ul ul li:hover ul li:hover { color : #fff; text-decoration:underline; background-color:#000; }