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

Answer 2

嘿，现在你可以定义

在你的CSS中

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