Me estoy volviendo loco con el problema de CSS probablemente más fácil. Solo quiero agregar un margen entre un elemento <ul> y <li>. Utilizo un menú desplegable cuando estoy en una categoría.

Intenté agregar margin-top en cada clase / elemento css que tengo, pero no hay ningún efecto. ¿Me pierdo una clase aquí o hay alguna solución alternativa?

Esto es lo que pensé que es la solución de trabajo, pero no incluye un margen:

#sidebar .subbar li:first-child {
  margin-top: 10px;
}

enter image description here

¡Gracias de antemano!

HTML:

    <div id="sidebar">
      <header>
        <a href="#">Dasocc</a>
      </header>
      <ul class="nav">
        <li class="countries"><img src="{% static "images/germany.png" %}" alt="germany">1. Bundesliga
          <ul class="subbar">
            <li><a class="team" id="69">FC Bayern München</a></li>
            <li><a class="team" id="70">Borussia Dortmund</a></li>
            <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
            <li><a class="team" id="74">RB Leipzig</a></li>
            <li><a class="team">VfL Wolfsburg</a></li>
            <li><a class="team">SC Freiburg</a></li>
            <li><a class="team">Eintracht Frankfurt</a></li>
            <li><a class="team">Borussia M. Gladbach</a></li>
            <li><a class="team">FC Schalke 04</a></li>
            <li><a class="team">TSG 1899 Hoffenheim</a></li>
            <li><a class="team">1. FC Union Berlin</a></li>
            <li><a class="team">Fortuna Düsseldorf</a></li>
            <li><a class="team">SV Werder Bremen</a></li>
            <li><a class="team">1. FC Köln</a></li>
            <li><a class="team">SC Paderborn</a></li>
            <li><a class="team">FC Augsburg</a></li>
            <li><a class="team">Hertha BSC Berlin</a></li>
          </ul>
        </li>

CSS:

/* Länderkategorien untereinander */
#sidebar .nav .countries {
  padding-top: 10px;
}

/* hovered Team */
#sidebar .nav a:hover {
  color: #FF5B5B;
  font-size: 13px;
  font-weight: bold;
  background-color: #000481;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 0.4em #000481;
}

/* angeklicktes Team */
#sidebar .subbar .team.active {
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}

/* Untermenü ausblenden, um dropdown Effekt zu aktivieren */
#sidebar .subbar {
  display: none;
  width: 100%;
  padding-top: 15px;
}

/* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
  display: table-row;
  list-style: none;
}

/* Style Menüpunkte Countries */
.countries {
  text-decoration: none;
  color: #FFF;
  font-size: 14px;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: 'Muli', sans-serif;
}

/* Einzelne List-Container in Submenü */
#sidebar .subbar li {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  width: 100%;
}

/* Einzelne Teamnamen in Submenü */

#sidebar .subbar .team {
  display:table-cell;
  font-size: 11px;
  font-family: 'Muli', sans-serif;
  padding-left: 33px;
  padding-right: 5px;
}
´´´

0
Phanti 11 oct. 2019 a las 17:28

3 respuestas

La mejor respuesta

Esto se debe al hecho de que en el evento :hover estás mostrando <ul> como table-row:

#sidebar .countries:hover .subbar {
  display: table-row;
  ...

En realidad, si lo muestra como un block, verá que se muestra con el margen que ha especificado, como es de esperar:

#sidebar .countries:hover .subbar {
  display: block;
  ...

El siguiente fragmento lo muestra (aunque se muestra mal):

#sidebar {
background-color: blue;
}

/* Länderkategorien untereinander */
#sidebar .nav .countries {
  padding-top: 10px;
}

/* hovered Team */
#sidebar .nav a:hover {
  color: #FF5B5B;
  font-size: 13px;
  font-weight: bold;
  background-color: #000481;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 0.4em #000481;
}

/* angeklicktes Team */
#sidebar .subbar .team.active {
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}

/* Untermenü ausblenden, um dropdown Effekt zu aktivieren */
#sidebar .subbar {
  display: none;
  width: 100%;
  padding-top: 15px;
}

/* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
  display: block;
  list-style: none;
}

/* Style Menüpunkte Countries */
.countries {
  text-decoration: none;
  color: #FFF;
  font-size: 14px;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: 'Muli', sans-serif;
}

/* Einzelne List-Container in Submenü */
#sidebar .subbar li {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  width: 100%;
}

/* Einzelne Teamnamen in Submenü */

#sidebar .subbar .team {
  display:table-cell;
  font-size: 11px;
  font-family: 'Muli', sans-serif;
  padding-left: 33px;
  padding-right: 5px;
}
<div id="sidebar">
  <header>
    <a href="#">Dasocc</a>
  </header>
  <ul class="nav">
    <li class="countries"><img src="" alt="germany">1. Bundesliga
      <ul class="subbar">
        <li><a class="team" id="69">FC Bayern München</a></li>
        <li><a class="team" id="70">Borussia Dortmund</a></li>
        <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
        <li><a class="team" id="74">RB Leipzig</a></li>
        <li><a class="team">VfL Wolfsburg</a></li>
        <li><a class="team">SC Freiburg</a></li>
        <li><a class="team">Eintracht Frankfurt</a></li>
        <li><a class="team">Borussia M. Gladbach</a></li>
        <li><a class="team">FC Schalke 04</a></li>
        <li><a class="team">TSG 1899 Hoffenheim</a></li>
        <li><a class="team">1. FC Union Berlin</a></li>
        <li><a class="team">Fortuna Düsseldorf</a></li>
        <li><a class="team">SV Werder Bremen</a></li>
        <li><a class="team">1. FC Köln</a></li>
        <li><a class="team">SC Paderborn</a></li>
        <li><a class="team">FC Augsburg</a></li>
        <li><a class="team">Hertha BSC Berlin</a></li>
      </ul>
    </li>
  </ul>
</div>
1
Martin 11 oct. 2019 a las 14:41

Resuelto simplemente agregando bloque de pantalla y relleno superior al elemento .subbar

* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
  display: table-row;
  list-style: none;
  
}

/* Style Menüpunkte Countries */
.countries {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: 'Muli', sans-serif;
}

/* Einzelne List-Container in Submenü */
#sidebar .subbar{
display: block;
padding-top:40px
}
#sidebar .subbar li {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  width: 100%;
  color:#000 !important
}
a{
color: #000
/* Einzelne Teamnamen in Submenü */

#sidebar .subbar .team {
  display:table-cell;
  font-size: 11px;
  font-family: 'Muli', sans-serif;
  padding-left: 33px;
  padding-right: 5px;
}
<div id="sidebar">
      <header>
        <a href="#">Dasocc</a>
      </header>
      <ul class="nav">
        <li class="countries"><img src="{% static "images/germany.png" %}" alt="germany">1. Bundesliga
          <ul class="subbar">
            <li><a class="team" id="69">FC Bayern München</a></li>
            <li><a class="team" id="70">Borussia Dortmund</a></li>
            <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
            <li><a class="team" id="74">RB Leipzig</a></li>
            <li><a class="team">VfL Wolfsburg</a></li>
            <li><a class="team">SC Freiburg</a></li>
            <li><a class="team">Eintracht Frankfurt</a></li>
            <li><a class="team">Borussia M. Gladbach</a></li>
            <li><a class="team">FC Schalke 04</a></li>
            <li><a class="team">TSG 1899 Hoffenheim</a></li>
            <li><a class="team">1. FC Union Berlin</a></li>
            <li><a class="team">Fortuna Düsseldorf</a></li>
            <li><a class="team">SV Werder Bremen</a></li>
            <li><a class="team">1. FC Köln</a></li>
            <li><a class="team">SC Paderborn</a></li>
            <li><a class="team">FC Augsburg</a></li>
            <li><a class="team">Hertha BSC Berlin</a></li>
          </ul>
        </li>
        </ul>
        </div>
1
Sim1-81 11 oct. 2019 a las 14:39

Intente esto en su archivo css.

.team{
 padding-left:20px;
}

O

.team{
 margin-left: 20px;
}

Sencilla

1
Alexei Kitaev 11 oct. 2019 a las 14:34