CSS multi levels menu IE.txt

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://code.helperblogger.com/hb-smooth-menu.js' type='text/javascript'/>
<script type='text/javascript'>
ddsmoothmenu.init({
 mainmenuid: &quot;smoothmenu1&quot;, 
 orientation: &#39;h&#39;, 
 classname: &#39;ddsmoothmenu&#39;, 
 
 contentsource: &quot;markup&quot; 
})
</script>

<style> 
.ddsmoothmenu {
    width: 100%;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
    vertical-align: middle;
    height: 33px;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
}

.ddsmoothmenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
}

.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #666666;
    text-decoration: none;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
}

* html .ddsmoothmenu ul li a {
    display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    background: black;
    color: white;
}

.ddsmoothmenu ul li a:hover {
    background: black;
    color: white;
}

.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
}

.ddsmoothmenu ul li ul li ul {
    top: 0;
}

.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

* html .ddsmoothmenu {
    height: 1%;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 6px;
    right: 5px;
}

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
}

.toplevelshadow {
    opacity: 0.8;
} 
</style>  

<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
	<li><a href='http://www.helperblogger.com/'>Home</a></li>
	<li>
		<a href='#'>Categories</a>
		<ul>
			<li>
				<a href='#'>CSS</a>
				<ul>
					<li><a href='#'>Item 11</a></li>
					<li><a href='#'>Item 12</a></li>
					<li><a href='#'>Item 13</a></li>
					<li><a href='#'>Item 14</a></li>
				</ul>				
			</li>
			<li>
				<a href='#'>Graphic design</a>
				<ul>
					<li><a href='#'>Item 21</a></li>
					<li><a href='#'>Item 22</a></li>
					<li><a href='#'>Item 23</a></li>
					<li><a href='#'>Item 24</a></li>
				</ul>				
			</li>
			<li>
				<a href='#'>Development tools</a>
				<ul>
					<li><a href='#'>Item 31</a></li>
					<li><a href='#'>Item 32</a></li>
					<li><a href='#'>Item 33</a></li>
					<li><a href='#'>Item 34</a></li>
				</ul>				
			</li>
			<li>
				<a href='#'>Web design</a>				
				<ul>
					<li><a href='#'>Item 41</a></li>
					<li><a href='#'>Item 42</a></li>
					<li><a href='#'>Item 43</a></li>
					<li><a href='#'>Item 44</a></li>
				</ul>	
			</li>
		</ul>
	</li>
	<li>
		<a href='#'>Work</a>
		<ul>
			<li>
				<a href='#'>Work 1</a>
				<ul>
					<li>
						<a href='#'>Work 11</a>		
						<ul>
							<li>
								<a href='#'>Work 111</a>						
							</li>
							<li>
								<a href='#'>Work 112</a>
							</li>
							<li>
								<a href='#'>Work 113</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href='#'>Work 12</a>
						<ul>
							<li>
								<a href='#'>Work 121</a>						
							</li>
							<li>
								<a href='#'>Work 122</a>
							</li>
							<li>
								<a href='#'>Work 123</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href='#'>Work 13</a>
						<ul>
							<li>
								<a href='#'>Work 131</a>						
							</li>
							<li>
								<a href='#'>Work 132</a>
							</li>
							<li>
								<a href='#'>Work 133</a>
							</li>
						</ul>							
					</li>
				</ul>					
			</li>
			<li>
				<a href='#'>Work 2</a>
				<ul>
					<li>
						<a href='#'>Work 21</a>
						<ul>
							<li>
								<a href='#'>Work 211</a>						
							</li>
							<li>
								<a href='#'>Work 212</a>
							</li>
							<li>
								<a href='#'>Work 213</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href='#'>Work 22</a>
						<ul>
							<li>
								<a href='#'>Work 221</a>						
							</li>
							<li>
								<a href='#'>Work 222</a>
							</li>
							<li>
								<a href='#'>Work 223</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href='#'>Work 23</a>
						<ul>
							<li>
								<a href='#'>Work 231</a>						
							</li>
							<li>
								<a href='#'>Work 232</a>
							</li>
							<li>
								<a href='#'>Work 233</a>
							</li>
						</ul>							
					</li>
				</ul>					
			</li>
			<li>
				<a href='#'>Work 3</a>
				<ul>
					<li>
						<a href='#'>Work 31</a>
						<ul>
							<li>
								<a href='#'>Work 311</a>						
							</li>
							<li>
								<a href='#'>Work 312</a>
							</li>
							<li>
								<a href='#'>Work 313</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href='#'>Work 32</a>
						<ul>
							<li>
								<a href='#'>Work 321</a>						
							</li>
							<li>
								<a href='#'>Work 322</a>
							</li>
							<li>
								<a href='#'>Work 323</a>
							</li>
						</ul>							
					</li>
					<li>
						<a href='#'>Work 33</a>
						<ul>
							<li>
								<a href='#'>Work 331</a>						
							</li>
							<li>
								<a href='#'>Work 332</a>
							</li>
							<li>
								<a href='#'>Work 333</a>
							</li>
						</ul>							
					</li>
				</ul>					
			</li>
		</ul>		
	</li>
	<li>
		<a href='#'>About</a>	
	</li>
	<li>
		<a href='#'>Contact</a>	
	</li>
</ul></div>