TerryMooreII · October 8, 2012 19:50
diff --git a/more.html b/more.html
 <!doctype html>
 <html>
 <head>
 	<title></title>
 	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 	<style>
 	
 	*{padding:0px; margin:0px;}

 	#menu{
 		position:relative;
 		top:100px;
 		left:100px;
 		width:450px;
 		height:20px;
 		border:1px solid red;
 		
 		white-space: nowrap;
 	}
 	#menu ul{
 		
 	}
 	#menu > ul > li{
 		padding:0px 5px 0px 5px;
 		float:left;
 		list-style: none;
 		border-right:1px solid pink;
 	}
 	#more{
 		display:absolute;
 		top:20px;
 		right:20px;
 		bottom:auto;
 		width:150px;
 		border:1px solid #333;
 		display:none;
 		z-index: 99;
 		background-color:#eee;
 		float:right;
 	}
 	#more > ul > li{
 		list-style: none;
 	}
 	</style>

 </head>
 <body>

 <div id="menu">
 	<ul>
 		<li>One</li>
 		<li>Two</li>
 		<li>Three Three</li>
 		<li>Fourty Eight</li>
 		<li>Ten</li>
 		<li>Testing Space</li>
 		<li>Holy Cow</li>
 		<li>Running Low</li>
 		<li>This is the One</li>
 		<li>Done</li>
 	</ul>
 	<div id="more"><ul></ul></div>
 </div>

 <script>

 var total = 0;
 var width = $('#menu').width()-100;

 function more(){

 	$('#menu li').each(function(k,v){
 		console.log($(this))
 		total += $(this).width();

 		if (total > width){
 			$(this).appendTo('#more > ul');
 			
 		}
 	});

 	if (total > $('#menu').width()){
 		console.log(total)
 		$('#menu > ul').append('<li class="seeMore">more...</li>')
 		
 	}
 	$('.seeMore').hover(function(){

 		$('#more').show();

 	}, function(){
 		$('#more').hide();
 	});


 }
 more();
 $(window).resize(function () {
   
      more()
 });




 </script>


 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title></title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<style>

	*{padding:0px; margin:0px;}

	#menu{
	position:relative;
	top:100px;
	left:100px;
	width:450px;
	height:20px;
	border:1px solid red;

	white-space: nowrap;
	}
	#menu ul{

	}
	#menu > ul > li{
	padding:0px 5px 0px 5px;
	float:left;
	list-style: none;
	border-right:1px solid pink;
	}
	#more{
	display:absolute;
	top:20px;
	right:20px;
	bottom:auto;
	width:150px;
	border:1px solid #333;
	display:none;
	z-index: 99;
	background-color:#eee;
	float:right;
	}
	#more > ul > li{
	list-style: none;
	}
	</style>

	</head>
	<body>

	<div id="menu">
	<ul>
	<li>One</li>
	<li>Two</li>
	<li>Three Three</li>
	<li>Fourty Eight</li>
	<li>Ten</li>
	<li>Testing Space</li>
	<li>Holy Cow</li>
	<li>Running Low</li>
	<li>This is the One</li>
	<li>Done</li>
	</ul>
	<div id="more"><ul></ul></div>
	</div>

	<script>

	var total = 0;
	var width = $('#menu').width()-100;

	function more(){

	$('#menu li').each(function(k,v){
	console.log($(this))
	total += $(this).width();

	if (total > width){
	$(this).appendTo('#more > ul');

	}
	});

	if (total > $('#menu').width()){
	console.log(total)
	$('#menu > ul').append('<li class="seeMore">more...</li>')

	}
	$('.seeMore').hover(function(){

	$('#more').show();

	}, function(){
	$('#more').hide();
	});


	}
	more();
	$(window).resize(function () {

	more()
	});




	</script>


	</body>
	</html>