二级菜单制作

要制作二级菜单，首先给需要二级菜单的元素添加二级菜单元素。如下：

       需要给“更多”添加一个二级菜单，就再用一个div或者其他容器把ul包起来，然后设置它的属性。

    <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>
        <li><a href="#">资源</a></li>
        <li><a href="#">招聘</a></li>
        <li><a href="#">我的前端</a></li>
        <li>
            <div class="title">
                <a href="#">更多</a>
            </div>
            <div class="item">
               <a href="#">我的资料</a>
               <a href="#">我的收藏</a>
               <a href="#">技术博文</a>
               <a href="#">论坛发声</a>
            </div>
        </li>
    </ul>

/*------------二级菜单列表设置-------------------------*/

/*首先设置二级菜单下的a标签的样式，如背景颜色、长宽以及其他属性，是个人需求而定*/

.item a

{

    background: rgba(0,0,0,0.7); 

}

/*这里是用来设置二级菜单元素本身的属性，首先设置一个绝对定位，使其脱离文档流，然后对其进行定位，设置z-index属性确保其能够始终在页面最顶层显示，不被其他元素遮挡*/

.item

{

    position: absolute;

    display: none;

    width: 80px;

    z-index: 100;

}

/*鼠标移动到li标签时，隐藏的二级菜单会显示出来【注意hover后面要空格一下】*/

/*这里的li:hover .item的意思是鼠标移到li上面时，二级菜单会显示出来。前提是.item必须是要包含在li里面的元素，中间的空格表示包含。*/

li:hover .item 

{

    display: block;

}

综上，一个简单的二级菜单就制作出来了。但是貌似会存在兼容性问题。谷歌和其他的浏览器在position：absolute；right的px值上的解读不一样。

如下两幅图：

这是谷歌的

这是火狐的

设置的right的px值都是一样的，同一台电脑。真的是百思不得其解。