横幅中的下拉菜单不起作用

时间：2016-01-24 08:24:02

标签： html css banner dropdown

所以基本上我看到了一个教程，并希望在我的横幅中使用该下拉菜单进行学校作业。

这是教程的结果：

HTML     

        <div class="menu-item">
         <a href="#"><img src="icon.png"></a>
          <ul>
            <li><a href="#">Web</a></li>
            <li><a href="#">Print</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </div>
    </nav>

CSS 

    * {
  margin: 0px;
  padding: 0px;
}

body {
  background: #e5e5e7;
}

nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 50px auto;
  width: 85px;
  height: 85px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.menu-item {
  width: 85px; 
  height: 85px;
}


.menu-item:hover {  
     background: transparent url('icon gloei.png');
}

.menu-item a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;

  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}


.menu-item:hover ul {
  height: 93px;

}

.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 200px;
}

/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}

.menu-item li:hover {
  background: #eee;
}

结果： enter image description here

它工作得非常好，但是当我在我的横幅中使用它时，悬停选项将无法工作，似乎样式已经消失......

这是我把它放在的地方：

<!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" type="text/css" href="holiday.css" />
</head>
<body style="background-color:#2B1B17; margin:auto; text-align: center">

<div class="container">
    <nav class="trash">
        <div class="trash" class="menu-item">
        <a href="#"><img src="icon.png"></a>
            <ul>
                <il><a href="#">Cool</a></il>
                <il><a href="#">Print</a></il>
                <il><a href="#">Other</a></il>
            </ul>
        </div>
    </nav>
            <img src="banner.png" ID="lol">
</div>
    <link rel="stylesheet" href="cssslider_files/csss_engine1/style.css">
         <div class='csslider1 autoplay '>
                    <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
                    <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
                    <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
                    <input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
                    <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
                    <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
                    <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
                    <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
                    <input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'>
        <ul>
                <li class="cs_skeleton"><img src="cssslider_files/csss_images1/christmas2.png" style="width: 100%;"></li>
                <li class='num0 img slide'> <img src='cssslider_files/csss_images1/christmas2.png' alt='' title='' /></li>
                <li class='num1 img slide'> <img src='cssslider_files/csss_images1/easter.png' alt='' title='' /></li>
                <li class='num2 img slide'>  <a href="http://sgdb.nl/" target=""><img src='cssslider_files/csss_images1/thanksgiving.png' alt='' title='' /> </a> </li>
                <li class='num3 img slide'>  <a href="http://sgdb.nl/index.php/nieuws" target=""><img src='cssslider_files/csss_images1/halloween.png' alt='' title='' /> </a> </li>
        </ul><div class="cs_engine"><a href="http://cssslider.com">cssslider.com</a> by cssSlider.com v2.1</div>
        <div class='cs_description'>
            <label class='num0'></label>
            <label class='num1'></label>
            <label class='num2'></label>
            <label class='num3'></label>
        </div>

        <div class='cs_arrowprev'>
            <label class='num0' for='cs_slide1_0'><span><i></i><b></b></span></label>
            <label class='num1' for='cs_slide1_1'><span><i></i><b></b></span></label>
            <label class='num2' for='cs_slide1_2'><span><i></i><b></b></span></label>
            <label class='num3' for='cs_slide1_3'><span><i></i><b></b></span></label>
        </div>
        <div class='cs_arrownext'>
            <label class='num0' for='cs_slide1_0'><span><i></i><b></b></span></label>
            <label class='num1' for='cs_slide1_1'><span><i></i><b></b></span></label>
            <label class='num2' for='cs_slide1_2'><span><i></i><b></b></span></label>
            <label class='num3' for='cs_slide1_3'><span><i></i><b></b></span></label>
        </div>
        <div class='cs_bullets' class="special">
            <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/christmas2.png' alt='' title='' /></span></label>
            <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/easter.png' alt='' title='' /></span></label>
            <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/thanksgiving.png' alt='' title='' /></span></label>
            <label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider_files/csss_tooltips1/halloween.png' alt='' title='' /></span></label>
        </div>
        </div>

        </body>
</html>

CSS 

#lol {
    width: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

body
{
    padding: 0px;
    margin: 0px;
}

.container {
   border: 0px;
   width: 100%;
   position: relative;
}


.trash {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    width:85px;
    height: 85px;
    padding: 3px;
    margin: 5px 5px 5px 5px;
}

nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  width: 85px;
  height: 85px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.menu-item {
  width: 85px; 
  height: 85px;
}


.menu-item:hover {  
     background: transparent url('icon gloei.png');
}

.menu-item a {
  color: white;
  display: block;
  text-decoration: none;
  width: 85px;
}

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;

  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}


.menu-item:hover ul {
  height: 93px;

}

.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 85px;
}

/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}

.menu-item li:hover {
  background: #eee;
}



/* gemaakt door css slideshow */

.csslider1 > .cs_arrowprev > label:after,
.csslider1 > .cs_arrownext > label:after {
  line-height: 30px;
}
.csslider1 > .cs_play_pause > label:after {
  line-height: 28px;
}

结果： enter image description here 我真的很困惑为什么它不起作用......希望有人知道该怎么做：）

2 个答案:

答案 0 :(得分：0)

我认为StreamEx<Integer> ints = IntStreamEx.of(new Random(), -100, 100) .peek(System.out::println).boxed(); int idx = scanLeft(ints, Integer::sum).indexOf(x -> x < 0); 在这里失败了。 将这两个类写在单个类属性中，如

class="menu-item"

答案 1 :(得分：0)

为什么要给像

这样的课程 
 <div class="trash" class="menu-item">

像

一样使用它 
 <div class="trash menu-item">
相关问题
最新问题