在其中我刚添加了一个子菜单，但似乎CSS代码不允许这样，我什么也没得到。我从在线发现的模板中获取此代码。 http://way2themes.com/blogger-templates/spraymag.zip
还有更多这样的模板。所以我面临着共同的问题。如何隔离允许我添加子菜单，子子菜单的代码？
这是我正在处理的CSS。
#header .menu ul li {
float: left;
display: inline-block;
height: 40px;
border-right: solid 1px rgba(255,255,255,0.05);
border-top: none;
}
#header .menu ul li a{
padding: 0 12px 0 12px;
display: block;
border: none !important;
text-decoration: none;
line-height: inherit;
border-bottom: solid 1px transparent;
color: #999;
}
#header .menu ul li a:hover {
background: rgba(255,255,200,0.1); color: #FFF; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.1);
}
#main-menu ul li:first-child {
margin-left: 10px;
}
.main-navigation-wrapper {
display: block; margin-bottom: 30px;
position: relative; margin-left: auto; margin-right: auto;
}
ul#main-nav {
display: block; background: #363D40; border-top: solid 5px #666; border-top-color: rgba(255,255,255,0.15); padding-right: 40px; min-height: 40px; margin-bottom: 0 !important; box-shadow: inset 0 -20px 0 rgba(0,0,0,0.09); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
zoom: 1;
}
#main-nav > li {
float: left; display: inline-block; position: relative; border-top: solid 5px transparent;
margin-top: -5px;
line-height: 21px;
}
#main-nav > li > a:hover {
border-color: transparent;
background-color: #444;
background-color: rgba(255,255,255,0.1);
color: #FFF;
}
#main-nav > li > a {
display: block;
letter-spacing: 1px;
padding: 10px 20px;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
border-right: solid 1px rgba(255,255,255,0.07);
color: #FFF;
color: rgba(255,255,255,0.7);
position: relative;
z-index: 99997;
box-shadow: inset 0px -19px 0px rgba(0,0,0,0);
text-decoration: none;
line-height: 21px;
-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
-moz-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
-o-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
-ms-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
}
.responsive-nav-wrapper {
position: relative;
display: block;
display: none;
z-index: 9999;
}
#responsive-nav , .responsive-nav-wrapper #resp-menu {
background: #363D40;
}
#responsive-nav {
border-top: none;
position: relative;
cursor: pointer;
padding-right: 20px;
z-index: 99999999999999;
}
#responsive-nav:hover, .responsive-nav-wrapper.responsive-active #responsive-nav {
background: #498AB8;
}
#responsive-nav:hover .nav-icon, .responsive-nav-wrapper.responsive-active #responsive-nav .nav-icon, #responsive-top-nav .nav-icon:hover, .responsive-top-nav-wrapper.responsive-active #responsive-top-nav .nav-icon {
border-top-color: #FFF;
border-bottom-color: #FFF;
}
#responsive-nav:hover .text-nav, .responsive-nav-wrapper.responsive-active .text-nav {
color: #FFF;
}
.responsive-nav-wrapper.responsive-active #resp-menu {
display: block;
z-index: 9999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-nav {
display: block;
background: #363D40;
border-top: solid 5px #666;
border-top-color: rgba(255,255,255,0.15);
padding-right: 40px;
min-height: 40px;
margin-bottom: 0 !important;
box-shadow: inset 0 -20px 0 rgba(0,0,0,0.09);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.responsive-top-nav-wrapper {
width: auto;
display: none;
z-index: 9999;
height: 40px;
}
#responsive-top-nav {
border-top: none;
position: relative;
padding-right: 60px;
height: 40px;
z-index: 9999;
}
#responsive-top-nav .nav-icon {
margin-top: 11px;
cursor: pointer;
}
.responsive-top-nav-wrapper #top-resp-menu {
display: none;
position: absolute;
top: 40px;
left: 15px;
width: auto;
background-color: #fff;
background-color: rgba(255,255,255,0.98);
border: solid 1px #e7e7e7;
}
#top-resp-menu #top-menu-ul, #top-resp-menu ul {
margin-bottom: 0px;
}
#top-resp-menu li a {
display: block;
width: 100%;
color: #888;
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
padding: 8px 70px 8px 15px;
border-bottom: solid 1px #e9e9e9;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.text-nav {
float: left;
padding-left: 20px;
line-height: 40px;
text-transform: uppercase;
font-size: 13px;
color: #eee;
color: rgba(255,255,255,0.7);
font-weight: bold;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#responsive-nav .nav-icon, #responsive-top-nav .nav-icon {
margin-top: 12px;
display: block;
border-bottom: 10px double #aaa;
border-top: 3px solid #aaa;
height: 4px;
width: 25px;
float: right;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-top-color: rgba(255,255,255,0.7);
border-bottom-color: rgba(255,255,255,0.7);
}
.responsive-nav-wrapper #resp-menu {
display: none;
position: absolute;
top: 44px;
width: 100%;
background-color: #363D40;
}
#resp-menu li, #top-resp-menu li {
display: block;
float: none;
}
#resp-menu ul, #top-resp-menu ul, #top-resp-menu ul li, #resp-menu li {
width: 100% !important;
}
#resp-menu li a {
display: block;
color: #FFF;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
padding: 8px 20px 8px 15px;
border-bottom: solid 1px #444;
border-left: solid 5px #444;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.responsive-top-nav-wrapper {
display: none;
这是HTML。
请看看并帮助我。
<div class='inner-wrap'>
<nav class='menu-main-navigation-container'>
<ul id='main-nav'>
<!-- Main Menu -->
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Lifestyle</a></li>
<li><a href='#'>Travel</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='#'>Archives</a></li>
<li><a href='#'>Sample Page</a></li>
<li><a href='#'>Contact</a></li>
<div style='clear:both'/>
</ul> </nav>