隱藏在Nivo Slider背後的CSS菜單欄

我嘗試了所有可以在Google上找到的解決方案，但不知何故，關於z-index的所有信息都不起作用:(這是我第一次使用此網站，所以原諒我，如果我的內容似乎凌亂隱藏在Nivo Slider背後的CSS菜單欄

問題1：https://www.dropbox.com/s/jr5wew27ydv7hcl/Screen%20Shot%202013-12-16%20at%2011.57.01%20pm.png

問題2：https://www.dropbox.com/s/7ffztfq7iezc4ao/Screen%20Shot%202013-12-16%20at%2011.57.50%20pm.png

我自己的CSS表

.header{ 
    width:960px; 
    height:99px; 
    font-family:'Francois One', sans-serif; 
    text-transform:uppercase; 
    z-index:9999px;} 
    <!--this holds the css menu bar--> 

    .banner, #slidermain { 
    width:960px; 
    height:328px;} 
    <!--this holds the nivo slider--> 

    .slidermain { 
    background-color:#399; 
    margin-bottom:10px;}

NIVO滑塊CSS表

/* The Nivo Slider styles */ 
.nivoSlider { 
    position:relative; 
    width:100%; 
    height:auto; 
    overflow: hidden; 
    float:left; 
    z-index:10px; 

} 

.nivoSlider img { 
    position: relative; 
    top:0px; 
    left:0px; 
    max-width: none; 
} 
.nivo-main-image { 
    display: block !important; 
    position: relative !important; 
    width: 100% !important; 
}

如果CSS菜單位置設置爲相對的，它的工作，但下拉列表將推動NIVO滑塊向下，以適應其規模，導致其他桌子也向下移動。但是一旦鼠標遠離菜單欄，nivo滑塊就會調整到原來的位置。

/* user menu settings */ 
.ddmenu { 
    display: block; 
    padding:5px; 
    text-align:center; 
    width: 110px; 
    margin: 0 auto; 
    margin-top:45px; 
    position: relative; 
    cursor: pointer; 
    background: #fff; 
    font-size: 1.2em; 
    color: #656565; 
    font-weight: normal; 
    float: left; 
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    -webkit-transition: all 0.15s linear; 
    -moz-transition: all 0.15s linear; 
    -ms-transition: all 0.15s linear; 
    -o-transition: all 0.15s linear; 
    transition: all 0.15s linear; 
} 
.ddmenu:hover { color: #898989; } 

.ddmenu.open { 
    background: #5a90e0; 
    color: #fff; 
    border-left-color: #6c6d70; 
    position:relative; 
    z-index:200px; 
} 

.ddmenu ul { 
    position: relative; 
    top: 100%; 
    left: -1px; /* move content -1px because of container left border */ 
    width: 200px; 
    z-index:200px; 
    padding: 10px; 
    display: none; 
    border-left: 4px solid #8e9196; 
    background: #fff; 
    list-style:none; 
    text-decoration:none; 
    text-align:left; 
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3); 
}

任何幫助呈現將不勝感激！謝謝！

來源

2013-12-16 user3107891

這是不對的，'z-index：200px;'，你沒有爲它指定一個像素大小，只是'200'。另外，不是100％確定的，如果CSS是自己的樣式表，你不應該使用像這樣的html註釋，'<！ - 這容納nivo滑塊 - >'，如果是，則使用'/ *註釋去這裏* /'。 –

儘量使用相對位置的菜單第一級，並添加絕對位置的菜單2級這樣：「家，服務，活動，信息，關於我們，聯繫」必須有相對位置，另一方面UL哪裏是：'關於sana，合作伙伴的絕對位置，一切都會好的。

來源

2013-12-16 16:45:28 mcmac

我的天哪！有效！非常感謝！！！：D – user3107891

沒問題。問候 – mcmac

你添加一個單位到您的z索引，但Z-index屬性是不允許有一個單元： W3C: z-index

嘗試去除所有的Z-索引「PX」，應該解決你的問題。

來源

2013-12-16 16:16:30

不work..when我在所有的Z-index的問題，有兩種仍然存在刪除PX（菜單欄推NIVO滑蓋向下） – user3107891

隱藏在Nivo Slider背後的CSS菜單欄

回答

相關問題