子菜单不起作用

时间:2015-10-16 20:58:47

标签: html css

尝试了我能做的一切,我只是无法显示子菜单,我已经阅读了关于CSS的文章,并且整天搜索网络尝试不同的想法,到目前为止没有任何工作,我是想知道它是不是我的容器,但我看不到它。



@charset "utf-8";

/* Main CSS Document */

body {
  margin: 0;
  padding: 0;
  font-size: 1.2em;
  font-family: Arial;
  background-color: #000;
  color: #fff;
}
#header-content {
  background: url('../images/header1.jpg') repeat-x;
  position: absolute;
  height: 167px;
  width: 100%;
  top: 0;
  left: 0;
}
/* Menu Start */

#bandmenu-content {
  padding-top: 134px;
  width: 100%;
}
#bandmenu-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
#bandmenu-content li {
  display: inline-block;
  height: 28px;
  font-size: 16px;
  line-height: 1px;
}
#bandmenu-content a {
  display: block;
  padding: 0 15px;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #fff;
  transition: all .3s ease;
}
#bandmenu-content ul a:hover {
  background-color: darkgray;
}
/* Sub Menus */

#bandmenu-content ul ul {
  display: none;
  background-color: #abc;
}
#bandmenu-content li:hover > ul {
  position: absolute;
  display: block;
  color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: aqua;
}

<div id="bandmenu-content">
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="members.html">Members</a>
        </li>
      </ul>
    </li>
    <li><a href="song-list.html">Song List</a>
    </li>
    <li><a href="testimonials.html">Testimonials</a>
    </li>
    <li><a href="shows.html">Shows</a>
    </li>
    <li><a href="photos.html">Photos</a>
    </li>
    <li><a href="videos.html">Videos</a>
    </li>
    <li><a href="faq.html">FAQ</a>
    </li>
    <li><a href="comments.html">Comments</a>
    </li>
    <li><a href="contacts.html">Contacts</a>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

我记得垂直设置子菜单也是一个问题。

0 个答案:

没有答案