यह एक बहुत ही सरल, verticale सीएसएस मेनू है. यह ट्यूटोरियल एक शांत हॉवर प्रभाव से एक सरल और आकर्षक सीएसएस मेनू बनाने में मदद करता है.

कदम: 1

सबसे पहले हमें मेनू के लिए सीएसएस कोड लिख दो की. यहाँ .. कोड की जाती है

  # नव उल ( 
  मार्जिन: 0; 
  padding: 0; 
  सूची शैली-प्रकार: कोई नहीं; 
  ) 


  # नव उल ली ( 
  ; /*IE 6*/ प्रदर्शन: इनलाइन; / * IE 6 * / 
  ) 


 display :block ; background : #d9d9d9 ; width : 200px ; text-decoration :none ; padding : 4px /*padding for top, bottom*/ 7px /*padding for left, right*/ ; border-bottom : 1px solid #eeeeee ; border-top : 1px solid #cccccc ; border-left : 5px solid # 333333 ; color : # 333333 ; # नव उल ली एक (प्रदर्शन: ब्लॉक; पृष्ठभूमि: # d9d9d9, चौड़ाई: 200px; पाठ-सजावट: कोई नहीं; padding: 4px / ऊपर, नीचे * / 7px के लिए * padding / छोड़ दिया है, ठीक * के लिए * padding /; सीमा - नीचे: 1px solid # eeeeee; सीमा टॉप: 1px solid # cccccc; सीमा-छोड़ा: 5px ठोस # 333333; रंग: # 333333; 
  { border-left-color : #0099FF ; color : #0066FF ; background : #c4c4c4 ; } # ली एक: (सीमा--रंग: # 0099FF; रंग: # 0066FF; पृष्ठभूमि: # c4c4c4 छोड़ा;) हॉवर उल नव 

चरण: 2

अब हम एक मूल HTML संरचना बनाएँ.

 > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About Us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact </a> </li> < /ul> </div> <div = "nav"> <ul> <li> <a href = "#" आईडी> मुख पृष्ठ </ a> </ ली> <li> <a href = "#"> हमारे बारे में </ a> </ ली> <li> <a href = "#"> सेवाओं </ a> </ ली> <li> <a href = "#"> साइटमैप </ a> </ ली> <li> <एक href = " # "> संपर्क </ a> </ ली> </ उल> </ div> 

हां ..! इसके किया! देखना कितना आसान एक सीएसएस मेनू बनाने के लिए ... एक डेमो है ..?

के तहत दायर: सीएसएस, व्यवस्थापक द्वारा Tutorials