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