无限层级菜单栏（自适应内容宽度，自适应无限级菜单栏目偏移量）

效果

css代码

.yyui_menu1 {
height: 35px;
line-height: 35px;
font-size: 15px;
}

.yyui_menu1 li {
float: left;
position: relative;
}

这一级是导航
.yyui_menu1 li a {
display: block;
line-height: 35px;
text-decoration: none;
padding: 0px 20px;
color: #333333;
}

.yyui_menu1 li a:hover {
color: #FF2A34;
}

.yyui_menu1 li a.more:after {
content: " »";
}

.one,.two,.three{
width:auto!important;
}

.one li ul {
top: 0;
word-wrap: normal;
}

.yyui_menu1 li ul li{
width:100%;
width:-moz-available;
width: -webkit-fill-available;
width:fill-availabel
}

.yyui_menu1 li ul {
position: absolute;
float: left;
width: 320px;
display: none;
background-color: #FFFfff;
z-index: 9999;
}

自适应内容宽度
.yyui_menu1 li ul a {
width: 100%;
box-sizing: border-box;
white-space: nowrap;
text-decoration: none;
color: #333;
}

.yyui_menu1 li ul a:hover {
background: #B21E25;
color: #FFFFFF;
}

子级菜单自适应偏移
.yyui_menu1 li ul ul {
top: 0;
left:100%;
}

重点

主要着重看css样式，样式对无限级偏移量进行处理

HTML代码（.net framework语言）

JQuery语言

$(’.yyui_menu1 li’).hover(function () {
$(this).children(“ul”).show();
}, function () {
$(this).children(“ul”).hide();
});