CSS MENU的白色三角形?位..._html/css_WEB-ITnose-HTML Tutorial-php.cn

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"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>Button Guard</a></td>      <td width="90"><a href="#"><img  src="upload/product/20131016114147.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>Glass Guard</a></td>      <td width="90"><a href="#"><img  src="upload/product/2013101694948.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><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"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>yacht x laptop Mac book</a></td>      <td width="90"><a href="#"><img  src="upload/product/20131019200445.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>lettre x Air Mac book</a></td>      <td width="90"><a href="#"><img  src="upload/product/20131019200102.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><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>

Copy after login

回复讨论(解决方案)

.cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
应该是这个position: relative的问题，因为三角是绝对定位的，定位在第一个relative的父元素中。
把这个position删了试试。

with386819368 ...

发现问题了,虽然按你说的拿掉position: relative,三角形不会跑掉,
但是如果增加子选单,那三个产品区块只会固定出现在第一个子选单旁边,
不会出现在第二个选单旁边,如果不拿掉,区块出现位置正常,但三角形会跑掉,
该如何解决呢... 以下HTML我有增加一个子选单

<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"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>Button Guard</a></td>      <td width="90"><a href="#"><img  src="upload/product/20131016114147.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>Glass Guard</a></td>      <td width="90"><a href="#"><img  src="upload/product/2013101694948.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><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>      <ul><li class="has-sub"><a href="#" class="apple-menu-text">MENU-A2</a>      <ul><li class="first"><table border="0" cellpadding="5"><tr align="center">      <td width="90"><a href="#"><img  src="upload/product/20131016115341.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>11111 Guard</a></td>      <td width="90"><a href="#"><img  src="upload/product/20131016114147.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>22222 Guard</a></td>      <td width="90"><a href="#"><img  src="upload/product/2013101694948.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>33333 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"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>yacht x laptop Mac book</a></td>      <td width="90"><a href="#"><img  src="upload/product/20131019200445.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><br>lettre x Air Mac book</a></td>      <td width="90"><a href="#"><img  src="upload/product/20131019200102.png"    style="max-width:90%" border="0" alt="CSS MENU的白色三角形?位..._html/css_WEB-ITnose" ><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>

Copy after login

这么久了不知道你解决了没
.cssmenu ul li.hover,
.cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
问题呢还是这里，.cssmenu ul li.hover这个选择不知道是不是没用的，可以去掉吧，改成
.cssmenu ul .has-sub:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
不然选择到了最里层的li，所以产生错误。
另外你要引用一下我，我才知道你的回复呀