Slider covering mega drop down menu

If you could kindly hover your mouse over the *MORE* button in the menu here: http://jsfiddle.net/H8FVE/3/ You will notice that the big wide picture underneath (#featured) is covering the drop down div. Why and how can I fix it? Here is part of my HTML code: And here is part of my CSS: ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right; } ul#secondary-menu a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; } ul#secondary-menu a:hover { color: #ffffff; text-shadow: 1px 1px 0 #404747; } #second-menu ul.nav li:hover a {color: #ffffff; text-shadow: 1px 1px 0 #404747; } ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; } ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; } ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; } ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; } ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } ul#secondary-menu ul li.even-item { background: none; } .mfilm:hover{ background:#ea2e49 !important; } .mtv:hover{ background:#2589cf !important; } .mwebvideos:hover{ background:#5c58ac !important; } .manimation:hover{ background:#43cf61 !important; } .manime:hover{ background:#c142a5 !important; } .mmanga:hover{ background:#e77848 !important; } .mcomics:hover{ background:#e8eb05 !important; } .mwriters:hover{ background:#ff3c75 !important; } .mmore:hover{ background:#4b5571 !important; } .mliterature:hover{ background:#2c8f83 !important; } .mgames:hover{ background:#e34328 !important; } .marts:hover{ background:#cc226a !important; } .mcontact:hover{ background:#9395aa !important; } /* ---------- Mega Drop Down --------- */ ul#mega li { padding-right: 0px; background: url(images/secondary-menu-bg.png) repeat-y top right; } #mega { list-style:none; font-weight:bold; height:2em; } #mega li { padding: 23px 0px; background:#999; border:0px solid #000; float:left; text-align:center; position:relative; } #mega li:hover { background:#eee; border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps
  • and
    connected */ z-index:1; /* shadow above adjacent li */ } #mega a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px;} ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; } /* ----------- Hide/Show Div ---------- */ #mega div { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FFFFFF; border-color: -moz-use-text-color #48423F #48423F; border-right: 1px solid #48423F; border-style: none solid solid; border-width: 0 1px 1px; font-weight: normal; left: -999em; margin-top: 1px; position: absolute; text-align: left; width: 496px; } /* --------- Within Div Styles --------- */ #mega li:hover div { left: -1px; top: auto; } #mega li.dif:hover div { left: -407px; top: 72px; } #mega li.mmore:hover > a { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; /* Ensures hover on MORE remains */ } #mega div h2 { background: none repeat scroll 0 0 #999999; clear: both; float: left; font-size: 1em; margin: 10px 0 5px; padding: 0 10px; position: relative; width: 300px; } #mega div ticman { clear: both; float: left; position: relative; margin-left:1px; margin-right:1px; width: 495px; height: 74px; background-image: url(images/morebgwide.png); background-size:495px 74px; background-repeat:no-repeat; } #mega div p { float: left; padding-left: 10px; position: relative; width: 106px; } #mega div p a { clear: left; float: left; line-height: 1.4; text-decoration: underline; width: 100%; } #mega div a:hover, #mega div a:focus, #mega div a:active { text-decoration: none; } /*------------------------------------------------*/ /*--------------[FEATURED SLIDER]-----------------*/ /*------------------------------------------------*/ #featured { position: relative; padding-bottom: 20px; margin-left: -1px; margin-right: -1px; } a#left-arrow, a#right-arrow { position: absolute; top: 136px; width: 32px; height: 68px; text-indent:-9999px; } a#left-arrow { background:url(images/left-arrow.png) no-repeat; left: -32px; } a#right-arrow { background:url(images/right-arrow.png) no-repeat; right: -32px; } .featured-top-shadow { background:url(images/featured-top-shadow.png) repeat-x; position: absolute; top:0px; left: 0px; width: 958px; height: 7px; } .featured-bottom-shadow { background:url(images/featured-bottom-shadow.png) repeat-x; position: absolute; bottom:0; left: 0; width: 958px; height: 8px; } .featured-description { position: absolute; width: 333px; height: 196px; top: 40px; right:54px; background:url(images/featured-description.png); padding: 27px 32px 40px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .featured-description p.meta-info { font-family: Georgia, serif; font-style: italic; font-size: 12px; color: #747474; } .featured-description p.meta-info a { text-decoration: none; color: #fff; } h2.featured-title { font-family: 'Kreon', Arial, sans-serif; font-weight: lighter;font-size: 30px; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); margin-top: -4px; } h2.featured-title a { text-decoration: none; color: #ffffff; } .featured-description p { color: #c9c8c8; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); line-height: 19px; } a.readmore { display: block; background: url(images/readmore.png); height: 27px; padding: 0 17px; color: #dfca81; font-size: 12px; line-height: 27px; position: absolute; bottom: 0px; right: 0px; text-shadow: none; } #featured a.readmore { -moz-border-radius-bottomright: 10px;-webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } #featured a.readmore:hover { color: #fff; } Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/3/ I have been trying to wrap my head around this all day to a point where I almost set my hair on fire. Do you know how to solve this?
  • 以上就是Slider covering mega drop down menu的详细内容,更多请关注web前端其它相关文章!

    赞(0) 打赏
    未经允许不得转载:web前端首页 » HTML5 答疑

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    前端开发相关广告投放 更专业 更精准

    联系我们

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏