css 菜单_html/css_WEB-ITnose-HTML Tutorial-php.cn

css 菜单_html/css_WEB-ITnose
WBOY
Release： 2016-06-21 09:04:49
Original
1085 people have browsed it
### css菜单css主要分为一级菜单、二级菜单和多级菜单，而且基本都是用列表来写1、一级菜单：一级菜单可以分为水平方向的，又可以分为纵向的如    1.1水平横向菜单：这种菜单的写法一般有两种，一种是将列表的li标签的display属性设置为display:inline-block;而另外一种则是       直接使用浮动float属性，设置为 float: left;或者 float: right;     ![输入图片说明](https://static.oschina.net/uploads/img/201510/26210208_YTUi.png "在这里输入图片标题")    代码：```<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>一级横向菜单方法一</title>    <!-- 做法是将li的浮动属性设置成向左或者向右方向-->    <style type="text/css" rel="stylesheet">        nav ul{            list-style-type: none;        }        nav ul li{            float: left;            margin-right: 5px;        }        nav ul li  a{            text-decoration: none;            background-color: aquamarine;        }        nav ul li  a:hover{            background-color: lime;        }    </style></head><body><nav>    <ul>        <li><a href="#" >招聘兼职</a></li>        <li ><a href="#">房子租赁</a></li>        <li ><a href="#">日常用品</a></li>        <li><a href="#" >招聘兼职</a></li>        <li ><a href="#">房子租赁</a></li>        <li ><a href="#">日常用品</a></li>    </ul></nav></body></html>```    1.2一级纵向菜单：这个最简单，直接使用列表即可    (https://static.oschina.net/uploads/img/201510/26205935_iLsd.png )2、二级菜单和多级菜单也可以分为水平方向的，又可以分为纵向的，二级菜单的写法主要是先将二级菜单设置成display:none；然后当鼠标移动经过时将二级菜单设置为可见的就可以了。![输入图片说明](https://static.oschina.net/uploads/img/201510/26210016_TiRM.png "在这里输入图片标题")  代码：```<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>一级横向，二级纵向菜单</title>    <!--此种方法为则是将先li的float属性设置成 left即可      然后设置它的二级菜单的display属性为none不可见，但是当鼠标移动到一级菜单时      则将二级菜单的display设置成可见显示 并且将li的float设置为inherit    -->    <style type="text/css" rel="stylesheet">        *{            margin: 0;            padding: 0;        }        nav{            width: 300px;            margin:0 auto;        }        ul{            list-style-type: none;        }        li{            float:left;            margin-right: 5px;        }        ul li ul{            display: none;        }        a{            text-decoration: none;            background-color: antiquewhite;        }        a:hover{            background-color: #ff9900;            display: block;        }        ul li:hover ul{            display: block;            position: absolute;        }        ul li:hover ul li{            float: inherit;        }    </style></head><body><nav>    <ul>        <li><a href="#" >招聘兼职</a>            <ul class="twonav">                <li><a href="#" >招聘兼职</a></li>                <li ><a href="#"  >房子租赁</a></li>                <li ><a href="#"  >日常用品</a></li>            </ul>        </li>        <li ><a href="#" >房子租赁</a>            <ul class="twonav">                <li><a href="#"  >招聘兼职</a></li>                <li ><a href="#"  >房子租赁</a></li>                <li ><a href="#"  >日常用品</a></li>            </ul>        </li>        <li ><a href="#" >日常用品</a>            <ul class="twonav">                <li><a href="#"   >招聘兼职</a></li>                <li ><a href="#"  >房子租赁</a></li>                <li ><a href="#"  >日常用品</a></li>            </ul>        </li>        <li><a href="#" >招聘兼职</a>            <ul class="twonav">                <li><a href="#"    >招聘兼职</a></li>                <li ><a href="#" >房子租赁</a></li>                <li ><a href="#" >日常用品</a></li>            </ul>        </li>    </ul></nav></body></html>```
Copy after login