<div id="navcontainer">
 <ul id="navlist">
	 <li> <a href="http://www.google.com"> गूगल </ a> </ li>
	 <li> <a href="http://www.yahoo.com"> याहू </ a> </ li>
	 <li> <a href="http://www.msn.com"> एमएसएन </ a> </ li>
	 <li> <a href="http://www.lycos.com"> लाइकोस </ a> </ li>
	 <li> <a href="http://www.baidu.com"> Baidu </ a> </ li>
 </ Ul>
 </ Div> 

  * {
 arial , helvetica , sans-serif ; font-परिवार: Arial, Helvetica, बिना सेरिफ़;
 }
 # Navcontainer उल
 {
 0 ; गद्दी की बाईं: 0;
 0 ; मार्जिन बाएँ: 0;
 #222 ; पृष्ठभूमि रंग: # 222;
 White ; रंग: सफेद;
 left ; फ्लोट: छोड़ा;
 100% ; चौड़ाई: 100%;
 13px ; फ़ॉन्ट आकार: 13px;
 uppercase ; पाठ परिवरतित: अपरकेस,
 bold ; फ़ॉन्ट वजन: बोल्ड;
 }

 display : inline ; } # Navcontainer उल ली {प्रदर्शन: इनलाइन;}

 # Navcontainer उल ली एक
 {
 0.7em 1.8em ; गद्दी: 0.7em 1.8em;
 #222 ; पृष्ठभूमि रंग: # 222;
 White ; रंग: सफेद;
 none ; पाठ - सजावट: कोई नहीं;
 left ; फ्लोट: छोड़ा;
 100px ; चौड़ाई: 100px;
 1px solid #fff ; सीमा - सही: ठोस 1px fff;
 } 

  ( ) { ($ Function () {
		 ) . hover ( function ( ) { हॉवर $ ("# navlist एक"). (Function () {
			 ) . css ( "background-color" , "#369" ) ; $ (यह) सीएसएस ("पृष्ठभूमि रंग", "# 369");
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (यह) चेतन ({चौड़ाई: ''200px}, {अवधि: 200, कतार: झूठी});
		 },
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (यह) सीएसएस ("पृष्ठभूमि रंग", "222 #");
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (यह) चेतन ({चौड़ाई: ''100px}, {अवधि: 200, कतार: झूठी});
		 });		
	 });