Hello.
I did a search on this and MANY other forums to find a solution, but I just cant get this to work.

I have a Horizontal Menu made up of a "list" of images (I followed a tut). It all looks pretty good, except that I want the extra images in the drop down menu to NOT wrap and just be hidden with a scroll bar across the bottom to view them.

I have tried many different suggestions like
white-space: nowrap
Also display: inline (and every other display option)

But nothing seems to have any effect on my code, other then breaking stuff that already works.

CSS:
Code:
#TopMenu {
	
	display: table;
	margin: 0 auto;

	}


#dropdown {
	   	
		padding: 0px 0 0 20px;
		margin-left: auto;
		margin-right: auto;
		list-style: none;
		height:35px;
		width: auto;
	  
	   overflow: hidden
	  }

#dropdown div {
		
		margin-left: -9999px;
		width: 100%;
		z-index: 10;
		height: 0;
		top: 58px;
		overflow: hidden;
		}

#dropdown ul {
		list-style-type: none;
		position: relative;
		padding:0;
		margin:0 auto;
		list-style:none;
		overflow-y:hidden;
		}

#dropdown table {
		
		border-collapse:collapse;
		padding:0;
		margin:-1px -10px;
		width:auto;
		height:0;
		overflow-y:hidden;
		}

#dropdown li {
		
		text-align: center;
		float:left;
		}

#dropdown li a {		
		
		display:block;
		float:left;
		height:35px;
		line-height:30px;
		text-decoration:none;
		font-family:"trebuchet MS", sans-serif;
		font-size:20px;
		text-decoration:none;
		color:#fff;
		padding:0 0 0 0;
		right top;
		overflow:hidden;
		background-image: url(images/trans_block.png); 
		background-repeat: repeat;}
		
		}

#dropdown li a b {
		
		float:center;
		height:35px;
		padding:20px;
		overflow:hidden;
		}

#dropdown div {
		
		height:35px;
		position:relative;
		overflow-y:hidden;
		padding:20px;
		border:5px solid #aaa;
		border-width:5px 0;
		}

#dropdown div ul.w2 {
		-moz-border-radius: 15px;
		border-radius: 15px;
		height:200px;
		padding:15px;
		margin:0px auto;
		list-style:none;
		width:80%;
		overflow-y:hidden;
		overflow-x:visible;
		background-image: url(images/trans_block.png); 
		background-repeat: repeat;}
		}


#dropdown div ul li {
		
		float:left;
		width: 80%;
		overflow:hidden;
		}

#dropdown div ul li p {
		
		clear:left;
		width:150px;
		font-family:"trebuchet MS", sans-serif;
		text-align:left;
		color:#fff;
		overflow:auto;
		}

#dropdown div ul li a {
		display: block;
		 text-align: center;
		border:0;
		height:auto;}

#dropdown div ul li a img {
		opacity: 0.7;
		display: block;
		border: 0;
		float: center;
		height: 150px;
		overflow: hidden;}


#dropdown img:hover {
		opacity: 1.0;
		}
	

#dropdown li:hover > a b {
		
		background-color:#eee;
		color:#666;
		}

#dropdown :hover div {
		
		-moz-border-radius: 15px;
		border-radius: 15px;
		margin-left: 0;
		height: 240px;
		position: absolute;
		left: 0;
		overflow: auto;
		padding: 0;
		border-width:0 0;
		}

#dropdown div {
		scrollbar-3dlight-color:#fff;
		scrollbar-arrow-color:#888;
		scrollbar-base-color:#fff;
		scrollbar-darkshadow-color:#ccc;
		scrollbar-face-color:#ddd;
		scrollbar-highlight-color:#eee;
		scrollbar-shadow-color:#aaa;
		scrollbar-track-color:#fff;
		} 

#AutographDIV {
		
		height: 100%;
		width: 90%
		
		}


#AutographIMG {
		opacity:0.4;
		position: fixed;
		bottom: 0px;
		right: 0px;
		}

#LogoIMG {
		opacity:0.4;
		position: fixed;
		bottom: 0px;
		left: 0px;
		}
HTML:
Code:
<div>
	<div id="content">
		<div id="TopMenu">
			<ul id="dropdown">
				<li><a href="#url"><b>Second Sons</b>**-* </a>
					<div>
						<ul class="w2">
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/senet_us.jpg" alt="" /></a><p>Lion of Senet</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/labyrinth_us.jpg" alt="" /></a><p>Eye of the<br>Labyrinth </p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/shadows_us.jpg" alt="" /></a><p>Lord of Shadows</p></li>
						</ul>
					</div>
				</li>
				<li><a href="#url">*<b>Hythrun Chronicles</b>**-*</a>			
					<div>
						<ul class="w2">
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/medalon_us.jpg" alt="" /></a><p>Medalon</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/Treason_us.jpg" alt="" /></a><p>Treason Keep</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/harshini_us.jpg" alt="" /></a><p>Harshini</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/wolfblade_us.jpg" alt="" /></a><p>Wolfblade</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/warrior_us.jpg" alt="" /></a><p>Warrior</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/warlord_us.jpg" alt="" /></a><p>Warlord</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/harshini_us.jpg" alt="" /></a><p>The Lyre Theif</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/wolfblade_us.jpg" alt="" /></a><p>Covenant</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/warrior_us.jpg" alt="" /></a><p>Retribution</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/warlord_us.jpg" alt="" /></a><p>Brakandaran the Halfbreed</p></li>
						</ul>
					</div>
				</li>
				<li><a href="#url">*<b> Tide Lords </b> **-*</a>
					<div>
						<ul class="w2">
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/immortal_au.jpg" alt="" /></a><p>The Immortal<br>Prince</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/amyrantha_au.jpg" alt="" /></a><p>The Gods of Amyrantha </p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/palace_au.jpg" alt="" /></a><p>The Palace of Immpossible Dreams</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/chaos_au.jpg" alt="" /></a><p>The Chaos Crystal</p></li>
						</ul>
					</div>
				</li>
				<li><a href="#url"> *<b> Rift Runners </b></a>
					<div>
						<ul class="w2">
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/undivided_au.jpg" alt="" /></a><p>The Undivided</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/divide_au.jpg" alt="" /></a><p>The Dark Divide</p></li>
							<li style="width: 171px;"><a href="#url"><img id="transp" src="images/reunion_au.jpg" alt="" /></a><p>Reunion</p></li>
						</ul>
					</div>
		
				</li>
			</ul>
		</div>
	</div> <!-- end content -->

	<div id="AutographDIV">
		<img id="AutographIMG" src="images\autograph.png">
		<img id="LogoIMG" src="images\jflogo.png">
	</div>
</div>
</body>