ถามเรื่องเมนู css ครับ

ผมเพิ่งหัดใช้ CSS ทีนี้พอถึงเมนู <ul><li></li></ul>


ปัญหาก็คือว่า พอจะเพิ่มเมนูใหม่ มันไม่ไปต่อทางซ้าย แต่มันต่อจากอันสุดท้าย (ทางขวามือ) แล้วเพิ่มอีกอันถึงไปต่อทางซ้าย ดังรูปที่ 1

รูปที่ 1

แต่ที่ต้องการคือให้มันต่อทางซ้ายเลย ดังรูปที่ 2

รูปที่ 2

ช่วยบอกแนวทางแ้ก้ไข + ความรู้เพิ่มเติม ด้วยน่ะครับ ขอบคุณครับ

@charset "utf-8";
#navigation{
	width:900px;
}
ul{
	margin:0px;
	padding:0px;
	width:900px;
	height:30px;
}
li{
	height:30px;
	margin:0px;
	padding:0px;
	font:Tahoma;
	font-size:14px;
	color:#000000;
	float:left;
	display:block;
	list-style-type:none;
	background-image:url(../images/link.gif);
	background-repeat:no-repeat;
	width:140px;
}
li a{
	width:140px;
	height:30px;
	padding-top:5px;
	background-image:url(../images/link.gif);
	background-repeat:no-repeat;
	display:block;
	color:#000099;
	font-size:14px;
}
li a:hover{
	height:30px;
	padding-top:5px;
	background-image:url(../images/link_hover.gif);
	background-repeat:no-repeat;
	display:block;
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
}

น่าจะมี แท็ก HTML ตัวอย่างมาด้วย

ยังไงลองดูตัวอย่าง https://www.ninenik.com/สร้างเมนูแนวนอน_ด้วย_CSS_ไม่ต้องใช้ตารางอย่างง่าย-115.html

และแนะนำการกำหนด css เป็นไปได้ควรใช้ class แทนการใช้ css กับแท็ก li หรือ ul โดยตรง เพราะอาจเกิดปํัญหา เช่น ทำให้ ul หรือ li ส่วนอื่นเปลี่ยนไปตามการกำหนด css สำหรับเมนู

อีกอย่างหนึ่งไม่แน่ใจว่า ต้องการเมนูแภวเดียวแบบ ยาว หรือว่าเมนูแบบสอง แถว  แบบให้ตัดเมนูส่วนที่เกินขอบเขตให้มาอยู่ข้างล่าง หรือป่าว.