0
간단한 드롭 다운 메뉴를 만들려고했지만 그걸 얻지는 못했습니다 ... 지금 자습서의 일부를보고 하위 메뉴의 위치를 알아 보았습니다. 나는 "정상적인"드롭 다운 메뉴에 특별한 것을 원하지 않습니다. 문제는 아마도 절대적인 위치 일 것이지만 튜토리얼에서 그는 그것을 사용했습니다. 드롭 다운 메뉴는 두 번째 지점 (Produkte)에 있습니다. Page 및 코드 : position: absolute 문서의 흐름에서 요소를 제거하고 자연 사용하위 메뉴의 드롭 다운 메뉴 위치
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
\t color: #003399;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 50px;
width: 1100px;
background: white;
border: 2px solid black;
\t box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #fcb774;
}
article{
width: 100%;
}
article:after{
content: '';
display: block;
clear: both;
}
.bild{
height: 200px;
width: 200px;
float: left;
border: 2px solid black;
\t box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
overflow: hidden;
}
.bild:hover{
cursor:pointer;
}
.text{
float: right;
width: 860px;
word-wrap: break-word;
height: 200px;
border: 2px solid black;
\t box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
background-color: white;
}
hr{
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid black;
}
nav{
width: 100%;
}
nav ul{
background-color: #fcb774;
margin: 0px;
padding: 0px;
text-align: center;
\t font-size: 0;
\t border-bottom: 2px solid black;
\t box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
}
nav ul li{
display: inline-block;
\t font-size: 16px;
}
nav ul li a{
display: block;
padding: 10px 20px 10px 20px;
transition: all 0.5s;
text-decoration: none;
}
nav ul li a:hover{
background-color: white;
text-decoration: underline;
}
.dropdown{
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
nav ul li:hover .dropdown{
display: block;
}<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide1').cycle({
fx: 'fade',
next: '.slide1',
timeout: 0
});
})
\t \t
\t \t \t $(document).ready(function() {
$('.slide2').cycle({
fx: 'fade',
next: '.slide2',
timeout: 0
});
});
$(document).ready(function() {
$('.slide3').cycle({
fx: 'fade',
next: '.slide3',
timeout: 0
});
});
</script>
</head>
<body>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Produkte</a>
<ul class="dropdown">
<li><a>T-Shirts</a></li>
<li><a>Ansteckbuttons</a></li>
<li><a>SexToys</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<section>
<article>
<div class="bild slide1">
\t \t \t \t \t <img src="images/tshirt1.png" width="200" height="200" />
\t \t \t \t \t <img src="images/tshirt2.png" width="200" height="200" />
</div>
<div class="text">
\t \t \t \t \t <h1>T-Shirts</h1>
</div>
</article>
<hr>
<article>
<div class="bild slide2">
\t \t \t \t \t <img src="images/tshirt3.png" width="200" height="200" />
\t \t \t \t \t <img src="images/tshirt4.png" width="200" height="200" />
</div>
<div class="text">
\t \t \t \t \t <h1>T-Shirts</h1>
</div>
</article>
<hr>
<article>
<div class="bild slide3">
\t \t \t \t \t <img src="images/tshirt3.png" width="200" height="200" />
\t \t \t \t \t <img src="images/tshirt4.png" width="200" height="200" />
</div>
<div class="text">
\t \t \t \t \t <h1>T-Shirts</h1>
</div>
</article>
</section>
</body>
</html>