html水平导航栏设置

来源：互联网发布：网络机顶盒浏览器下载编辑：程序博客网时间：2024/05/29 11:35

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet"  type="text/css"  href="111.css"/></head><body><ul class="navigation">    <li><a>Let's Go</a></li>    <li><a id="home" >主页</a></li>    <li><a id="product_list">商品列表</a></li>    <li> <a class="cart" >购物车</a> </li></ul></body></html>

建立无序列表，出来的是垂直着的。我们现在需要的是水平导航栏。

在css里进行样式设置

li {    display:inline;}a:link,a:visited{    text-decoration:none;    Vertical-align:top;}

这样出来的就是水平的了。

下拉的导航栏

<ul id="nav">    <li><a href="/">Home</a></li>    <li><a href="/products">Products</a>        <ul>            <li><a href="/products/shoes">Shoes</a></li>            <li><a href="/products/jackets">Jackets</a></li>        </ul>    </li></ul>

#nav li li a {    padding: 2px;}

products下面有shoes和jackets两个选项。

0 0