CSS Menu Recreation

Question

I have been given the task of recreating the following menu:

What would be the best way to set the line underneath border-bottom? and then have the image on hover/active?

The gray line you see in the image is the bottom of my bookmarks bar. My header has a height of 50px

How would I make my nav have the correct distance above like in the image below - using bottom:0?

HTML:

<header>
    <h1><img src="_assets/images/b_logoheadertab.png" width="250" height="50" alt="B Logoheadertab"></h1>
        <nav class="main">
            <ul>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
            </ul>
        </nav>
            <div class="login">
                <p>Welcome <a class="link">UserName</a> | <a class="logOutLink" href="#">Log Out</a></p>
    </header>

CSS:

header{
    width:100%;
    height:50px;
    background-color:#184C82;
    border-bottom:1px solid red;
}
header h1{
    float:left;
    width:250px
}
header nav{
    float:left;
    margin:0 15px 0 0;
    color:#fff;
    width:434px;
    height:50px;
}
header nav ul li{
    display:inline;
    margin:0 0 0 2px;
}
header nav li a{
    text-decoration:none;
    color:#FFF;
    height:100px;
    width:45px;
}
header nav li{
    width:45px;
    background:url('../images/nav_active.png') no-repeat;
}
header .login{
    float:right;
}

Answer 1

header nav ul li {
 display:inline;
 margin:0 0 0 2px;
 line-height:50px;     
 padding-bottom: 10px; // additional space for border bottom and arrow
}

header nav li:hover, header nav li.active {    
 background:url('http://www.ptt.co.uk/img/RedUpArrow.gif') no-repeat center bottom; // center it and place it to the bottom 
 border-bottom: 1px solid white; // for border bottom
}

For active class

<nav class="main">
        <ul>
            <li class="active"><a href="#">Dashboard</a></li>
            <li><a href="#">Messenger</a></li>
            <li><a href="#">Campaigner</a></li>
            <li><a href="#">Connet API</a></li>
        </ul>
    </nav>

I think it is just what you need

Example here

Answer 2

Hey now you can define

in your css

.appsuite ul li:hover{
background:url('yourarrow.png') no-repeat xxpx xxpx; // define position according to your layout 
}