블로그 용 CSS 템플릿에 하위 메뉴를 추가하는 방법은 무엇입니까?

Question

마우스를 가져갈 때 하위 메뉴를 추가하고 싶습니다. 하위 메뉴가 오른쪽에 표시되어야합니다. 그것을 추가하는 방법?

HTML 코드 :

여기

<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;}