CSS MENU的白色三角形?位..._html/css_WEB-ITnose
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="/static/imghw/default1.png" data-src="upload/product/20131016115341.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131016114147.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/2013101694948.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131019200659.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131019200445.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131019200102.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131016115341.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131016114147.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/2013101694948.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131016115341.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131016114147.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/2013101694948.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131019200659.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131019200445.png" class="lazy" 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="/static/imghw/default1.png" data-src="upload/product/20131019200102.png" class="lazy" 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,所以产生错误。
另外你要引用一下我,我才知道你的回复呀

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。
