如何在Blogger的下拉导航CSS中将第二级添加到子菜单 [英] How to add second level to a submenu in a dropdown navigation css in Blogger
问题描述
我真的在为模板苦苦挣扎.这是我当前用于导航菜单的CSS.我已经尝试了几种方法,但是没有任何东西给我第二个子菜单,该子菜单会弹出到已经打开的下拉菜单的右侧.谁能帮助我插入代码以允许第二次弹出?谢谢!!!
I am really struggling with my template. Here is my current css for the navigation menu. I have tried several things but nothing gives me a second submenu that will pop out to the right of the dropdown im already on. Can anyone help me insert code to allow for a second pop out? Thanks!!!
/* CSS Main Menu */
#menu-wrapper {
background: #353535;
height: 50px;
width: 100%;
position: relative;
z-index: 99;
}
#menu {
color: #fff;
height: 50px;
max-width: 1100px;
margin: 0 auto;
-webkit-transform: translateZ(0);
}
#menu ul,
#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul {
height: 50px
}
#menu li {
float: left;
display: inline;
position: relative;
font-family: 'Oswald';
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
#menu li a {
color: #fff;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 20px;
margin: 0;
text-decoration: none;
color: #fff;
transition: all 0.2s ease-in-out;
}
#menu li:hover > a {
color: #f8a82a;
}
#menu li a:hover {
color: #f8a82a;
}
#menu input {
display: none;
margin: 0;
padding: 0;
width: 80px;
height: 50px;
opacity: 0;
cursor: pointer
}
#menu label {
font-family: 'Oswald';
font-size: 30px;
font-weight: 400;
width: 35px;
height: 51px;
line-height: 51px;
text-align: center
}
#menu label span {
font-size: 13px;
position: absolute;
left: 35px
}
#menu ul.menus {
visibility: hidden;
opacity: 0;
height: auto;
overflow: hidden;
min-width: 166px;
background: #fff;
position: absolute;
z-index: 99;
color: #aaa;
top: 50px;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
#menu li:hover > ul.menus {
visibility: visible;
opacity: 1;
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
#menu a.ai,
#menu a.trigger2 {
padding: 0 27px 0 14px;
transition: all 0.3s linear;
}
#menu > li:hover > a.ai,
#menu a.ai:hover {
background: transparent;
color: #f8a82a;
}
#menu li > a.ai::after {
content: "\f0d7";
font-family: FontAwesome;
margin: 0 auto;
width: 10px;
height: 10px;
line-height: 50px;
position: absolute;
top: 0;
right: 10px;
}
#menu ul.menus a {
background: #fff;
color: #999;
border-bottom: 1px solid #f0f0f0;
margin: 0;
transition: all 0.2s linear;
}
#menu ul.menus a:hover {
background: #f8a82a;
color: #fff;
transition: all .1s linear;
}
#menu ul.menus li {
display: block;
width: 100%;
font-family: 'Lato';
font-size: 13px;
font-weight: 400;
text-transform: none;
}
#menu ul.menus li a:before {
visibility: hidden;
opacity: 0;
content: "\f061";
font-family: FontAwesome;
font-size: 12px;
font-style: normal;
font-weight: normal;
top: 0;
left: 35px;
margin-right: 10px;
position: absolute;
padding: 0;
color: #fff;
transition: all 0.2s ease-in-out;
}
#menu ul.menus li a:hover:before {
left: 10px;
visibility: visible;
opacity: 1;
}
#menu ul.menus li:hover {
width: 100%;
}
#menu ul.menus li:last-child {
border-bottom: none;
}
#menu ul.menus li:first-child a {
border-top: none;
}
#menu ul.menus li:last-child a {
border-bottom: none;
}
#menu ul.menus > li:hover > a {
background: #f8a82a;
color: #fff;
padding-left: 25px;
transition: all 0.1s linear;
}
#menu .ranpost {
cursor: pointer;
float: right;
}
#menu .ranpost:hover {
background-color: transparent!important;
}
#menu ul.menusub a {
background: #fff;
color: #999;
border-bottom: 1px solid #f0f0f0;
margin: 0;
transition: all 0.2s linear;
}
#menu ul.menusub a:hover {
background: #f8a82a;
color: #fff;
transition: all .1s linear;
}
#menu ul.menusub li {
display: block;
width: 100%;
font-family: 'Lato';
font-size: 13px;
font-weight: 400;
text-transform: none;
}
#menu ul.menusub li a:before {
visibility: hidden;
opacity: 0;
content: "\f061";
font-family: FontAwesome;
font-size: 12px;
font-style: normal;
font-weight: normal;
top: 0;
left: 35px;
margin-right: 10px;
position: absolute;
padding: 0;
color: #fff;
transition: all 0.2s ease-in-out;
}
#menu ul.menusub li a:hover:before {
left: 10px;
visibility: visible;
opacity: 1;
}
#menu ul.menusub li:hover {
width: 100%;
}
#menu ul.menusub li:last-child {
border-bottom: none;
}
#menu ul.menusub li:first-child a {
border-top: none;
}
#menu ul.menusub li:last-child a {
border-bottom: none;
}
#menu ul.menusub > li:hover > a {
background: #f8a82a;
color: #fff;
padding-left: 25px;
transition: all 0.1s linear;
}
#menu .ranpost {
cursor: pointer;
float: right;
}
#menu .ranpost:hover {
background-color: transparent!important;
}
<div id='menu-wrapper'>
<div class='content-wrapper'>
<nav id='menu'>
<input type='checkbox' />
<label/>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Static Page</a></li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a href='#'>Button</a></li>
<li><a href='#'>Error</a></li>
<li class='ranpost'>
<a onclick='feelingLucky();'><i/>Surprise Me</a>
</li>
</ul>
</nav>
</div>
</div>
<div class='clear' />
推荐答案
好的,如果您编辑HTML& CSS,这是您可以执行的操作:
Okay, if you edit the HTML & the CSS, here is how you could do it:
其中一个HTML下拉菜单如下:
One of the HTML Dropdown menus look like this:
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
在Dropmenu </a>
标记后添加以下代码:
Add this code after the Dropmenu </a>
tag:
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
所以看起来像这样:
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
CSS
然后,添加此CSS:
CSS
Then, add this CSS:
#menu .menus li > ul.menus {
transform: translateX(100%) scale(1.0);
top: 0;
}
#menu ul.menus {
overflow: visible !important;
}
最终结果
完成后,它应该看起来像这样:
Final Result
It should look like this when you're done:
/* CSS Main Menu */
#menu .menus li > ul.menus {
transform: translateX(100%) scale(1.0);
top: 0;
}
#menu ul.menus {
overflow: visible !important;
}
#menu-wrapper {
background: #353535;
height: 50px;
width: 100%;
position: relative;
z-index: 99;
}
#menu {
color: #fff;
height: 50px;
max-width: 1100px;
margin: 0 auto;
-webkit-transform: translateZ(0);
}
#menu ul,
#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul {
height: 50px
}
#menu li {
float: left;
display: inline;
position: relative;
font-family: 'Oswald';
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
#menu li a {
color: #fff;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 20px;
margin: 0;
text-decoration: none;
color: #fff;
transition: all 0.2s ease-in-out;
}
#menu li:hover > a {
color: #f8a82a;
}
#menu li a:hover {
color: #f8a82a;
}
#menu input {
display: none;
margin: 0;
padding: 0;
width: 80px;
height: 50px;
opacity: 0;
cursor: pointer
}
#menu label {
font-family: 'Oswald';
font-size: 30px;
font-weight: 400;
width: 35px;
height: 51px;
line-height: 51px;
text-align: center
}
#menu label span {
font-size: 13px;
position: absolute;
left: 35px
}
#menu ul.menus {
visibility: hidden;
opacity: 0;
height: auto;
min-width: 166px;
background: #fff;
position: absolute;
z-index: 99;
color: #aaa;
top: 50px;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
#menu li:hover > ul.menus {
visibility: visible;
opacity: 1;
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
#menu .menus li > ul.menus {
transform: translateX(100%) scale(1.0);
top: 0;
}
#menu a.ai,
#menu a.trigger2 {
padding: 0 27px 0 14px;
transition: all 0.3s linear;
}
#menu > li:hover > a.ai,
#menu a.ai:hover {
background: transparent;
color: #f8a82a;
}
#menu li > a.ai::after {
content: "\f0d7";
font-family: FontAwesome;
margin: 0 auto;
width: 10px;
height: 10px;
line-height: 50px;
position: absolute;
top: 0;
right: 10px;
}
#menu ul.menus a {
background: #fff;
color: #999;
border-bottom: 1px solid #f0f0f0;
margin: 0;
transition: all 0.2s linear;
}
#menu ul.menus a:hover {
background: #f8a82a;
color: #fff;
transition: all .1s linear;
}
#menu ul.menus li {
display: block;
width: 100%;
font-family: 'Lato';
font-size: 13px;
font-weight: 400;
text-transform: none;
}
#menu ul.menus li a:before {
visibility: hidden;
opacity: 0;
content: "\f061";
font-family: FontAwesome;
font-size: 12px;
font-style: normal;
font-weight: normal;
top: 0;
left: 35px;
margin-right: 10px;
position: absolute;
padding: 0;
color: #fff;
transition: all 0.2s ease-in-out;
}
#menu ul.menus li a:hover:before {
left: 10px;
visibility: visible;
opacity: 1;
}
#menu ul.menus li:hover {
width: 100%;
}
#menu ul.menus li:last-child {
border-bottom: none;
}
#menu ul.menus li:first-child a {
border-top: none;
}
#menu ul.menus li:last-child a {
border-bottom: none;
}
#menu ul.menus > li:hover > a {
background: #f8a82a;
color: #fff;
padding-left: 25px;
transition: all 0.1s linear;
}
#menu .ranpost {
cursor: pointer;
float: right;
}
#menu .ranpost:hover {
background-color: transparent!important;
}
#menu ul.menusub a {
background: #fff;
color: #999;
border-bottom: 1px solid #f0f0f0;
margin: 0;
transition: all 0.2s linear;
}
#menu ul.menusub a:hover {
background: #f8a82a;
color: #fff;
transition: all .1s linear;
}
#menu ul.menusub li {
display: block;
width: 100%;
font-family: 'Lato';
font-size: 13px;
font-weight: 400;
text-transform: none;
}
#menu ul.menusub li a:before {
visibility: hidden;
opacity: 0;
content: "\f061";
font-family: FontAwesome;
font-size: 12px;
font-style: normal;
font-weight: normal;
top: 0;
left: 35px;
margin-right: 10px;
position: absolute;
padding: 0;
color: #fff;
transition: all 0.2s ease-in-out;
}
#menu ul.menusub li a:hover:before {
left: 10px;
visibility: visible;
opacity: 1;
}
#menu ul.menusub li:hover {
width: 100%;
}
#menu ul.menusub li:last-child {
border-bottom: none;
}
#menu ul.menusub li:first-child a {
border-top: none;
}
#menu ul.menusub li:last-child a {
border-bottom: none;
}
#menu ul.menusub > li:hover > a {
background: #f8a82a;
color: #fff;
padding-left: 25px;
transition: all 0.1s linear;
}
#menu .ranpost {
cursor: pointer;
float: right;
}
#menu .ranpost:hover {
background-color: transparent!important;
}
<div id='menu-wrapper'>
<div class='content-wrapper'>
<nav id='menu'>
<input type='checkbox' />
<label/>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Static Page</a></li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a class='ai' href='#'>Dropmenu</a>
</li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a href='#'>Button</a></li>
<li><a href='#'>Error</a></li>
<li class='ranpost'>
<a onclick='feelingLucky();'><i/>Surprise Me</a>
</li>
</ul>
</nav>
</div>
</div>
<div class='clear' />
注意:而不是:
#menu ul.menus {
overflow: visible !important;
}
您可以只删除#menu ul.menus
上的overflow: hidden
.
有关移动支持,请参见此答案.
For mobile support, see this answer.
这篇关于如何在Blogger的下拉导航CSS中将第二级添加到子菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!