如何将另一个子菜单添加到我的 CSS/HTML 菜单？ 我的错在哪里
[英]How can I add another sub sub menu to my CSS/HTML menu? Where is my mistake
问题描述
this is my CSS that i am working with.
这是我正在使用的 CSS。 I wanted a menu in blogger with a sub menu, a sub sub menu an a sub sub sub menu.我想要一个带有子菜单的 Blogger 菜单，一个子子菜单和一个子子子菜单。 that is it without ruining the formatting.就是这样，而不会破坏格式。
.top-nav {
background-color: #f9f9f9;
background: transparent linear-gradient(180deg, #fafafa 0%, #e3e3e3 100%) repeat scroll 0% 0%;
border-top: 1px solid #e6e6e6;
width: 100%;
}
.top-nav .Pagemenu {
}
.Pagemenu {
display: block;
}
.Pagemenu li {
display: inline-block;
position: relative;
z-index: 10;
margin: 0;
}
.Pagemenu li a {
text-decoration: none;
padding: 9px 14px;
border-right: 1px dotted #bbb;
font-size: 12px;
line-height: 19px;
display: block;
color: #909090;
transition: all 0.2s ease-in-out 0s;
}
.Pagemenu li a:hover, .Pagemenu li:hover > a {
background: #eee;
}
.main-nav {
background-color: #0FBE7C;
background: transparent linear-gradient(180deg, #0FBE7C 0%, #0C9863 100%) repeat scroll 0 0;
display: block;
width: 100%;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 10;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
text-decoration: none;
padding: 12px 16px;
font-size: 15px;
line-height: 22px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover, .menu li:hover > a {
color: #fff;
background: #0C9863;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 9;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 13px;
font-weight: normal;
display: block;
color: #797979;
background: #f6f6f6;
}
.menu ul li a:hover, .menu ul li:hover > a {
background: #27C489;
color: #fff;
}
.menu li:hover > ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li > ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
and here is the mistake that i am making - When i add a sub sub sub menu in HTML i cannot see it in my webpage because it doesnot display "all the child".这是我犯的错误 - 当我在 HTML 中添加一个子子菜单时，我在我的网页中看不到它，因为它没有显示“所有孩子”。 So could somehow add a few lines to the html but i could not figure out the CSS part of it.所以可以以某种方式向 html 添加几行，但我无法弄清楚它的 CSS 部分。 Kindly help.请帮忙。
<nav>
<ul class='menu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<!-- Customize Navigation Menu Here -->
<li><a href='#' itemprop='url'><span itemprop='name'>Enterprise</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Europe</span></a></li>
<li>
<a class='with-ul' href='#' itemprop='url'><span itemprop='name'>IIOIOIOIO</span></a>
<ul class='sub-menu'>
<li><a href='URL GOES HERE'>HHHHHH</a></li>
<li>
<a href='#'>GGGGG</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<ul class='sub-menu'>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
<li>
<a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Gaming</span></a></li>
<li>
<a class='with-ul' href='#' itemprop='url'><span itemprop='name'>Greentech</span></a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li>
<a href='#'>Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
<li>
<a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Venture</span></a></li>
<li>
<a href='http://www.bloggertheme9.com/2015/09/glorious-responsive-blogger-template.html' target='_blank' title='Grab Here'>
<i class='fa fa-download' style='font-size:16px' />
</a>
</li>
</ul>
</nav>
<div class='clear' />
1 个解决方案
解决方案1
1 2017-01-07 17:20:54
I have used your example and just added colors to make it visible that stuff work and that they are there.我已经使用了您的示例，只是添加了颜色以使其可见，这些东西可以工作并且它们就在那里。 Test it by going to Greentech -> Sub-menu2 -> Sub Sub-menu2.通过转到 Greentech -> Sub-menu2 -> Sub Sub-menu2 进行测试。
to add sub-menus you just need to add an ul before closing the parent li tag要添加子菜单，您只需要在关闭父li标签之前添加一个ul
body{ background-color:black; } li{ background-color:red; } .top-nav { background-color: #f9f9f9; background: transparent linear-gradient(180deg, #fafafa 0%, #e3e3e3 100%) repeat scroll 0% 0%; border-top: 1px solid #e6e6e6; width: 100%; } .top-nav .Pagemenu { } .Pagemenu { display: block; } .Pagemenu li { display: inline-block; position: relative; z-index: 10; margin: 0; } .Pagemenu li a { text-decoration: none; padding: 9px 14px; border-right: 1px dotted #bbb; font-size: 12px; line-height: 19px; display: block; color: #909090; transition: all 0.2s ease-in-out 0s; } .Pagemenu li a:hover, .Pagemenu li:hover > a { background: #eee; } .main-nav { background-color: #0FBE7C; background: transparent linear-gradient(180deg, #0FBE7C 0%, #0C9863 100%) repeat scroll 0 0; display: block; width: 100%; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 10; } .menu li:first-child { margin-left: 0; } .menu li a { text-decoration: none; padding: 12px 16px; font-size: 15px; line-height: 22px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover, .menu li:hover > a { color: #fff; background: #0C9863; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 9; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 13px; font-weight: normal; display: block; color: #797979; background: #f6f6f6; } .menu ul li a:hover, .menu ul li:hover > a { background: #27C489; color: #fff; } .menu li:hover > ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li > ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); }
<nav> <ul class='menu'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <!-- Customize Navigation Menu Here --> <li><a href='#' itemprop='url'><span itemprop='name'>Enterprise</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Europe</span></a></li> <li> <a class='with-ul' href='#' itemprop='url'><span itemprop='name'>IIOIOIOIO</span></a> <ul class='sub-menu'> <li><a href='URL GOES HERE'>HHHHHH</a></li> <li> <a href='#'>GGGGG</a> <ul class='sub-menu'> <li><a href='#'>Sub Sub-Menu 1</a></li> <ul class='sub-menu'> <li><a href='#'>Sub Sub-Menu 1</a></li> <ul class='sub-menu'> <li><a href='#'>Sub Sub-Menu 1</a></li> </ul> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> </ul> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> </ul> </li> <li> <a href='#'>Sub-Menu 3</a> <ul> <li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> </ul> </li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Gaming</span></a></li> <li> <a class='with-ul' href='#' itemprop='url'><span itemprop='name'>Greentech</span></a> <ul class='sub-menu'> <li><a href='#'>Sub-Menu 1</a></li> <li> <a href='#'>Sub-Menu 2</a> <ul> <li><a href='#'>Sub Sub-Menu 1</a></li> <li> <a href='#'>Sub Sub-Menu 2</a> <ul> <li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> </ul> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> </ul> </li> <li> <a href='#'>Sub-Menu 3</a> <ul> <li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> </ul> </li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Venture</span></a></li> <li> <a href='http://www.bloggertheme9.com/2015/09/glorious-responsive-blogger-template.html' target='_blank' title='Grab Here'> <i class='fa fa-download' style='font-size:16px' /> </a> </li> </ul> </nav> <div class='clear' />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何为我的桌子添加另一个子菜单？ - How to add another sub menu for my table?
如何使用CSS添加子菜单 - How can i add a sub-sub menu with CSS
为什么我的子菜单在 html css 中不起作用 - why my sub menu is not working in html css
我想在jQuery和css中为我的菜单项添加一个子元素 - I want to add a sub element to my menu items in jQuery and css
如何使用 jquery 将菜单包装到子菜单中？ - how do I wrap my menu in to sub menu using jquery?
如何使用HTML CSS Bootstrap创建侧边栏菜单和可点击的子菜单？ - How can I create sidebar menu and clickable sub menu with html css bootstrap?
在HTML中使用CSS添加子菜单 - Add sub menu using css in html
使用CSS和HTML添加垂直子菜单 - Add a vertical Sub menu using css and html
如何将下拉子菜单代码添加到此菜单 - How can I add drop down Sub menu code to this menu
如何在当前代码中获取子菜单？ - How i can get sub-sub menu in my current code?
相关标签