CSS MENU的白色三角形?位..._html/css_WEB-ITnose
- WBOY原創
- 2016-06-21 09:47:021414瀏覽
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> 回复讨论(解决方案)
.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> 这么久了不知道你解决了没
.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，所以产生错误。
另外你要引用一下我，我才知道你的回复呀
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn