Unlimited level menu bar (adaptive content width, adaptive infinite level menu column offset)

Effect

css code

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

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

This level is navigation.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;
}

Adaptive content width.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;
}

Submenu adaptive
offset.yyui_menu1 li ul ul { top: 0; left:100%; }

focus

Mainly focus on css styles, styles handle infinite offsets

HTML code (.net framework language)

jQuery language

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