WEB前端

网站纯CSS三级导航菜单水平

位置:首页 > WEB前端 > css教程,2018-08-10 12:25
CSS三级水平导航菜单,效果如下图:纯CSS三级导航菜单水平代码如下:<html><head><meta charset=&quo

CSS三级水平导航菜单,效果如下图:

CSS三级导航菜单(图0)

纯CSS三级导航菜单水平

CSS三级导航菜单(图1)


代码如下:

<html>

<head>

<meta charset="UTF-8">

<title>水平导航菜单</title>

<style type="text/css">

*{margin:0;padding:0}

ol,ul{list-style:none}

.header{margin:30px auto;width:60pc}

.menu{background-color:#008151;font-size:.875rem}

.menu,.nav>li{position:relative}

.nav>li{display:inline-block}

.nav>li>a{padding:.5em 2em;text-decoration:none}

.nav>li:hover>a{background-color:#d9534f;color:#fff}

.nav a{display:block;color:#f5f5f5;text-decoration:none}

.nav ul{position:absolute;display:none;background-color:transparent}

.nav ul li{position:relative}

.nav ul li+li{border-top:1px solid #008151}

.nav>li:hover>ul{display:block;padding-top:.4em}

.nav>li>ul>li>a{padding:.4em 1em;width:10em;background-color:#008151}

.nav>li>ul>li:hover>a{background-color:#d9534f;color:#fff}

.nav>li>ul>li>ul{top:0;left:100%}

.nav>li:last-child>ul>li>ul{top:0;left:-100%}

.nav>li>ul>li:hover>ul{display:block}

.nav>li>ul>li>ul>li>a{padding:.4em 1em;width:10em;background-color:#008151}

.nav>li>ul>li>ul>li:hover>a{background-color:#d9534f;color:#fff}

</style>

</head>

<body>

<header class="header">

<nav class="menu radius">

<ul class="nav">

<li><a href="#">首页</a></li>

<li>

<a href="#">菜单项</a>

<ul>

<li>

<a href="#">二级菜单项</a>

<ul>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

</ul>

</li>

<li>

<a href="#">二级菜单项</a>

<ul>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">菜单项</a>

<ul>

<li>

<a href="#">二级菜单项</a>

<ul>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

</ul>

</li>

<li>

<a href="#">二级菜单项</a>

<ul>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

<li><a href="#">三级菜单项</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</header>

</body>

</html>

CSS三级导航菜单(图2)

TAGS:CSS三级导航菜单

猜你喜欢

NewHot