要制作二级菜单，首先给需要二级菜单的元素添加二级菜单元素。如下：
需要给“更多”添加一个二级菜单，就再用一个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值都是一样的，同一台电脑。真的是百思不得其解。