How can I change the space between <ul> and <li> elements? - html

Question

I am going nuts with the probably easiest css issue ever. I just want to add some margin between a <ul> and <li> element. I use a dropdown when hovered at a category.
I tried to add margin-top in each css class/element I have, but there is no effect at all. Do I miss a class here or is there any workaround solution?
This is what I thought is the working solution, but it doesn't append a margin:
#sidebar .subbar li:first-child {
margin-top: 10px;
}
Thanks in advance!
HTML:
<div id="sidebar">
<header>
Dasocc
</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;
}
´´´

Answer 1

This is due to the fact that on the :hover event you are displaying the <ul> as a table-row:
#sidebar .countries:hover .subbar {
display: table-row;
...
Actually, if you display it as a block then you will find that it displays with the margin you have specified, as you'd expect:
#sidebar .countries:hover .subbar {
display: block;
...
The below snippet shows it (although it renders poorly):
#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>
Dasocc
</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>

Answer 2

try this in your css file.
.team{
padding-left:20px;
}
or
.team{
margin-left: 20px;
}
simple

Answer 3

solved just adding display block and padding top to .subbar element
* 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>
Dasocc
</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>