How to align specific item into a <li> - html

Question

I need to align specific items into a <li>. That <li> is the first child of a <ul> menu. I have some ideas like do many <span> and align them together or I can divide my <li> area in 3 sections and align my items the one under the others but I do not know which way is the most practical and the most semantically correct.
Here is my code:
<ul id="menuWorkshops">
<li>
<span>Easy</span>
<span>Middle</span>
<span>Difficult</span>
<span class="circle green"></span>
<span class="circle orange"></span>
<span class="circle red"></span>
</li>
<li>
<span>Hardware</span>
<ul>
<li>
<img alt="" src="img/hardware_web.png" /> Montage PC
<span class="circleMenu orange"></span>
</li>
</ul>
</li>
<li>
<span>Système</span>
<ul>
<li>
<img alt="" src="img/os_web.png" /> Installation OS
<span class="circleMenu green"></span>
</li>
</ul>
</li>
<li>
<span>Programmation</span>
<ul>
<li>
<img alt="" src="img/html_web.png" /> Développement Web
<span class="circleMenu orange"></span>
</li>
<li>
<img alt="" src="img/lego_web.png" /> Lego Mindstorm
<span class="circleMenu green"></span>
</li>
<li>
<img alt="" src="img/catch_me_web.png" /> Jeu Attrape-moi (Processing)
<span class="circleMenu red"></span>
</li>
<li>
<img alt="" src="img/tetris_web.png" /> Jeu Tetris (Small Basic)
<span class="circleMenu red"></span>
</li>
<li>
<img alt="" src="img/breakout_web.png" /> Jeu Casse-Brique (Small Basic)
<span class="circleMenu orange"></span>
</li>
<li>
<img alt="" src="img/scratch_web.png" /> Kinect to Scratch
<span class="circleMenu green"></span>
</li>
<li>
<img alt="" src="img/bird_web.png" /> Jeu Flappy Bird (Scratch)
<span class="circleMenu green"></span>
</li>
</ul>
</li>
</ul>
ul#menuWorkshops {
display: inline-block;
width: 285px;
padding-left: 0;
border: 1px solid #000;
border-bottom: 0;
list-style-type: none;
}
ul#menuWorkshops ul {
padding-left: 0;
}
ul#menuWorkshops > li > span {
display: block;
height: 35px;
border-bottom: 1px solid #000;
background-color: #4D4D4D;
color: #FAFAFA;
font-size: 18px;
text-align: center;
line-height: 35px;
}
ul#menuWorkshops > li:first-child {
height: 50px;
background-color: #E0E0E0;
color: #050505;
}
ul#menuWorkshops ul li {
height: 35px;
line-height: 35px;
padding: 5px 10px;
background-color: #007CB7;
color: #FAFAFA;
font-size: 14px;
border-bottom: 1px solid #000;
}
ul#menuWorkshops img {
vertical-align: middle;
}
ul#menuWorkshops ul li:hover {
background-color: #8BBDD9;
color: #050505;
font-weight: bold;
list-style-type: none;
}
span.circleMenu {
float: right;
width: 10px;
height: 10px;
border: 1px solid #FFF;
border-radius: 5px;
}
.green {
background-color: #008000;
}
.orange {
background-color: #FFA500;
}
.red {
background-color: #F00;
}
For you to understand my question I will join a screenshot of the result I want to reach.
my screenshot

Answer 1

I would treat that top section as separate from the navigation that follows, as it's not a sibling list item in any true sense. Here, I've created a nav for the entire menu with a header and a series of dl within for the ease-medium-difficult legend, followed by the ul with .submenu uls for the actual nav items. Certainly not the only way to go about this, but definitely a more semantic solution than what you started with. Obviously, if you prefer everything wrapped in a ul, you can also repurpose this CSS to that end.
body {
box-sizing: border-box;
font-family: sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#menuWorkshops {
border: 1px solid #000;
display: inline-block;
width: 325px;
}
#menuWorkshops dl,
#menuWorkshops dt,
#menuWorkshops dd,
#menuWorkshops ul,
#menuWorkshops li {
margin: 0;
padding: 0;
}
#menuWorkshops header {
background-color: #E0E0E0;
color: #050505;
padding: 12px 10px;
}
#menuWorkshops header dl {
display: inline-block;
font-size: 14px;
width: 32%;
}
#menuWorkshops header dl,
#menuWorkshops header dt,
#menuWorkshops header dd {
margin: 0;
text-align: center;
}
#menuWorkshops header dt,
#menuWorkshops header dd {
display: block;
}
#menuWorkshops header .circle {
margin: 4px auto 0;
}
.circle {
border: 1px solid #FFF;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}
.green {
background-color: #008000;
}
.orange {
background-color: #FFA500;
}
.red {
background-color: #F00;
}
#menuWorkshops ul,
#menuWorkshops li {
display: block;
padding-left: 0;
}
#menuWorkshops li {
color: #FAFAFA;
line-height: 50px;
}
#menuWorkshops > ul > li {
background-color: #4D4D4D;
border-top: 1px solid #000;
font-size: 18px;
text-align: center;
}
#menuWorkshops .submenu li {
border-top: 1px solid #000;
}
#menuWorkshops .submenu a {
background-color: #007CB7;
color: #FAFAFA;
display: block;
font-size: 14px;
padding: 0 10px;
text-align: left;
text-decoration: none;
}
#menuWorkshops .submenu a:hover {
background-color: #8BBDD9;
color: #050505;
font-weight: bold;
list-style-type: none;
}
#menuWorkshops .submenu img {
display: inline-block;
height: 40px;
padding: 0 10px;
vertical-align: middle;
width: 40px;
}
#menuWorkshops .submenu .circle {
float: right;
margin-top: 12px;
}
<nav id="menuWorkshops">
<header>
<dl>
<dt>Facile</dt>
<dd class="circle green"></dd>
</dl>
<dl>
<dt>Moyen</dt>
<dd class="circle orange"></dd>
</dl>
<dl>
<dt>Difficile</dt>
<dd class="circle red"></dd>
</dl>
</header>
<ul>
<li>Hardware
<ul class="submenu">
<li>
<a href="#">
<img alt="" src="img/hardware_web.png" />Montage PC
<span class="circle orange"></span>
</a>
</li>
</ul>
</li>
<li>Système
<ul class="submenu">
<li>
<a href="#">
<img alt="" src="img/os_web.png" />Installation OS
<span class="circle green"></span>
</a>
</li>
</ul>
</li>
<li>Programmation
<ul class="submenu">
<li>
<a href="#">
<img alt="" src="img/html_web.png" />Développement Web
<span class="circle orange"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/lego_web.png" />Lego Mindstorm
<span class="circle green"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/catch_me_web.png" />Jeu Attrape-moi (Processing)
<span class="circle red"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/tetris_web.png" />Jeu Tetris (Small Basic)
<span class="circle red"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/breakout_web.png" />Jeu Casse-Brique (Small Basic)
<span class="circle orange"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/scratch_web.png" />Kinect to Scratch
<span class="circle green"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/bird_web.png" />Jeu Flappy Bird (Scratch)
<span class="circle green"></span>
</a>
</li>
</ul>
</li>
</ul>
</nav>