I am attempting to design a page header with a menu that resembles the image provided below.
As I construct the navigation, each link area (highlighted in blue) is represented by an <li>. However, I am encountering an issue where the items are stacking vertically instead of horizontally.
You can view the code on jsFiddle.
<header>
<div id="area-logo">
<div class="header-ribbon"></div>
<div class="container bg-white"></div>
</div>
<nav id="main-menu">
<ul>
<li id="link-a-link">
<div class="header-ribbon"></div>
<div class="container bg-white"> <a href="#">link a</a>
</div>
</li>
<li id="link-b-link">
<div class="header-ribbon"></div>
<div class="container bg-white"> <a href="#">link b</a>
</div>
</li>
<li id="link-c-link">
<div class="header-ribbon"></div>
<div class="container bg-white"> <a href="#">link c</a>
</div>
</li>
<li id="link-d-link">
<div class="header-ribbon"></div>
<div class="container bg-white"> <a href="#">link d</a>
</div>
</li>
<li id="link-e-link">
<div class="header-ribbon"></div>
<div class="container bg-white"> <a href="#">link e</a>
</div>
</li>
<li id="link-f-link">
<div class="header-ribbon"></div>
<div class="container bg-white"> <a href="#">link f</a>
</div>
</li>
</ul>
</nav>
header {
background-color: #787aad;
height: 126px;
}
header .header-ribbon {
height: 6px;
}
header .bg-white {
background-color: #ffffff;
}
#area-logo {
float: left;
}
#main-menu ul {
margin-left: auto;
margin-right: 0px;
padding: 0;
list-style-type: none;
text-align: center;
width: auto;
}
#main-menu ul li {
display: inline;
}
I am looking to ensure that the colored bar above each link and over the logo area have consistent sizes so that if text expands, the width will also increase accordingly.
How should I go about achieving this?
UPDATE
The updated code on jsFiddle has resolved my initial problem. However, it has revealed a rendering bug with the new Microsoft Edge browser, which adds an extra 1px to the border-top of the <li>.