सीएसएस कोई समस्या नहीं

Question

मैं अपने jQuery मेनू को सही करने की कोशिश कर रहा हूं।

हालांकि मैं कुछ सीएसएस मुद्दों पर चलता हूं और मैं अटक गया हूं। यहां मेरे मुद्दे हैं।

#nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 20px; 
} 

#nav li { 
    position: relative; 
    margin: 0; 
    font-size: 15px; 
    border-bottom: 1px solid #fff; 
    padding: 0; 
} 

#nav li ul { 
    opacity: 0; 
    height: 0px; 
} 

#nav li a { 
    font-style: normal; 
    font-weight: 400; 
    position: relative; 
    display: block; 
    padding: 16px 25px; 
    color: #fff; 
    white-space: nowrap; 
    z-index: 2; 
    text-decoration: none 
} 

#nav li a:hover { 
    color: #c0392b; 
    background-color: #ecf0f1; 
} 



#nav ul li { 
    background-color: #e74c3c; 
    color: #fff; 
    display: block; 
    list-style: disc; 
} 

#nav li:first-child { 
    border-top: 1px solid #fff; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
} 



#nav .fa { margin: 0px 17px 0px 0px; } 

.logo { 
    width: 100%; 
    padding: 21px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
} 

#logo{ 
color: #fff; 
    font-size: 30px; 
    font-style: normal; 
} 

.sidebar-icon { 
    position: relative; 
    float: right; 
    text-align: center; 
    line-height: 1; 
    font-size: 25px; 
    padding: 6px 8px; 
    color: #fff; 
} 

.disp { 
    opacity: 1!important; 
    height:auto!important; 
    transition: height 100ms ease-in-out; 
    transition-delay: 300ms; 
} 

मैं कुछ सीएसएस मुद्दों पर चलता हूं और मैं अटक गया हूं। यहां मेरे मुद्दे हैं। मैं कुछ सीएसएस मुद्दों पर चलता हूं और मैं अटक गया हूं। यहां मेरे मुद्दे हैं।

Answer 1

यह निष्कर्ष निकालने के लिए ऊपर:

1. माउस के बिना लिंक करने के लिए paddings जोड़ने के लिए, <span> में आइटम के अंदर सभी पाठ लपेट (केवल उन है कि है अभी तक कोई <span>) और फैला पहले कोई आइकन है कि करने के लिए padding-left जोड़ने उन्हें:

   केवल आइटम है कि समूह में पिछले रहे हैं के लिए

   nav li span:first-child { 
       padding-left: 24px; 
   } 
   

2. प्रदर्शन सीमाओं:

   nav li:not(:last-child) { 
       border-bottom: 1px solid #aaa; 
   } 
   

3. स्क्रॉलबार प्रकट होता है क्योंकि आपके पास min-width नियम निर्दिष्ट है। ऐसा मत करो। यह छोटी स्क्रीन को गड़बड़ कर देगा क्योंकि यह कभी नहीं गिर जाएगा। padding-right: 65px; और padding-right: 280px; को भी हटाएं - वे फर्जी हैं। https://jsfiddle.net/pjb7jzjk/36/

   पी.एस. मैं तुम्हें .sidebar-nav को overflow-y: scroll नियम जोड़ने के लिए यह छोटे ऊंचाई के साथ स्क्रीन पर स्क्रॉल करने योग्य बनाने के लिए सुझाव देते हैं:

यहाँ अंतिम बेला है।

Answer 2

Ad.1 -

#nav li > ul > li { 
padding-left: 3em; 
}