Position: fixed inside display: table bug

[differo]

I've come across a really frustrating issue. I'm working to create a menu drawer that is inside a \[code\]<ul>\[/code\]. When the nested \[code\]<div>\[/code\] inside the table is \[code\]display: {fixed,absolute}\[/code\], a whitespace placeholder shows up where another table cell would be. I can't understand why or how to get around it. CodePen of the code is here: http://codepen.io/quicksnap/pen/gsHrb and you can toggle the topmost class to see what I'm talking about.Appreciate any insight on why or how to retain this markup structure and get it to display fixed/absolute without altering the parent table display.Markup: \[code\]<ul> <li> <a href=""><span>Lorem</span></a> </li> <li> <a href=""><span>Lorem</span></a> </li> <li> <a href=""><span>Lorem</span></a> </li> <li> <a href=""><span>Lorem</span></a> </li> <div class="fixed"/></ul>\[/code\]CSS: \[code\]/* Why does the display: table show an empty placeholder for an element inside that is position: fixed/absolute?*//* Comment out/remove !important to see bug */.fixed { display: none !important; }.fixed { display: block; position: fixed; top: 60px; left: 0; width: 100%; height: 100px; background: salmon;}ul { padding: 0; margin: 0; width: 100%; height: 60px; display: table; table-layout: fixed; position: relative; background: #ccc;}ul > li { display: table-cell; text-align: center; vertical-align: middle;}\[/code\]