Question

所以我之前从未创建过下拉菜单。

我的问题是我的导航菜单的纹理怎么样？

我有html代码：

<div id="nav">

 <ul class="bar">
 <li></li> 
 <li></li> 
 <li></li>     
 <li>Guitars</li> 
 <ul>
 <li>Fender</li>    
 <li>Yamaha</li> 
 </ul> 
 </ul>

</div>

所以我想在所有导航菜单和子菜单中添加纹理我该怎么做？我可以使用background-image:('images/texture.png');吗？我有一个透明的图像，如何使导航菜单水平？

非常感谢你的时间。

Answer 1

对于背景图片，请使用url()（spec）：

background-image: url('images/texture.png');

...但如果图像是透明的，我看不出这一点。

要使菜单水平，请使用浮动或内联块元素：

.bar > li {
    display: inline-block;
}

或

.bar {
    overflow: auto; /* Different than visible, to clear floating */
}
.bar > li {
    float: left;
}

Answer 2

我想这取决于你想要的纹理？

如果您只想让子菜单具有纹理

这就像是

 ul.bar li ul {background-image: url('images/texture.png');}

您还可以将背景图像拖放到背景中，并在短版本中添加重复或居中或顶部或其他内容

 ul.bar li ul {background: url('images/texture.png') repeat center top;}

希望这有帮助！

带子菜单和纹理的下拉菜单？

2 个答案: