如何将下拉项添加到我的水平菜单栏

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

我的网页：

<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上，它将如您所愿地显示在给定的屏幕截图中。