Two rows in one row, vertical alignment maybe

HTML & CSS
5

That’s why I used the html5 nav element because it is meant for a list of nav links but without implicitly using a list structure. There’s no need to put a list inside a nav element as the semantics of the nav element define its use perfectly without further mark up.

The problem with your method that is is now the list element that has full height and not the anchors (even though you give them 100% height that will only refer to the current cell and not adjacent cells (assuming that browsers let you use height:100% on cell content which is not always the case)). It also means you lose the vertical alignment because your anchor is now `100% tall so there is nothing to center; you would then need another cell inside the anchor to mimic yet another table.

e.g. Like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Your page title</title>
<style>
.headerbar {
    background:#b29562
}
.headerbar ul {
    list-style-type:none;
    display:table;
    margin:0;
    padding:0;
    height:1px;
}
.headerbar ul li, .headerbar a span {
    display:table-cell;
    vertical-align:middle;
}
.headerbar a {
    display:table;
    height:100%;
    width:100%;
    color:#F1F8E0;
    text-decoration:none;
    line-height:1.2;
    text-align:center;
    border-right:1px solid #fff;
}
.headerbar span{    padding:0 20px}
a.skip {background:blue;}
a.hotels {
    background:magenta;
    text-transform:uppercase;
}
.headerbar a:hover {background:red;}
</style>
</head>

<body>
<nav class="headerbar">
        <ul>
                <li><a class="skip" href="#" ><span>Skip to content</span></a>
                <li><a class="hotels" href="#"><span>Dubrovnik<br>
                        Hotels</span></a>
                <li><a href="#"><span>Home</span></a>
                <li><a href="#"><span>Hotels</span></a>
                <li><a href="#"><span>Historic City</span></a>
                <li><a href="#"><span>Culture</span></a>
                <li><a href="#"><span>Weddings</span></a>
        </ul>
</nav>
</body>
</html>

All in all the nav method is simpler and less html and more robust.:slight_smile: