0

我有一个大问题，这是我到目前为止网站上的所有代码。我需要制作一个水平导航菜单栏，该菜单栏与我的网站顶部对齐，上面有一个图标，下面有一个过渡，包含链接（菜单按钮）。

过渡有点工作，但它不会将以下 img 推开，从而允许文本与正确的图标一起显示。

CSS：

*                   { padding: 0px; margin: 0px; border: 0px; }


html, body              { width: 100%;
                    height: 100%;
}


body                    { display: inline-block;
}


wrapper             { width: 100%;                          
                    background-color: #0F0;
                    margin-top: 40px;                       
}


#topsnap_nav                { width: 100%;
                    height: 40px;
                    background-color: #000;
                    position: fixed;
                    top: 0px;
}


ul                  { float: right;
}


ul li                   { list-style-type: none;
}


li                  { display: inline-block;
                    background-color: #CF0;
                    position: relative;
                    float:right;
}


li a                    { width: 0px;
                    background:red;
                    transition:width 2s;
                    -webkit-transition:width 2s; /* Safari */
                    display: block;
                    float: left;
                    position: absolute;
                    bottom: 0px;
                    right: 0px;
                    margin-right: 40px;
                    overflow: hidden;
                    height: 40px;
}



li:hover a              { width: 400px;
}


li img                  { float: right;
                    display: block;
}

HTML： 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/styles_main.css">
    <link rel="stylesheet" type="text/css" href="css/styles_fonts.css">
    <link rel="stylesheet" type="text/css" href="css/styles_nav.css">
</head> 


<body> 

<div id="topsnap_nav">

        <nav>

        <ul>
            <li>
                <img src="images/work_images/Untitled-1.png" width="40">
                <a href="#">hi</a> 
            </li>
            <li>
                <img src="images/work_images/Untitled-1.png" width="40">
                <a href="#">hello</a> 
            </li>
        </ul>

        </nav>

</div>


    <div id="wrapper"> 

        hi hi hi...

    </div> 

</body>

4

1 回答 1

1

这是一个工作示例http://jsfiddle.net/U5e39e

我将转换放在列表元素上并使用 z-index

li { display: block;    
position: relative;
float:right;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
height: 40px;
width: 40px;
background-color: #CF0;
}


li a { width: 0px;
    background:red;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid blue;
    overflow: hidden;
    height: 40px;
    width: 30px;
    color: blue;
    z-index: 0;
    margin-left: 40px;
}

li:hover { width: 400px;
}

li:hover img{ float:left}


li img { float: left;
    position: relative;
    z-index: 1;
    background-color: yellow;
}
于 2013-10-25T20:17:14.937 回答