Creating a 4-column Panel Bar Layout with Specific Conditions:
- #c1, #c2 = fixed width
- #c3 autofill with remaining width
- #c4 auto width (adjusts based on content) corresponding to #c3
Requirements:
- Float #c4 to the right instead of absolute positioning
- No specific right margin on #c3 for dynamic spacing with content in #c4
- Variable width on .smenu for horizontal list items flow
- Responsiveness across platforms and devices (minimum IE8 support)
- Display smenu list horizontally without specific container width
Additional Issue:
- Hovering on .show-sub a tag shows .smenu, but hovering over sub-menu items hides it. Solution to keep it open when hovering?
Alternative Attempt:
Tried using display:table-cell but faced issues. Check demo here
HTML
<div id="sticky-bar" class="cf">
<div id="c1" class="left">col 1</div>
<div id="c2" class="left">col 2</div>
<div id="c3">
<span class="incredibly-long-txt">Long text goes here</span>
</div>
<div id="c4">
<ul class="mmenu">
<li>
<a href="#" class="show-sub">m1</a>
<ul class="smenu">
<li>
<a href="#">a1</a>
</li><li>
<a href="#">a2</a>
</li><li>
<a href="#">a3</a>
</li><li>
<a href="#">a4</a>
</li>
</ul>
</li>
<li>
<a href="#" class="show-sub">m2</a>
<ul class="smenu">
<li>
<a href="#">b1</a>
</li><li>
<a href="#">b2</a>
</li><li>
<a href="#">b3</a>
</li><li>
<a href="#">b4</a>
</li>
</ul>
</li>
<li>
<a href="#" class="show-sub">m3</a>
<ul class="smenu">
<li>
<a href="#">c1</a>
</li><li>
<a href="#">c2</a>
</li><li>
<a href="#">c3</a>
</li><li>
<a href="#">c4</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
*(...CSS styles here...)