0
所以基本上我看到一个教程，并希望使用我的横幅下拉菜单中的一个学校作业。下拉菜单横幅不起作用
这里的教程的结果：
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 我真的，真的很困惑，为什么它不工作...希望有人知道该怎么做:)
谢谢你，拉胡尔·乔杜里这么多！它的工作：D – Goten21
欢迎.. Goahead哥们:) –
@ Goten21，好，很好，所以标记问题解决.. –