html水平导航栏设置

最新推荐文章于 2024-05-19 09:58:49 发布

Ms_WY

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量8.3k

点赞数 2

本文链接：https://blog.csdn.net/Ms_WY/article/details/54288978

版权

<!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>