1
सीएसएस स्टाइल शीट खोलें। सीएसएस स्टाइल शीट को एचटीएमएल दस्तावेज़ के "सिर" खंड में लिंक करें यदि आपने पहले से ऐसा नहीं किया है यह आलेख सीएसएस प्रोग्रामिंग भाषा की मूल बातें नहीं सिखाता है, जैसे फ़ॉन्ट सेटिंग और पृष्ठभूमि रंग
2
"साफ़फिक्स" कोड जोड़ें "साफ़फिक्स" वर्ग को याद रखें जो आपने मेनू सूची में जोड़ा था? आमतौर पर, ड्रॉप-डाउन मेनू के तत्वों को एक पारदर्शी पृष्ठभूमि होती है और इसके चारों ओर अन्य तत्वों को दबदबा कर सकते हैं। एक छोटा सीएसएस कोड इस समस्या को ठीक कर सकता है। यह एक सरल और आसान समाधान है, लेकिन इंटरनेट एक्सप्लोरर 7 या इससे पहले समर्थित नहीं है:
- .साफ़फ़िक्स: के बाद {
- सामग्री: "" -
- प्रदर्शन: टेबल-
- }
3
मूल लेआउट बनाएं यह कोड पृष्ठ के शीर्ष पर स्थित मेनू को व्यवस्थित करता है और निलंबित तत्वों को छुपाता है। यह संगत कोड पर केंद्रित रहने के लिए कड़ाई से कार्यात्मक है - फिर आप अतिरिक्त सीएसएस गुणों जैसे कि भरण और मार्जिन के साथ इसे छिड़क सकते हैं।
- .एनएवी-आवरण {
- चौड़ाई: 100%
- पृष्ठभूमि: # 999-
- }
- .नेवि-मेन्यू {
- स्थिति: रिश्तेदार-
- प्रदर्शन: इनलाइन-ब्लॉक-
- }
- .नेवि-मेन्यू ली {
- प्रदर्शन: इनलाइन-
- सूची-शैली-प्रकार: कोई नहीं-
- }
- .उप मेनू {
- स्थिति: निरपेक्ष-
- प्रदर्शन: कोई नहीं-
- पृष्ठभूमि: # सीसीसी-
- }
4
एक निलंबित वस्तु को उसके ऊपर घूमकर दिखाई दें। ड्रॉप-डाउन सूची में आइटम दिखाई नहीं दे रहे हैं यह सूची है कि जिस पर यह संबंधित है पर मंडराने के द्वारा एक पूरे सब्लिलिस्ट को बनाने का तरीका यहां है:
- .नेवि-मेन्यू लि: हॉवर> उल {
- प्रदर्शन: इनलाइन-ब्लॉक-
- }
- नोट: यदि ड्रॉप-डाउन मेनू आइटम अतिरिक्त मेनू (फ्लोटिंग कंट्रोल) तक ले जाते हैं, तो यहां जोड़े गए सभी गुण उन सभी को प्रभावित करेंगे। यदि आप केवल ड्रॉप-डाउन मेनू का पहला स्तर शैली चाहते हैं, तो ".nav-menu> ul" का उपयोग करें.
5
एक तीर के साथ ड्रॉप-डाउन मेनू प्रदर्शित करें। वेब डिज़ाइनर अक्सर यह इंगित करते हैं कि एक तत्व ड्रॉप डाउन मेनू खोलता है जिसमें तीर नीचे इंगित करती है। निम्न कोड प्रत्येक मेनू आइटम में यह तीर जोड़ता है:
- .नेवि-मेन्यू> उल> ली: के बाद {
- सामग्री: " 25BC" - / * नीचे इंगित करने वाले तीर के लिए यूनिकोड कोड * /
- फ़ॉन्ट आकार: .5em-
- प्रदर्शन: इनलाइन-
- स्थिति: रिश्तेदार-
- }
- नोट: "शीर्ष" (ऊपर), "नीचे" (नीचे), "दाएं" या "बाएं" (बाएं) गुणों का उपयोग करके तीर की स्थिति में समायोजन करें।
- नोट: अगर सभी मेनू आइटम निलंबित नहीं हैं, तो पूरे "नेवि-मेनू" वर्ग को शैली न दें। इसके बजाय, प्रत्येक HTML तत्व "ली" में दूसरे वर्ग (जैसे ड्रॉप-डाउन श्रेणी) को जोड़ें जहां आप तीर को स्थान देना चाहते हैं। ऊपर दिए गए कोड में, इस वर्ग का संदर्भ दें।
6
भरण, पृष्ठभूमि, और अन्य गुण समायोजित करें। मेनू अब कार्यात्मक होना चाहिए, लेकिन इसकी स्टाइल की आवश्यकता होगी। यदि आप मूल सीएसएस संपत्तियों से परिचित नहीं हैं, तो इंटरनेट पर कुछ मार्गदर्शिका देखें प्रत्येक तत्व वर्ग की उपस्थिति और नियुक्ति में परिवर्तन करने के लिए इन गुणों का उपयोग करें।