Ändra Menyelement i höjdled

Har en bild som ska vara i linje med element i en meny men de hamnar inte i linje där menyelementen hamnar några cm för långt ner. Trodde jag kunde lägga till css på li elementet och en margin topp eller bottom men den flyttas inte alls upp eller ner.
Hur kan jag göra för att få upp menyelementet "Exempel"?

ul>
<li><a href="index.php"><img src="logo2.jpg" alt="Start"></a</li>
<li style="margin-bottom: 10px; height:50px;"><span style="padding:45px;">Exempel</span></li>
</ul>

<style>
ul li
{
display: inline-block;
}
</style>

Gjorde om koden och då blev det lite bättre men fortfarande 2 mm felförskjutning av de båda menyelementen Services & About, försökte få upp dem 2mm men den vill ej
Förstår inte riktigt varför margin bottom inte vill fungera men kanske inte funkar på listor.

<style>

ul#menu {
background-color: #f8f8f8;
display: table-row;
}

ul#menu li {
display: table-cell;
/* height: 30px; */
width: 100px;
padding-left: 5px;
vertical-align: bottom;
/* border-right: 1px solid #ccc; */
}

ul#menu li.elements
{
height: 10px;
/* margin-bottom: 45px; */
}

ul#menu li:last-child {
border-right: 0px;
}
</style>

<ul id="menu">
<li style="height:40px;"><a href="../index.php"><img src="./bilder/logo2.jpg" alt="Start"></a></li>
<li class="elements">Services</li>
<li class="elements">About</li>
</ul>