懸停查詢 - 導航欄CSS影響DIV類

以下CSS代碼創建一個包含容器內某些樣本框的NAV欄。懸停查詢 - 導航欄CSS影響DIV類

我有這麼從這裏一些建議我包括額外的代碼（代碼第二擋了下來）

.dropdown>ul>li>a:hover {margin-bottom:20px;}

與哈弗停留在問題這額外的代碼行之有效

但是它有在不會對我的DIV 副作用boxleft在靠左 - 因爲我碰到它與它移動的導航欄上移動鼠標.........我只是想讓DIV boxleft上左手邊。你能幫我嗎？非常感謝。

/* Navigation Style */ 
    .dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; } 

    /* Basic List Styling (First/Base Level) */ 
    .dropdown ul {padding:0; margin:0; list-style: none;} 
    .dropdown ul li {float:left; position:relative;} 
    .dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;} 
    .dropdown>ul>li>a:hover {margin-bottom:20px;} 
    .dropdown ul li a:hover {color:#ffffff; background:#232323;} 

    /* Second Level Drop Down Menu */ 
    .dropdown ul li ul {display: none;} 
    .dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;} 
    .dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; } 
    .dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;} 

    /* Third Level Drop Down Menu */ 
    .dropdown ul li:hover ul li ul {display: none;} 
    .dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; } 

    #container { 
    overflow:hidden; 
    background-color:yellow; 
    width:1250px; 
    padding 10px 10px 10px 10px; 
    border:1px solid #666666; 
    margin: 0 auto; 
    } 


    .boxleft { 
    float:left; 
    background-color:blue; 
    margin-top:30px; 
    margin-bottom:10px; 
    margin-left:10px; 
    margin-right:10px; 
    width:600px; 
    border:1px solid #666666; 
    z-index:1; 
    }

編輯

小提琴的位置： - http://jsfiddle.net/LUzNm/

來源

2013-12-21 user2635961

請提供一個jsfiddle ....描繪你的問題！ – NoobEditor

提供標記，更好拿出在[jsfiddle.net（http://jsfiddle.net） –

請參閱小提琴小提琴 - http://jsfiddle.net/LUzNm/ – user2635961

而不是針對這個創可貼修復，讓我們解決問題的根源！

首先，你不需要那麼margin-bottom: 20px事情。這從來不是你最初的問題的原因。相反，這是由於你的.dropdown酒吧是在高度40px，但實際的下拉列表中的絕對定位在41px從頂部。如果瀏覽器在鼠標懸停在1像素以上時註冊鼠標事件，則下拉菜單將關閉。

現在，好像你想要41px，所以你的.dropdown欄上會出現border: 1px solid #666666欄。我們仍然可以這樣做，但我們只是將該邊框添加到懸停菜單。

最後，讓我們的一些最佳實踐去。填充可能很有用，但是這個用例的填充很糟糕。它更容易，更準確改用line-height實現我們<a>標籤的高度和間距，而不是填充，它使我們能夠與您網站上的標題額外padding-top和padding-bottom聲明自己！通過將line-height設置爲40px，我們可以隨時匹配.dropdown欄的高度（如果您使用LESS或SASS之類的東西，它將成爲重複使用的重要變量）。

與所有他這樣說，這裏的更新小提琴：http://jsfiddle.net/2r5Mz/

還有一件事，我也建議做的是移動整個.dropdown容器出來的#container。原因是#container已設置overflow: hidden，這可能意味着如果內容不夠高，則會切斷下拉菜單。只需將此.dropdown移出該div即可解決問題。

來源

2013-12-21 16:36:27

懸停查詢 - 導航欄CSS影響DIV類

回答

相關問題