ट्यूटोरियल एक सुंदर, सरल, क्षैतिज सीएसएस मेनू बनाने के लिए |

ट्यूटोरियल एक सुंदर, सरल, क्षैतिज सीएसएस मेनू बनाने के लिए

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

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

  # नव 
  ( 
  padding: 0; 
  ) 

  # नव ली 
  ( 
  प्रदर्शन: इनलाइन; 
  ) 

 # नव ली एक 
  ( 
  font-परिवार: Arial; 
  font-size: 12px; 
  ; पाठ-सजावट: कोई नहीं; 
  फ्लोट: छोड़ा; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; रंग: # FFFFFF; 
  सीमा-bottom: 1px; 
  ; सीमा-bottom-color: # 000000; 
  सीमा-नीचे शैली: ठोस; 
  ) 

  # नव ली एक: मंडराना 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  सीमा-bottom: 2px; 
  ; सीमा-bottom-color: # 000000; 
  सीमा-नीचे शैली: ठोस; 
  मार्जिन: - 1px; 
  ) 

दूसरे की हम सभी के लिए मेनू HTML सूची लिख दीजिए. हम, के रूप में छवि में, यहाँ जाता है कोड .. दिखाया 7 लिंक है कहो


 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Help </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> <ul id = "nav"> <li> <a href = "#"> होम </ <> <li> <a href = "#"> के बारे में एक> </ ली / एक> </ ली> <ली > <a href = "#"> सेवाओं </ a> </ ली> <li> <a href = "#"> उत्पाद </ a> </ ली> <li> <a href = "#"> साइटमैप </ a> </ ली> <li> <a href = "#"> <मदद / एक> </ ली> <li> <a href = "#"> संपर्क करें </ a> </ ली> < / उल>