CSS MENU的白色三角形錯位...
大家好, 这个MENU是参考FREE MENU网站的MENU改的, 把它套到DIV MENU里面, 为的是在右边出现一个放三个产品照片的区块,但是有一个白色三角形箭头, 我已经试了好久都改不好,就是当滑鼠移到右边区块的产品照片时, 三角形会错位跑到上面去,请熟悉CSS的朋友们帮帮忙, 帮我看一下要在哪里控制不要让它跑掉... 谢谢
<style type="text/css">
body {
background-color: #fff;
background-repeat: repeat-x;
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#mainContent-2 {
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
background-repeat: repeat-x;
text-align: center;
}
#main-big-banner {
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#left-inside-title-0 {
width: 214px;
margin: 0px;
float: left;
}
#left-inside-title-1 {
width: 214px;
text-align: right;
height: 46px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #808080;
text-decoration: none;
background-color: #d9d9d9;
}
#left-inside-title-text {
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: bold;
color: #FFF;
text-decoration: none;
width: 188px;
margin-top: 7px;
margin-right: 21px;
float: right;
}
#left-inside-title-down {
width: 214px;
text-align: right;
}
#left-menu-1 {
width: 214px;
margin-top: 10px;
margin-right: 21px;
float: right;
text-align: right;
}
.left-button-link-1 {
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #AACD06;
text-decoration: none;
font-weight: bold;
}
.left-button-link-1:hover {
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #D9FA3D;
text-decoration: none;
font-weight: bold;
}
.left-button-link-2 {
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
text-decoration: none;
font-weight: bold;
}
.left-button-link-2:hover {
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #999;
text-decoration: none;
font-weight: bold;
}
/* Starter CSS for Flyout Menu */
.cssmenu{
background-color: #eee;
width: 214px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dashed;
border-bottom-style: dashed;
border-top-color: #ccc;
border-bottom-color: #ccc;
margin-top: 10px;
float: right;
margin-right: 0px;
text-align: right;
}
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
.cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
.cssmenu ul li {
width: 190px;
float: right;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
.cssmenu ul li.hover,
.cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
.cssmenu ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
.cssmenu ul ul li {
float: none;
}
.cssmenu ul ul ul {
top: 1px;
left: 99%;
}
.cssmenu ul li:hover > ul {
visibility: visible;
}
.cssmenu ul li {
float: none;
}
.cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
.cssmenu ul a,
.cssmenu ul a:link,
.cssmenu ul a:visited {
display: block;
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
color: #f60;
text-decoration: none;
}
.cssmenu > ul {
float: none;
}
.cssmenu ul {
/* background: #fff;*/
}
.cssmenu > ul > li {
/* border-left: 3px solid #d7d8da;*/
float: right;
}
.cssmenu > ul > li > a {
padding: 10px 21px; /* 子選單間隔 */
}
.cssmenu > ul > li:hover {
/* border-left: 3px solid #bd3e53;*/
}
.cssmenu ul li:hover > a {
color: #f90;
}
.cssmenu > ul > li:hover {
/* background: #f6f6f6;*/
}
/* Sub Menu */
.cssmenu ul ul a:link,
.cssmenu ul ul a:visited {
font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
font-size: 9px;
color:#000;
}
.cssmenu ul ul {
width: 360px;
background: none;
border-left: 20px solid transparent;
}
.cssmenu ul ul a {
padding: 8px 0;
/* border-bottom: 1px solid #eeeeee;*/
}
.cssmenu ul ul li {
width: 340px;
margin-top:-45px; /* 三產品區塊位置 */
padding: 0 10px;
background: #fff;
}
.cssmenu ul ul li:last-child {
/* border-bottom: 3px solid #d7d8da;*/
padding-bottom: 0px;
}
.cssmenu ul ul li:first-child {
padding-top: 0px;
}
.cssmenu ul ul li:last-child > a {
border-bottom: none;
}
.cssmenu ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 5px; /* 白色三角 */
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script language="javascript">
$(function() {
$("a.left-button-link-2").mouseover(function(){
$(".cssmenu").slideUp();
var _this=$(this).attr("href");
if($(_this).css("display")=="none"){
$(_this).slideDown();
}else{
$(_this).slideUp();
}
return false;
});
$("#A1").mouseover(function(){
$("#a1").slideDown();
return false;
});
$("#A2").mouseover(function(){
$("#a2").slideDown();
return false;
});
});
</script>
<div id="mainContent-2">
<div id="main-big-banner">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="214" align="left" valign="top">
<div id="left-inside-title-0">
<div id="left-inside-title-1"><div id="left-inside-title-text">MENUS</div></div>
<div id="left-inside-title-down">
<div id="left-menu-1"><a href="#" id="A1" name="A1" class="left-button-link-2">MENU-A</a></div>
<div id="a1" name="a1" style="display:none;" class="cssmenu">
<ul><li class="has-sub"><a href="#" class="apple-menu-text">MENU-A1</a>
<ul><li class="first"><table border="0" cellpadding="5"><tr align="center">
<td width="90"><a href="#"><img src="upload/product/20131016115341.png" width="70" border="0"><br>Button Guard</a></td>
<td width="90"><a href="#"><img src="upload/product/20131016114147.png" width="70" border="0"><br>Glass Guard</a></td>
<td width="90"><a href="#"><img src="upload/product/2013101694948.png" width="70" border="0"><br>Glass Guard</a></td>
<td width="90"><a href="#"><span class="left-button-link-1">More..</span></a></td>
</tr></table></li></ul>
</li></ul>
</div>
<div id="left-menu-1"><a href="#" id="A2" name="A2" class="left-button-link-2">MENU-B</a></div>
<div id="a2" name="a2" style="display:none;" class="cssmenu">
<ul><li class="has-sub"><a href="#" class="apple-menu-text">MENU-B1</a>
<ul><li class="first"><table border="0" cellpadding="5"><tr align="center">
<td width="90"><a href="#"><img src="upload/product/20131019200659.png" width="70" border="0"><br>yacht x laptop Mac book</a></td>
<td width="90"><a href="#"><img src="upload/product/20131019200445.png" width="70" border="0"><br>lettre x Air Mac book</a></td>
<td width="90"><a href="#"><img src="upload/product/20131019200102.png" width="70" border="0"><br>verglas x New iPan</a></td>
<td width="90"><a href="#"><span class="left-button-link-1">More..</span></a></td>
</tr></table></li></ul>
</li></ul>
</div>
<p> </p>
</div></div>
</td>
<td width="810" align="left" valign="top" bgcolor="#A0A0A0">
</td>
</tr>
</table>
</div></div>
