如何在菜单中的嵌套菜单下拉菜单中达到level4 [英] how to nested menu within the menu in drop down menu up to level4
本文介绍了如何在菜单中的嵌套菜单下拉菜单中达到level4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
i想知道谁在子菜单中嵌套菜单，子菜单如4级垂直方式。
css代码是
@ import url（http： // fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import 网址（http： // fonts.googleapis.com/css?family=Open+Sans： 400,600,300）;
@ charset UTF-8;
/ * 基本样式* /
＃ cssmenu ，
＃ cssmenu ul ，
＃ cssmenu li ，
＃ cssmenu a {
margin ： 0;
padding ： 0;
border ： 0;
list-style ： 无;
font-weight ： 正常;
text-decoration ： none;
line-height ： 1;
font-family ： 'Open Sans'，sans-serif;
font-size ： 14px;
position ： relative;
}
＃ cssmenu {
width ： 250px;
border-bottom ： 4px solid＃656659;
- webkit-border-radius ： 3px;
- moz-border -radius ： 3px;
border-radius ： 3px;
}
＃< span class =code-leadattribute> cssmenu a {
line-height ： 1.3;
}
＃ cssmenu > ul > li：first-child {
bac kground ： ＃66665e;
背景 ： -moz-linear-gradient（＃66665e 0％，＃45463d 100％）;
background ： -webkit-渐变（线性，左上，左下，颜色停止（0％，＃66665e），颜色停止（100％，＃45463d））;
背景 ： -webkit-linear-gradient（＃66665e 0％，＃45463d 100％）;
背景 ： 线性渐变（＃66665e 0％，＃45463d 100％）;
border ： 1px solid＃45463d;
-webkit-border-radius ： 3px 3px 0 0;
- moz-border-radius ： 3px 3px 0 0;
border-radius ： 3px 3px 0 0;
}
＃ cssmenu > ul > li：first-child > a {
padding ： 15px 10px;
background ： url（images / pattern。 png）左上角重复;
border ： none;
border-top ： 1px solid＃818176;
- webkit-border-radius ： 3px 3px 0 0;
- moz-border-radius ： 3px 3px 0 0;
border-radius ： 3px 3px 0 0;
font-family ： 'Ubuntu'，sans-serif;
text-align ： center;
font-size ： 18px;
font-weight ： 300;
text-shadow ： 0 -1px 1px＃000000;
}
＃ cssmenu > ul > li：first-child > a > span {
padding ： 0;
}
＃ cssmenu > ul > li：first-child：hover {
background ： ＃66665e;
background ： -moz-linear-gradient（＃66665e 0％，＃45463d 100％）;
背景 ： -webkit-gradient（线性，左上角，左下角，颜色-stop（0％，＃66665e），颜色停止（100％，＃45463d））;
背景 ： -webkit-linear-gradient（＃66665e 0％，＃45463d 100％）;
background ： 线性渐变（＃66665e 0％，＃45463d 100％）;
}
＃ cssmenu > ul > li {
background ： ＃e94f31;
background ： -moz-linear-gradient（＃e94f31 0％，＃d13516 100％）;
background ： -webkit-gradient（线性，左上角，左下角，颜色停止（0％，＃ e94f31），颜色停止（100％，＃d13516））;
背景 ： -webkit-linear-gradient（＃e94f31 0％，＃d1 3516 100％）;
背景 ： 线性渐变（＃e94f31 0％，＃d13516 100％）;
}
＃ cssmenu > ul > li：hover {
background ： ＃e84323;
背景 ： -moz-linear-gradient（＃e84323 0％，＃c33115 100％）;
background ： -webkit-gradient（线性，左上，左下，颜色停止（0％，＃e84323），颜色停止（100％，＃c33115））;
backgro und ： -webkit-linear-gradient（＃e84323 0％，＃c33115 100％）;
background ： linear-gradient（ ＃e84323 0％，＃c33115 100％）;
}
＃ cssmenu > ul > li > a {
font-大小 ： 14px;
显示 ： block;
背景 ： url（im ages / pattern.png）左上方重复;
颜色 ： #ffffff;
border ： < span class =code-keyword> 1px solid＃ba2f14;
border-top ： none;
text-shadow ： 0 -1px 1px＃751d0c;
}
＃ cssmenu > ul > < span class =code-leadattribute> li > a > span {
display ： block;
padding ： 12px 10px;
- webkit-border-radius ： 4px;
- moz-border-radius ： 4px;
border-radius ： 4px;
}
＃ cssmenu > ul > li > a：hover {
< span class =code-attribute> text-decoration ： none;
}
＃ cssmenu > ul > li 。 active {
border-bottom ： none;
}
＃ cssmenu > ul > li 。 has-sub > a span {
b ackground ： url（images / icon_plus.png）96％center no-repeat;
}
＃ cssmenu > ul > li 。 has-sub 。有效 > a span {
background ： url（images / icon_minus.png）96％center no-repeat;
}
/ * 子菜单* /
＃ cssmenu ul ul {
display ： none;
背景 ： #fff ;
border-right ： 1px solid＃a2a194;
border-left ： 1px solid＃a2a194;
}
＃ cssmenu ul ul li {
填充 ： 0;
border-bottom ： 1px solid＃d4d4 d4;
border-top ： 无;
背景 ： ＃f7f7f7;
background ： -moz-linear-gradient（＃f7f7f7 0％，＃ececec 100％）;
background ： -webkit-gradient（线性，左上，左下，颜色停止（0％，＃f7f7f7），颜色停止（100％， #ececec））;
background ： -webkit-linear-gradient（＃f7f7f7 0％，＃ececec 100％）;
background ： 线性渐变（＃f7f7f7 0％，＃ececec 100％）;
}
＃ cssmenu ul ul li：last-child {
border-bottom < span class =code-keyword>： none;
}
＃ cssmenu ul ul a {
padding ： 10px 10px 10px 25px;
display ： block;
颜色 ： ＃676767 ;
font-size ： 12px;
font-weight ： normal;
}
＃ cssmenu ul ul a：before {
content ： »;
position ： absolute;
left ： 10px;
color ： ＃e94f31;
}
＃ cssmenu ul < span class =code-leadattribute> ul a：hover {
color ： ＃e94f31;
}
< ！doctype html >
< html lang =' ' >
< head >
< meta <跨越式s =code-attribute> charset =' utf-8' >
< meta http-equiv = X-UA-Compatible content = IE = edge >
< meta 名称 = viewport content = width = d evice-width，initial-scale = 1 >
< link rel = 样式表 href = styles.css > ;
< script src = http：// code .jquery.com / jquery-latest.min.js type = text / javascript > < / script >
< script < span class =code-attribute> src = script.js > < / script >
< title > CSS MenuMaker < / title >
< / head >
< body >
< div id =' cssmenu' >
< ul >
< li < span class =code-attribute> class =' 有效' > < a href =' ＃' > < span > 主页< / span > < / a > < / li >
< li class =' has-sub' > < a href =' ＃' > < span > 产品< / span > < / a >
< ul >
< li > < a href =' ＃' > < span > 产品1 < / span > < span class =code-keyword>< / a > < / li >
< span class =code-keyword>< li > < a href =' ＃' > < span & gt; 产品2 < / span > < / a > < / li >
< li class =' last' > < a href =' ＃' > < span > 产品3 < / span > < / a > < / li >
< / ul >
< / li >
< li class =' has-sub' > < <温泉n class =code-leadattribute> a href =' ＃' > < span > 关于< ; / span > < / a >
< ; ul >
< li > < a href =' ＃' > <span>Company </span></a></li>
<li class='last' ><a href='#'><span>Contact</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
<html>
<pre lang=\"Javascript\"> ( function( $ ) {
$( document ).ready(function() {
$(’#cssmenu > ul > li > a’).click(function() {
$(’#cssmenu li’).removeClass(’active’);
$(this).closest(’li’).addClass(’active’);\t
var checkElement = $(this).next();
if((checkElement.is(’ul’)) && (checkElement.is(’:visible’))) {
$(this).closest(’li’).removeClass(’active’);
checkElement.slideUp(’normal’);
}
if((checkElement.is(’ul’)) && (!checkElement.is(’:visible’))) {
$(’#cssmenu ul ul:visible’).slideUp(’normal’);
checkElement.slideDown(’normal’);
}
if($(this).closest(’li’).find(’ul’).children().length == 0) {
return true;
} else {
return false;\t
}\t\t
});
});
} )( jQuery ); 解决方案
) {
( document ).ready(function() {(’#cssmenu > ul > li > a’).click(function() {
hi,
i would like to know who to nested the menu within sub-menu with sub-sub-menu like level 4 in vertical way.
the css code is
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700); @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); @charset "UTF-8"; /* Base Styles */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-family: 'Open Sans', sans-serif; font-size: 14px; position: relative; } #cssmenu { width: 250px; border-bottom: 4px solid #656659; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #cssmenu a { line-height: 1.3; } #cssmenu > ul > li:first-child { background: #66665e; background: -moz-linear-gradient(#66665e 0%, #45463d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); background: linear-gradient(#66665e 0%, #45463d 100%); border: 1px solid #45463d; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #cssmenu > ul > li:first-child > a { padding: 15px 10px; background: url(images/pattern.png) top left repeat; border: none; border-top: 1px solid #818176; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; font-family: 'Ubuntu', sans-serif; text-align: center; font-size: 18px; font-weight: 300; text-shadow: 0 -1px 1px #000000; } #cssmenu > ul > li:first-child > a > span { padding: 0; } #cssmenu > ul > li:first-child:hover { background: #66665e; background: -moz-linear-gradient(#66665e 0%, #45463d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); background: linear-gradient(#66665e 0%, #45463d 100%); } #cssmenu > ul > li { background: #e94f31; background: -moz-linear-gradient(#e94f31 0%, #d13516 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516)); background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%); background: linear-gradient(#e94f31 0%, #d13516 100%); } #cssmenu > ul > li:hover { background: #e84323; background: -moz-linear-gradient(#e84323 0%, #c33115 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115)); background: -webkit-linear-gradient(#e84323 0%, #c33115 100%); background: linear-gradient(#e84323 0%, #c33115 100%); } #cssmenu > ul > li > a { font-size: 14px; display: block; background: url(images/pattern.png) top left repeat; color: #ffffff; border: 1px solid #ba2f14; border-top: none; text-shadow: 0 -1px 1px #751d0c; } #cssmenu > ul > li > a > span { display: block; padding: 12px 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.has-sub > a span { background: url(images/icon_plus.png) 96% center no-repeat; } #cssmenu > ul > li.has-sub.active > a span { background: url(images/icon_minus.png) 96% center no-repeat; } /* Sub menu */ #cssmenu ul ul { display: none; background: #fff; border-right: 1px solid #a2a194; border-left: 1px solid #a2a194; } #cssmenu ul ul li { padding: 0; border-bottom: 1px solid #d4d4d4; border-top: none; background: #f7f7f7; background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec)); background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%); background: linear-gradient(#f7f7f7 0%, #ececec 100%); } #cssmenu ul ul li:last-child { border-bottom: none; } #cssmenu ul ul a { padding: 10px 10px 10px 25px; display: block; color: #676767; font-size: 12px; font-weight: normal; } #cssmenu ul ul a:before { content: "»"; position: absolute; left: 10px; color: #e94f31; } #cssmenu ul ul a:hover { color: #e94f31; }
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>CSS MenuMaker</title> </head> <body> <div id='cssmenu'> <ul> <li class='active'><a href='#'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Products</span></a> <ul> <li><a href='#'><span>Product 1</span></a></li> <li><a href='#'><span>Product 2</span></a></li> <li class='last'><a href='#'><span>Product 3</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>About</span></a> <ul> <li><a href='#'><span>Company</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div> </body> <html>
<pre lang="Javascript"> ( function( $ ) { $( document ).ready(function() { $('#cssmenu > ul > li > a').click(function() { $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } }); }); } )( jQuery );解决方案) {
( document ).ready(function() {
('#cssmenu > ul > li > a').click(function() {
这篇关于如何在菜单中的嵌套菜单下拉菜单中达到level4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
