html - CSS 菜单娱乐

Question

我的任务是重新创建以下菜单:

在 border-bottom 下面设置线条的最佳方法是什么？然后让图像悬停/激活？

您在图片中看到的灰线是我书签栏的底部。我的页眉高度为 50px

如何使我的导航在上方具有正确的距离，如下图所示 - 使用 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
}

对于主动类

<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>

我觉得这正是你需要的

示例 here