Lavalamp 드롭 아래로 겹쳐졌습니다
-
27-09-2020 - |
문제
jQuery 용 Lavalamp 플러그인으로 작업하려고하고 있고 그에 드롭 다운 기능을 추가하려고합니다.
두 드롭 다운과 Lavalamp 효과 가이 문제를 제외 하고이 코드에서 잘 작동합니다. 드롭 다운이 Lavalamp 효과를 확장합니다.
나는 문제가 CSS와 함께 있다고 확신하지만 나는 그것을 고정 할 수 없다 ... 팁이나 포인터는 환영받을 수 없다.
여기에 코드가 있습니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link type="text/css" href="css/sample.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<ul class="drop-down" id="1">
<li class="top">
<div class="topbar"><a href="#">Home</a></div>
<div class="sub">
<ul>
<li class="1">
<div><a href"#">Calendar</a></div>
</li>
<li class="2">
<div><a href"#">account</a></div>
</li>
</ul> </div>
</li>
<li class="top1">
<div class="topbar1"><a href="#">Resort</a></div>
<div class="sub1"><ul>
<li>
<div><a href"#">Calendar</a></div>
</li>
<li>
<div><a href"#">account</a></div>
</li>
</ul></div>
</li>
<li class="top2">
<div class="topbar2"><a href="#">Hotel</a></div>
<div class="sub2"><ul>
<li>
<div><a href"#">Calendar</a></div>
</li>
<li>
<div><a href"#">account</a></div>
</li>
</ul></div>
</li>
<li class="top3">
<div class="topbar3"><a href="#">Farm House</a></div></li>
</ul>
</html>
.
해당 CSS
.drop-down {
position: relative;
height: 35px;
background: #e8e8e8 url('../img/three_0.gif') repeat-x;
padding: 0px;
margin: 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.top, .top1, .top2, .top3,
.top4, .top5, .top6 {
float: left;
padding-left: 24px;
padding-right: 24px;
line-height: 30px;
list-style: none;
}
.drop-down li.back {
background: #cecece;
width:auto;
height: 32px;
margin-top: 2px;
z-index: 8;
position: absolute;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.drop-down li div.topbar, .drop-down li div.topbar1,.drop-down li div.topbar2,
.drop-down li div.topbar3{
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
}
.sub, .sub1, .sub2, .sub3{
display: none;
float: left;
top: 34px;
left: 0;
width: 160px;
margin: 0px 0 0 -4px;
background: #cecece;
white-space: nowrap;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
height: auto;
position: relative;
z-index: 20;
}
.sub li, .sub1 li, .sub2 li, .sub3 li{
display: block;
height: 25px;
position: relative;
z-index: 30;
float: left;
width: 160px;
font-weight: normal;
background: #cecece;
}
.sub li a, .sub1 li a , .sub2 li a, .sub3 li a{
position: relative;
z-index: 40;
height: 25px;
display: block;
float: left;
line-height: 20px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
padding-right: 5px;
text-align: center;
}
.sub li a:hover, .sub1 li a:hover, .sub2 li a:hover, .sub3 li a:hover{
background: #ffb600;
width: 120px;
line-height: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #fff;
}
.
jQuery와 함께 드롭 다운을 위해 사용합니다.
$(document).ready(function() {
$('li.top').hover(function () {
$('div.sub').slideDown('medium');
},
function(){
$('div.sub').stop(true,true).css('display','none');
});
$('li.top1').hover(function () {
$('div.sub1').slideDown('medium');
},
function(){
$('div.sub1').stop(true,true).css('display','none');
});
$('li.top2').hover(function () {
$('div.sub2').slideDown('medium');
},
function(){
$('div.sub2').stop(true,true).css('display','none');
});
});
. 해결책
.1과 .2의 CSS는 무엇입니까?또한 첫 번째 문자로 문자가있는 문자가 있도록 그 이름을 변경하는 것은 매우 좋은 생각이 될 것입니다..c1 및 .c2
.Sub Li가 있지만 .sub는 DIV이며 DIV가 DIV이며 UL의 클래스 하위 (또는 ID와 같은 이러한 클래스를 사용하고 있으므로 더 나은 아직 ID)를 만들거나 .sub UL LI가 어디에 있습니다 .SUB LI
또한, 국경 반경은 현재 표준이므로 -moz 및 -webkit crap
를 도둑질 수 있습니다.제휴하지 않습니다 StackOverflow