CSS MENU
皆さん、こんにちは。この MENU は FREE MENU Web サイトの MENU を参考に変更されており、右側に 3 つの製品写真を含むブロックが表示されるように DIV MENU に挿入されていますが、白い三角形の矢印が表示されます。ずっと変更しようとしているのですが、右のブロックの商品写真にマウスを移動すると三角形がずれてしまい、CSSに詳しい友人が助けてくれます。どこで制御できるか教えてください。 z-index: 599; しかし、サブメニューを追加すると、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;
cursor:default;
}
それ以外の場合は、最も内側の li が選択されるため、エラーが発生します。
また、あなたの返信を知るために私を引用する必要があります
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
