가로 메뉴 막대에 드롭 다운 항목을 추가하려면 어떻게해야합니까?

Question

안녕하세요, 내 가로 메뉴 모음에 드롭 다운 항목을 추가하려고합니다. 나는 이런하지만 내 스타일 "교구 협의회 정보"에서 "교구 심의회 회의록"으로 항목 드롭 다운 싶습니다 (http://www2.psd100.com/wp-content/uploads/2013/03/web-dropdown-menu-bar-psd0306.jpg)

나는 또한 몇 가지 더 추가 할 다른 위치에있는 메뉴 항목을 드롭 다운하려는

.

많은 분들께 미리 감사드립니다.

내 CSS :

my css: 
#cssmenu { 
    background: #f96e5b; 
    width: 1404px; 
    margin-right:auto; 
    margin-left:auto; 
    padding:0; 
} 
#cssmenu ul { 
    list-style: none; 
    margin: 0%; 
    padding: 0%; 
    line-height: 1; 
    display: block; 
    zoom: 1; 
    width:100% 
} 
#cssmenu ul:after { 
    content: " "; 
    display: block; 
    font-size: 0%; 
    height: 0%; 
    clear: both; 
    visibility: hidden; 
} 
#cssmenu ul li { 
    display: inline-block; 
    padding: 0%; 
    margin: 0%; 
} 
#cssmenu.align-right ul li { 
    float: right; 

} 
#cssmenu.align-center ul { 
    text-align: center; 
} 
#cssmenu ul li a { 
    color: #ffffff; 
    text-decoration: none; 
    display: block; 
    padding: 15px 25px; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 14px; 
    position: relative; 
    -webkit-transition: color .25s; 
    -moz-transition: color .25s; 
    -ms-transition: color .25s; 
    -o-transition: color .25s; 
    transition: color .25s; 
} 
#cssmenu ul li a:hover { 
    color: #333333; 
} 
#cssmenu ul li a:hover:before { 
    width: 100%; 
} 
#cssmenu ul li a:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    right: -3px; 
    top: 19px; 
    height: 6px; 
    width: 6px; 
    background: #ffffff; 
    opacity: .5; 
} 
#cssmenu ul li a:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    background: #333333; 
    -webkit-transition: width .25s; 
    -moz-transition: width .25s; 
    -ms-transition: width .25s; 
    -o-transition: width .25s; 
    transition: width .25s; 
} 
#cssmenu ul li.last > a:after, 
#cssmenu ul li:last-child > a:after { 
    display: none; 
} 
#cssmenu ul li.active a { 
    color: #333333; 
} 
#cssmenu ul li.active a:before { 
    width: 100%; 
} 
#cssmenu.align-right li.last > a:after, 
#cssmenu.align-right li:last-child > a:after { 
    display: block; 
} 
#cssmenu.align-right li:first-child a:after { 
    display: none; 
} 
@media screen and (max-width: 100%) { 
    #cssmenu ul li { 
    float: none; 
    display: block; 
    } 
    #cssmenu ul li a { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    border-bottom: 1px solid #fb998c; 
    } 
    #cssmenu ul li.last > a, 
    #cssmenu ul li:last-child > a { 
    border: 0; 
    } 
    #cssmenu ul li a:after { 
    display: none; 
    } 
    #cssmenu ul li a:before { 
    display: none; 
    } 
    } 
    #menubar2 { 
    width:400px; 
    margin-left:auto; 
    margin-right:auto; 
    } 

내 HTML :

<div id='cssmenu'> 
<ul> 
    <li class='active'> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="parish_council_information.html">Parish Council information</a></li> 
    <li><a href="whats_on.html">What's on </a></li> 
    <li><a href="history.html">History</a></li> 
    <li><a href="churches.html">Churches</a></li> 
    <li><a href="churches.html">Newsletter</a></li> 
    <li><a href="villiage_halls_and_social_clubs.html">Village Halls and Social Clubs</a> </li> 
    <li><a href="gallery.html">Gallery</a></li> 
    <div id="menubar2"> 
    <li><a href="business_in_runtons.html">Business in Runtons</a></li> 
    <li><a href="contact_us.html">Contact us</a></li> 
</div> 
</ul> 
</div> 

Answer 1

이 "플라이 아웃"을 넣어 (이 원인이 무엇인지 먹으 렴과 같이 호출 할 수 있습니다) 당신의 LI의에. 이처럼

:

HTML :

<ul> <!-- this is your horizontal menu bar ul --> 
    <li> 
    <a href="somepage.html">Some Page</a> 
    <div class="flyout_container"> 
     <ul> 
     <li><a href="somepage_subpage">Some Subpage of Some page</a> 
     </ul> 
    </div> 
    </li> 
</ul> 

CSS :

ul > li 
{ 
    display:block; 
    position:relative; 
    height:30px; 
} 

ul > li .flyout_container 
{ 
    position:absolute; 
    top:30px; /* this is the LI's height*/ 
    left:0; 
    display:none; 
} 

ul > li:hover .flyout_container 
{ 
    display:block; 
} 

정상 상태가 방금 첫 번째 수준을보고 유 일단의 flyout_container와 함께 LI를 가져, 그것은 주어진 스크린 샷에서 원하는대로 위치하게됩니다.