我需要制作一个水平菜单，其中包含 CSS3 和 html 中的移动图像

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

过渡有点有效，但它不会将以下 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>

这是一个工作示例 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;
}

相关内容

最新更新

热门标签：