CSS-Probleme keine Sinn

Question

Ich versuche mein jQuery-Menü zu perfektionieren.

Allerdings laufe ich auf einige CSS-Probleme und ich bin fest. Hier sind meine Probleme.

#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; 
} 

Ich laufe auf einige CSS-Probleme, und ich bin fest. Hier sind meine Probleme. Ich laufe auf einige CSS-Probleme und ich bin fest. Hier sind meine Probleme.

Answer 1

Um es zusammenzufassen:

1. Um Polsterungen auf Links ohne Symbole, wickeln Sie den gesamten Text innerhalb Elemente in <span> (nur noch diejenigen, die keine <span> haben) hinzufügen und padding-left zu Spannweiten hinzufügen, die kein Symbol haben vor sie:

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

2. Anzeigegrenzen nur für Artikel, die in der Gruppe zuletzt sind:

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

3. Die Bildlaufleiste wird angezeigt, weil Sie die Regel min-width angegeben haben. TU es nicht. Es wird kleine Bildschirme durcheinander bringen, weil es niemals zusammenbrechen wird. Entfernen Sie auch padding-right: 65px; und padding-right: 280px; - sie sind falsch.

Hier ist die letzte Geige: https://jsfiddle.net/pjb7jzjk/36/

P. S. Ich schlage vor, Sie overflow-y: scroll Regel .sidebar-nav hinzufügen, um es auf Bildschirmen mit geringer Höhe scrollbaren zu machen.

Answer 2

Ad.1 - versuchen

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