如何讓我的下拉列表具有以下邊框半徑：hover？

我有一個下拉列表，當你將鼠標懸停在「商店」一詞上時。我希望下拉列表的底部有一個8px的邊框半徑，它可以工作，但不適用於最後的<li>項目，即單詞'storage'。我怎樣才能解決這個問題？訪問此鏈接可看到它在行動www.me14ch.leedsnewmedia.net/slate 如何讓我的下拉列表具有以下邊框半徑：hover？

這裏是代碼：

/* drop down list */ 

#navigation ul { 
    list-style: none; 
    position: relative; 
    width: 100%; 
    margin: 0 auto; 
    z-index: 2; 
} 

#navigation ul a { 
    display: block; 
    color: white; 
    text-decoration: none; 
} 

#navigation ul li { 
    position: relative; 
    margin:0; 
    padding:0; 
    width: 20%; 
    display: inline-block; 
    list-style-type: none; 
    text-align: center; 
    margin-left:-10px; 
} 

#navigation ul li:hover { 
background:#6A8F28; 
} 

#navigation ul ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left:0; 
    background:#A3CC39; 
    padding: 0; 
    align-content: center; 
    width: 100%; 
    border-radius: 8px; 
} 

#navigation ul ul li { 
    float: none; 
    width: 100%; 
    margin-left:0px; 
} 

#navigation ul ul a { 
    line-height: 100%; 
    padding: 10px 15px; 
} 

#navigation ul ul ul { 
    top: 0; 
    left: 100%; 
} 

#navigation ul li:hover > ul { 
    display: block; 
    border-radius:8px; 
}

來源

2015-05-11 Chloe Hammond

我甚至不能看到下拉 - 似乎你的形象背後的旋轉木馬和項目被隱藏器（Chrome OSX）。 – PaulProgrammer

使用first-child和last-child

.nav{ 
 
font-size:18px; 
 
font-weight: bold; 
 
list-style:none; 
 
margin:0; 
 
padding:0; 
 
text-align:center; 
 
} 
 

 
.nav li{ 
 
display:block; 
 
} 
 

 
.nav a{ 
 
width: 144px; 
 
background: -webkit-linear-gradient(rgb(256,256,256), rgb(175,175,175)); 
 
background: -moz-linear-gradient(rgb(256,256,256), rgb(175,175,175)); 
 
background:   linear-gradient(rgb(256,256,256), rgb(175,175,175)); 
 
text-decoration:none; 
 
display:inline-block; 
 
padding:10px; 
 
} 
 

 

 
.nav li:first-child > a { 
 
border-radius: 20px 20px 0px 0px; 
 
} 
 
.nav li:last-child > a { 
 
border-radius: 0px 0px 20px 20px; 
 
} 
 

 
.nav li:hover a{ 
 
    background: #222; 
 
    color: #fff; 
 
}

<ul class="nav"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Couriers</a></li> 
 
    <li><a href="#">Reviews</a></li> 
 
    <li><a href="#">Retailers</a></li> 
 
    <li><a href="#">About</a></li> 
 
</ul>

來源

2015-05-11 19:09:30 Dmitriy

這應該做的伎倆 - 試試吧歡呼聲

#navigation ul li:last-child a:hover { 

    border-bottom-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
}

來源

2015-05-11 19:29:31 Abuasmaa

我認爲這將工作，但它似乎並沒有:(謝謝試圖幫助，雖然 –

對不起嘗試這一個 - 這應該工作

#navigation ul ul { 

    border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
    overflow: hidden; /* 1 */ 

} 

/* 1. overflow: hidden is making sure when hover the bottom will still be rounded. remove this line and hover on the last item and see */

來源

2015-05-28 07:56:57 Abuasmaa

如何讓我的下拉列表具有以下邊框半徑：hover？

回答

相關問題