简单的菜单二

html代码

    <div data-options="region:'west',noheader:true,split:false,bodyCls:'west_body'" style="width:250px;">
        <ul>
            <li>
                <u>
                    <i class="fa fa-folder-open-o"></i>
                    <a class="menu_item_text">业务</a>
                </u>
                <ul>
                    <li><u><i class="fa fa-camera"></i><a class="menu_item_text">视频录制</a></u></li>
                    <li><u><i class="fa fa-film"></i><a class="menu_item_text">视频回放</a></u></li>
                </ul>
            </li>
            <li>
                <u>
                    <i class="fa fa-folder-open-o"></i>
                    <a class="menu_item_text">管理</a>
                </u>
                <ul>
                    <li><u><i class="fa fa-code-fork"></i><a class="menu_item_text">节点管理</a></u></li>
                    <li><u><i class="fa fa-qrcode"></i><a class="menu_item_text">产品管理</a></u></li>
                </ul>
            </li>
        </ul>
    </div>

css代码

.west_body{
    background-image:url(../img/index/west_bg.png); 
    background-repeat:no-repeat;
    background-size: 100% 100%;
}
.west_body ul, 
.west_body li {
    list-style: none;
    width: 100%;
    padding:0px;
}

.west_body a{
    font-size: 10px;
    height: 40px;
    line-height: 40px;
    padding: 0px 0px 0px 5px;
}
.west_body i{
    font-size: 18px;
    padding-left: 6px;
}
.west_body ul ul i{
    padding-left: 12px;
}
.west_body u{
    display:block ;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-decoration:none;
}
.west_body u:hover{
    background-color: rgba(238, 238, 238, 0.6);
    cursor: pointer;
}

结果如下