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

debugcn 发表于 Dev

史考特

嗨，我试图将下拉菜单项添加到我的水平菜单栏中。我希望下拉菜单项是“教区议会信息”下的“教区议会会议记录”，但以我的风格：（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>

法比安·舍纳（FabianSchöner）

将您的“弹出窗口”（这样称呼它，就是这样）放入您的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;
}