CSS MENU の白い三角はちょっと..._html/css_WEB-ITnose

CSS MENU

皆さん、こんにちは。この MENU は FREE MENU Web サイトの MENU を参考に変更されており、右側に 3 つの製品写真を含むブロックが表示されるように DIV MENU に挿入されていますが、白い三角形の矢印が表示されます。ずっと変更しようとしているのですが、右のブロックの商品写真にマウスを移動すると三角形がずれてしまい、CSSに詳しい友人が助けてくれます。どこで制御できるか教えてください。 z-index: 599;
cursor:default;
}
三角形は絶対的に配置され、最初の相対要素の親要素に配置されるため、position:relative に問題があるはずです。
このポジションを削除してみてください。
with386819368 ...

あなたが言ったようにposition:relativeを削除しましたが、三角形は逃げません

しかし、サブメニューを追加すると、3つの製品ブロックが最初にのみ表示されます。サブメニューの隣、
を削除しないと通常の位置にブロックが表示されますが、
それを解決するには...次の 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" 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>

久しぶりに解決したかどうかわかりません

.cssmenu ul li.hover,
.cssmenu ul li:hover {
position:相対;
z-index: 599;
cursor: default;
}
質問 まだここにありますが、 .cssmenu ul li.hover オプションが役に立たないのかどうかはわかりません。これを削除して
.cssmenu ul に変更できます。 has-sub:hover {
position:relative;

z-index:599;

cursor:default;
}
それ以外の場合は、最も内側の li が選択されるため、エラーが発生します。
また、あなたの返信を知るために私を引用する必要があります