2

編集ミッションが完了しました。返信ありがとうございます。クリックして拡大/フェードして表示する機能を誰かが手伝ってくれるなら、それは非常に役に立ちます。私は現在それを調べています。

私は自分のウェブサイトの非常にシンプルなナビゲーションに取り組んでいます。テキストが右側に貼り付けられない理由がわかりません。次に例を示します：http：//jsfiddle.net/E6ArK/

また、クリックして拡大し、フェードインビュー機能をいつか追加したいと思っています。どんな助けでも大歓迎です。

HTML

<div class="navigation">
    <ul>
        <li>
             <h1>Applications</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
        <li>
             <h1>Forum</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
        <li>
             <h1>Guilds</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
        <li>
             <h1>Imageboards</h1>

            <ul>
                <li>People</li>
                <li>Random</li>
                <li>Screen Shots</li>
                <li>Wallpapers</li>
            </ul>
        </li>
        <li>
             <h1>Projects</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
    </ul>
</div>

CSS

/* NAVIGATION */

/* Heading */
 .navigation ul li h1 {
    background : #000000;
    color : #ffffff;
    display : table;
    font-weight : 100;
    margin : 0;
    padding : 6px;
    border-right : 3px solid #ffffff;
    font-size : 28px;
    margin-bottom : 3px;
}
/* Positioning */
 .navigation {
    font-family :'Open Sans Condensed', sans-serif;
    margin : 12px;
    position : fixed;
    right : 0;
    top : 0;
}
.navigation ul {
    font-size : 20px;
    margin : 0;
    padding : 0;
    text-align : right;
}
.navigation ul li {
    clear : right;
    color : #ffffff;
    float : right;
    list-style-type : none;
}
/* Second Level */
 .navigation ul li ul {
    display : none;
}
.navigation ul li:hover ul {
    display : block;
}
.navigation ul li ul li {
    background : #000000;
    border-right : 3px solid #ff0000;
    color : #ffffff;
    display : table;
    font-size : 18px;
    margin-bottom : 3px;
    padding : 6px;
}
4

2 に答える 2

1

見出しも右にフロートさせる必要があります。float: rightのルールのブロックに追加します.navigation ul li h1。それは彼らを右に固執させ続けるはずです。

于 2013-02-19T14:58:44.543 に答える
1

見出しのスタイルにfloat：rightプロパティを追加するだけです。

 /* Heading */
 .navigation ul li h1 {
    background : #000000;
    color : #ffffff;
    display : table;
    font-weight : 100;
    margin : 0;
    padding : 6px;
    border-right : 3px solid #ffffff;
    font-size : 28px;
    margin-bottom : 3px;
    float: right;
}

お役に立てば幸い

于 2013-02-19T14:58:55.293 に答える