如何在css模板中为博客添加子菜单？

Question

我希望在悬停时添加子菜单。子菜单应该显示在它的右侧。如何添加？

HTML code：

    <li><a href='#' style='padding-right: 0px;'>Design&#160;
    <i class='fa' style='font-size:12px; padding-right: 20px;'>&#61699;</i>
</a>

<ul class='menus'>



<li><a href='http://ravitejasps.blogspot.in/2016/10/serif-and-sans-serif-fonts-what-is.html'>Serif and Sans serif fonts</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/10/spacing.html'>Spacing</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/11/capitalization_3.html'>Capitalization</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/11/legibility.html'>Legibility</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/10/hierarchy-what-is-hierarchy-hierarchy.html'>Hierarchy</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/11/proximity-what-is-proximity-proximity.html'>Proximity</a></li>

<li><a href='http://ravitejasps.blogspot.in/2016/11/less-is-more_4.html'>Less is more</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/11/minimalism.html'>Minimalism</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/11/timeless-design.html'>Timeless design</a></li>

<li><a href='http://ravitejasps.blogspot.in/2016/11/red-dot-design-awards.html'>Red Dot Design Awards</a></li>

<li><a href='http://ravitejasps.blogspot.in/2016/11/golden-ratio.html'>Golden Ratio</a></li>

<li><a href='http://ravitejasps.blogspot.in/2016/11/grid-design.html'>Grid design</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/11/grid-design-chandigarh-architecture_87.html'>Grid design: Chandigarh architecture</a></li>

  <li><a class='ai' href='#'>Alignment</a>
<ul class='#menu'>
<li><a href='http://ravitejasps.blogspot.in/2016/10/text-alignment.html'>Text alignment</a></li>
<li><a href='http://ravitejasps.blogspot.in/2016/11/number-aligment.html'>Number alignment</a></li>
    </ul>
    </li>

</ul>
</li>`

这是我的css代码

/* CSS Main Menu */
#menu-wrapper{background:rgba(46,54,65,0.9);height:50px;width:100%;position:relative;}
#menu{color:#fff;height:50px;max-width:1300px;margin:0 auto;}
#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:arial;font-size:14px;font-weight:400;}
#menu li a{color:#fff;}
#menu a{display:inline;line-height:50px;padding:17px 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}/*margin:0 0 5px 5px*/
#menu li:hover > a{background:#07ACEC;color:#fff;}
#menu li a:hover{background:#07ACEC;color:#fff;}
#menu input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}
#menu label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:51px;line-height:51px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;color:#dadce0;}/*box-shadow:0 0 10px 0 rgba(0,0,0,0.2);*/
#menu ul.menus a{background:#424953;color:#fff;display:block;line-height:20px; padding:10px 20px;}/* padding:10px; border-bottom:1px solid #eee;*/
#menu ul.menus a:hover{color:#53606f;box-shadow:none;}
#menu ul.menus li{display:block;width:100%;font-family:'Open Sans';font-size:13px;font-weight:400;text-transform:none;transition:all 0.1s ease-in-out;}


#menu ul ul ul {  left: 100%;  top: 0;}
#menu ul:before,ul:after {content: ""; /* 1 */  display: table; /* 2 */}
#menu ul:after { clear: both; }

#menu ul.menus li:hover{width:100%;}
#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:#07acec; color:#fff;}
#menu li:hover ul.menus{display:block;}
#menu .homers a{background:#424953;color:#fff;}
#menu .homers a:hover{background:#07acec;color:#fff;}

那么我怎样才能在悬停时添加子菜单下拉列表？

Answer 1

尝试在css文件中添加以下css代码，如果不能正常工作，请告诉我：

#menu ul.menus { overflow:visible;}
#menu ul ul { display:none; position:absolute; top:0; left:100%; height:auto; width:180px;}
#menu ul ul li { float:none;}
#menu ul li:hover > ul { display:block;}