Question

好的，我有一个菜单，想要将它的一部分组合在一起。得到了它的工作，但努力使下降出现并在徘徊时消失。选择时还需要将下拉菜单放到幻灯片放映的前面，不幸的是，我的代表不到10我不能发布图像来显示当前的屏幕图像。

通过查看http://cssdeck.com/labs/another-simple-css3-dropdown-menu并尝试将其与我的代码联系起来，我们非常感谢任何帮助。

请有人帮我指出正确的方向。我可以让面板的下拉列表永久显示或永久不显示，但需要在悬停在面板上时显示，而不是在悬停在家中时显示。

<div id="menubar">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li>
<ul>
<li><a href="panels1.html">panels</a></li>
<li><a href="detectors.html">test1</a></li>
<li><a href="communicators.html">test 2</a></li>
</ul>
<li>
<li class="current"><a href="panels1.html">panels</a></li>
<li><a href="prices.html">Prices</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="testimonials.html">Testimonials</a></li> 
<li><a href="sitemap.html">Site Map</a></li>
</ul>
</div><!--close menubar-->

ul#menu {
margin: 0;
display: inline;
list-style: none;}

ul#menu li {
padding: 0;
list-style: none;
margin: 2px 0 0 0;
display: inline-block;
background: #3d4f59;
position: relative;}

ul#menu li a {
float: left;
font: bold 120% Arial, Helvetica, sans-serif;
height: 24px;
text-shadow: 0 -1px 0 #000;
padding: 6px 20px 0 20px;
background: #3d4f59;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #FFF;
text-decoration: none;
margin: 10px 10px 0px 10px;}

ul#menu li.current a {
color: #3d4f59;
background: -moz-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
text-shadow: none;
position: relative;}

ul#menu li a:hover {
color: #3d4f59;
background: #FFF;
background: -moz-linear-gradient(#3d4f59, #ccc);
background: -o-linear-gradient(#3d4f59, #ccc);
background: -webkit-linear-gradient(#3d4f59, #ccc);
text-shadow: none;}

ul#menu li ul {
padding: 0;
list-style: none;
display: block;
visibility: visible;
background: #3d4f59;
background: -moz-linear-gradient(#3d4f59, #ccc);
background: -o-linear-gradient(#3d4f59, #ccc);
background: -webkit-linear-gradient(#3d4f59, #ccc);
text-shadow: none;
position: absolute;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;}

ul#menu li ul li {
padding: 0;
list-style: none;
background: #3d4f59;
background: -moz-linear-gradient(#3d4f59, #ccc);
background: -o-linear-gradient(#3d4f59, #ccc);
background: -webkit-linear-gradient(#3d4f59, #ccc);
text-shadow: none;
display: block;}

Answer 1

这是一个基本的Fiddle，它将完成这项工作。

/* Initially hide all second level ul's*/
ul#menu ul {
    display: none;
}

/* Show second level li's on hover*/
ul#menu li:hover+ul {
    display: block;
}

Answer 2

演示 - http://jsfiddle.net/victor_007/xLqm7or3/1/

对Html markup进行了更改，空白<li>

ul#menu li ul {
    display:none; /** added <- hide **/
}

ul#menu li:hover ul{
    display:block;  /** added <- on hover show **/
}

Answer 3

你的html结构不正确。您希望在子菜单的ul元素中嵌套li：

＆＃13;

ul#menu {
  margin: 0;
  display: inline;
  list-style: none;
}
ul#menu li {
  padding: 0;
  list-style: none;
  margin: 2px 0 0 0;
  display: inline-block;
  background: #3d4f59;
  position: relative;
}
ul#menu li a {
  float: left;
  font: bold 120% Arial, Helvetica, sans-serif;
  height: 24px;
  text-shadow: 0 -1px 0 #000;
  padding: 6px 20px 0 20px;
  background: #3d4f59;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  margin: 10px 10px 0px 10px;
}
ul#menu li.current a {
  color: #3d4f59;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);
  text-shadow: none;
  position: relative;
}
ul#menu li a:hover {
  color: #3d4f59;
  background: #FFF;
  background: -moz-linear-gradient(#3d4f59, #ccc);
  background: -o-linear-gradient(#3d4f59, #ccc);
  background: -webkit-linear-gradient(#3d4f59, #ccc);
  text-shadow: none;
}
ul#menu li ul {
  padding: 0;
  list-style: none;
  display: none;
  visibility: visible;
  background: #3d4f59;
  background: -moz-linear-gradient(#3d4f59, #ccc);
  background: -o-linear-gradient(#3d4f59, #ccc);
  background: -webkit-linear-gradient(#3d4f59, #ccc);
  text-shadow: none;
  position: absolute;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
}
ul#menu li ul li {
  padding: 0;
  list-style: none;
  background: #3d4f59;
  background: -moz-linear-gradient(#3d4f59, #ccc);
  background: -o-linear-gradient(#3d4f59, #ccc);
  background: -webkit-linear-gradient(#3d4f59, #ccc);
  text-shadow: none;
  display: block;
}
#menu li:hover ul {
  display: block;
  top: 40px;
}

＆＃13;

<div id="menubar">
  <ul id="menu">
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="panels1.html">panels</a>
      <ul>
        <li><a href="detectors.html">test1</a>
        </li>
        <li><a href="communicators.html">test 2</a>
        </li>
      </ul>
    </li>
    </li>
    <li><a href="prices.html">Prices</a>
    </li>
    <li><a href="help.html">Help</a>
    </li>
    <li><a href="contact.html">Contact Us</a>
    </li>
  </ul>
</div>
<!--close menubar-->

＆＃13;

html css下拉菜单有助于使其显示和消失

3 个答案: