100% children height in horizontal navigation with dynamic logo/element height - css

Question

I've browsed around for a while but I believe I have a slightly more unique situation here.
I have a simple navigation which is a <ul> list, with each <li> containing an anchor <a>. The first <li> contains an image which is the logo.
I'd like for each of the subsequent <li> AND <a> elements to expand to the height of the logo, whatever it may be (I would like for the only static height in this solution to be defined on the logo's image, if possible).
The elements should also be vertically centered.
When you hover on the <a> tags, the background and cursor selection should cover the entire height.
I've tried using display: flex; and display: table-cell, with vertical-align: middle and a bunch of other things. I've almost got it but there is some empty space above and below the <a> tags. The only way I can see to fix it is to use a static height on the <a> tags, but I'm posting here to see if anyone knows of any alternatives.
Please note that this doesn't have to be a cross-browser solution (although that would be nice).
Also note that these elements will include a sub-navigation dropdown, so solutions which might include overflow: hidden may not be applicable in that case.
Here is the code:
a {
font-family: 'Trebuchet MS';
text-decoration: none;
}
nav {
background: #444;
}
nav > ul > li {
display: table-cell;
vertical-align: middle;
}
nav > ul > li img {
display: table-cell;
vertical-align: middle;
height: 24px;
padding: 24px;
}
nav > ul > li a {
display: table-cell;
vertical-align: middle;
padding: 24px;
color: #fff;
}
nav > ul > li:hover a {
cursor: pointer;
background: white;
color: #444;
}
<nav role="navigation">
<ul>
<li>
<img src="http://i.imgur.com/ZPB7f3l.png" />
</li>
<li>About
</li>
<li>Work
</li>
<li>Ideas
</li>
<li>Contact
</li>
</ul>
</nav>
Here is the fiddle: http://jsfiddle.net/0br6r0sh/1
Any advice is appreciated!
Thanks,
Ryan

Answer 1

I've tried to implement your requirements using Flexbox. Unfortunately not in a cross browser fashion as it only works on Chrome.
The <img> is given a display: block to remove all padding/margin around it. I've used three sets of display: flex, for the <ul>, <li> and <a>.
a {
font-family: 'Trebuchet MS';
text-decoration: none;
}
nav {
background: #444;
}
nav > ul {
display: flex;
flex-direction: row;
align-items: stretch;
}
nav > ul > li {
background-color: #555;
display: flex;
}
nav > ul > li img {
height: 24px;
padding: 24px;
background-color: #ccc;
display: block;
}
nav > ul > li a {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 24px;
color: #fff;
background-color: #666;
}
nav > ul > li:hover a {
cursor: pointer;
background: white;
color: #444;
}
<nav role="navigation">
<ul>
<li>
<img src="http://i.imgur.com/ZPB7f3l.png" />
</li>
<li>About
</li>
<li>Work
</li>
<li>Ideas
</li>
<li>Contact
</li>
</ul>
</nav>