0

次のメニューを再作成するタスクが与えられました。

ここに画像の説明を入力してください

下に線を引くための最良の方法は何でしょう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;
}
4

2 に答える 2

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

必要なものだけだと思います

ここの例

于 2012-05-28T08:43:34.007 に答える
0

ねえ今あなたは定義することができます

あなたのCSSで

.appsuite ul li:hover{
background:url('yourarrow.png') no-repeat xxpx xxpx; // define position according to your layout 
}
于 2012-05-28T06:19:07.460 に答える