2012-01-27 14 views
0

私はjqueryスーパーフィッシュメニューを使用していますが、イメージボックスにはカラーボックスを使用しています。このSuperfishメニューが奇妙に動作するのはなぜですか?

しかし、問題は私がcolorboxの上に表示されているカラーボックスを開くときです。私はそのZ-インデックスまたはこれを取り除くために他のプロパティを変更する方法は?

ここに私の言うことがあります。 enter image description here

これは私のメニューのCSSです:

/*** ESSENTIAL STYLES ***/ 
.sf-menu, .sf-menu * { 
    margin:   0px 0 0 -20px; 
    padding:  0; 
    list-style:  none; 
    position:relative; 
    z-index:0px; 
} 
.sf-menu ul { 
    position:  relative; 
    top:   -999em; 
    width:   10em; /* left offset of submenus need to match (see below) */ 
    box-shadow:0px 1px 6px #333; 
} 
.sf-menu ul li { 
    width:   169px; 
} 
.sf-menu li:hover { 
    visibility:  inherit; /* fixes IE7 'sticky bug' */ 
} 
.sf-menu li { 
    float:   left; 
    position:  relative; 
} 
.sf-menu a { 
    display:  block; 
    position:  relative; 
} 
.sf-menu li:hover ul, .sf-menu li.sfHover ul { 
    left:   0; 
    top:   40px; /* match top ul list item height */ 
    z-index:  99; 
    width:169px; 
} 
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { 
    top:   -999em; 
} 
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { 
    left:   14em; /* match ul width */ 
    top:   -1px; 
} 
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { 
    top:   -999em; 
} 
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { 
    left:   10em; /* match ul width */ 
    top:   0; 
} 
/*** DEMO SKIN ***/ 
.sf-menu { 
    float:   left; 
    background: url('../images/nav_bg.png') repeat center top; 
    width:991px; 
    font-size:13px; 
} 
.sf-menu a { 
    padding:10px 30px; 
    margin:0 0 0 5px; 
    text-decoration:none !important; 
    color: #f8f8f8; 
} 

.sf-menu a:hover { 
    padding:10px 30px; 
    margin:0 0 0 5px; 
    text-decoration:none !important; 
    color: #F55D2D; 
} 


.sf-menu li { 
    background:  transparent; 
    z-index:9999; 
    background: url('') no-repeat top right; 
} 
.sf-menu li li { 
    font-size:12px; 
    background: #F9F9F9; 
    border-bottom:1px dashed #ddd; 
    border-left:1px dashed #000; 
} 
.sf-menu li li:hover { 
    border-left:1px solid #F9F9F9; 
} 
.sf-menu li li:last-child { 
    border-bottom:none; 
} 
.sf-menu li li a { 
    color:#333; 
} 
.sf-menu li li a:hover { 
    color:#f8f8f8; 
} 
.sf-menu li li li { 
    background:#4F5356; 
    border-bottom:1px dashed #333; 
} 
.sf-menu li li li a { 
    color:#f8f8f8; 
} 
.sf-menu li li.sfHover { 
    outline:  0; 
    border-left:1px solid #F9F9F9; 
} 
.sf-menu li li.sfHover a { 
    color:#fff; 
} 
.sf-menu a:focus, .sf-menu a:active { 
    outline:0; 
    background-color:none; 
} 
/*** arrows **/ 
.sf-menu a.sf-with-ul { 
    padding-right: 2.25em; 
    min-width:  1px; /* trigger IE7 hasLayout so spans position accurately */ 
} 
.sf-sub-indicator { 
    position:  absolute; 
    display:  block; 
    right:   1em; 
    top:   1em; /* IE6 only */ 
    width:   10px; 
    height:   10px; 
    text-indent: -999em; 
    overflow:  hidden; /* 8-bit indexed alpha png. IE6 gets solid image only */ 
    background-image: url('../images/arrows-ffffff.png'); 
    background-repeat: no-repeat; 
    background-position: -10px -100px; 
} 
a > .sf-sub-indicator { /* give all except IE6 the correct values */ 
    top:   1.1em; 
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/ 
} 
/* apply hovers to modern browsers */ 
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { 
    background-position: -10px -100px; /* arrow hovers for modern browsers*/ 
} 
/* point right for anchors in subs */ 
.sf-menu ul .sf-sub-indicator { 
    background-position: -10px 0; 
} 
.sf-menu ul a > .sf-sub-indicator { 
    background-position: 0 0; 
} 
/* apply hovers to modern browsers */ 
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { 
    background-position: -10px 0; /* arrow hovers for modern browsers*/ 
} 
+0

'z-index:0px;'は意味がありません。 :)整数の後ろには 'px'はありません。 – Sk8erPeter

答えて

1
.sf-menu li z-index:9999; 

は、デフォルトのcolorbox.cssが同じzインデックスを使用していますIIRC ...

+0

@ roman-両方の答えが正しいことを私に教えてくれてありがとう。 – coder

1

は、z軸を下げてみ、問題となっていますメニューのインデックス値。または、colorbox CSSのz-index値を増やしてください。

+0

@ scott-両方の答えが正しいことを私に教えてくれてありがとう。 – coder

関連する問題