使用CSS設計樣式下拉

我試圖設計類似於圖片的下拉樣式。我很接近，但我無法弄清楚的東西很少。 - 如何在列表中的每個項目之間添加行 - 如何使列表從「SELECT」下開始。使用CSS設計樣式下拉

是我到目前爲止。

有沒有更好的方式來做到這一點，而不使用CSS？我對CSS相當陌生。

我不知道我的問題是如何相似的。如果有人能解釋。該帖子與我試圖達到的目標沒有相似之處。

.dropbtn { 
 
    color: white; 
 
    width: 180px; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    font-weight: 900; 
 
    background: rgba(0, 173, 239, 1); 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 50px 50px 50px 50px; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 
.sphere { 
 
    height: 45px; 
 
    width: 45px; 
 
    border-radius: 50%; 
 
    vertical-align: top; 
 
    /* position: relative; */ 
 
    background: black; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-left: -55px; 
 
} 
 
.dropdown-content a { 
 
    table-layout: fixed; 
 
    color: black; 
 
    margin-left: 6px; 
 
    padding: 12px 16px 13px 30px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a { 
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t color:white; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
div#arrow { 
 
    position: absolute; 
 
    margin-left: 10px; 
 
    margin-top: 11px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="dropdown.css"> 
 
</head> 
 
<body> 
 

 
<h2>Dropdown Menu</h2> 
 
<p>Move the mouse over the button to open the dropdown menu.</p> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">SELECT</button> 
 
    <div class="sphere"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </div> 
 
    </div> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-11-07 Maddy

@SebastianBrosch你能解釋它是如何相似的？ – Maddy

你仍然需要調整一些尺寸，但它的工作原理：

.dropbtn { 
 
    color: white; 
 
    width: 180px; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    font-weight: 900; 
 
    background: rgba(0, 173, 239, 1); 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 50px 50px 50px 50px; 
 
    position: relative; 
 
    z-index:2; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    z-index:1; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    right: 5px; 
 
    top:-20px; 
 
} 
 
.sphere { 
 
    height: 45px; 
 
    width: 45px; 
 
    border-radius: 50%; 
 
    vertical-align: top; 
 
    /* position: relative; */ 
 
    background: black; 
 
    display: inline-block; 
 
    position:relative; 
 
    margin-top: 5px; 
 
    margin-left: -55px; 
 
    z-index:2; 
 
} 
 
.dropdown-content a { 
 
    table-layout: fixed; 
 
    color: black; 
 
    margin-left: 6px; 
 
    padding: 12px 16px 13px 30px; 
 
    text-decoration: none; 
 
    display: block; 
 
    border: 1px solid #000; 
 
    border-top: none; 
 
} 
 
.dropdown-content a:first-child { 
 
    padding-top:22px; 
 
} 
 
.dropdown a { 
 
    
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t color:white; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
div#arrow { 
 
    position: absolute; 
 
    margin-left: 10px; 
 
    margin-top: 11px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="dropdown.css"> 
 
</head> 
 
<body> 
 

 
<h2>Dropdown Menu</h2> 
 
<p>Move the mouse over the button to open the dropdown menu.</p> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">SELECT</button> 
 
    <div class="sphere"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </div> 
 
    </div> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-11-07 14:00:08

.dropbtn { 
 
    color: white; 
 
    width: 180px; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    font-weight: 900; 
 
    background: rgba(0, 173, 239, 1); 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 50px 50px 50px 50px; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 
.sphere { 
 
    height: 45px; 
 
    width: 45px; 
 
    border-radius: 50%; 
 
    vertical-align: top; 
 
    /* position: relative; */ 
 
    background: black; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-left: -55px; 
 
} 
 
.dropdown-content a { 
 
    table-layout: fixed; 
 
    color: black; 
 
    margin-left: 6px; 
 
    padding: 12px 16px 13px 30px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a { 
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t color:white; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
div#arrow { 
 
    position: absolute; 
 
    margin-left: 10px; 
 
    margin-top: 11px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="dropdown.css"> 
 
</head> 
 
<body> 
 

 
<h2>Dropdown Menu</h2> 
 
<p>Move the mouse over the button to open the dropdown menu.</p> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">SELECT</button> 
 
    <div class="sphere"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </div> 
 
    </div> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a><hr/> 
 
    <a href="#">Link 2</a><hr/> 
 
    <a href="#">Link 3</a><hr/> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-11-07 13:50:40 staticvoidmain

@Mani - 請在選擇選項之間添加

。 – staticvoidmain

感謝您的輸入，但我如何才能從圖像下的選擇，以及如果你可以解釋爲什麼懸停（橙色）不包括整個選擇項目區 – Maddy

.dropdown-content {min -width：180px;} – staticvoidmain

您可以簡單地添加一個border-bottom: 1px solid black就大功告成了。

Working jsFiddle

.dropbtn { 
 
    color: white; 
 
    width: 180px; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    font-weight: 900; 
 
    background: rgba(0, 173, 239, 1); 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 50px 50px 50px 50px; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.sphere { 
 
    height: 45px; 
 
    width: 45px; 
 
    border-radius: 50%; 
 
    vertical-align: top; 
 
    /* position: relative; */ 
 
    background: black; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-left: -55px; 
 
} 
 

 
.dropdown-content a { 
 
    table-layout: fixed; 
 
    color: black; 
 
    margin-left: 6px; 
 
    padding: 12px 16px 13px 30px; 
 
    text-decoration: none; 
 
    display: block; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.dropdown a { 
 
    background: url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background: url('sidewhite.png') no-repeat left; 
 
    background-color: rgb(255, 131, 0); 
 
    color: white; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
div#arrow { 
 
    position: absolute; 
 
    margin-left: 10px; 
 
    margin-top: 11px; 
 
}

<h2>Dropdown Menu</h2> 
 
<p>Move the mouse over the button to open the dropdown menu.</p> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">SELECT</button> 
 
    <div class="sphere"> 
 
    <div id="arrow"> 
 
     <img src="arrow.png" width="29" height="27" alt="" /> 
 
    </div> 
 
    </div> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

來源

2016-11-07 13:54:18 reshad

感謝您的輸入。我怎樣才能讓元素列表以圖片的方式開始。我的選擇項目列表從我希望它在下面的一側開始。 – Maddy

@mani不客氣。你什麼意思？你的意思是它應該從select下面開始？ – reshad

選中此提供以下的jsfiddle，使你的.dropdown-content即添加left和margin價值的變化，並設置它的z-index價值-1，現在添加邊框，可以在.dropdown-content a中使用border-bottom。

jsFiddle

.dropdown-content{ 
    left:8px; 
    margin-top:-5px; 
    z-index:-1; 
    .......... 
    .......... 
    .......... 
} 

.dropdown-content a { 
border-bottom:1px solid #111; 
    .......... 
    .......... 
    .......... 
}

來源

2016-11-07 13:55:56 frnt

.dropbtn { 
 
    color: white; 
 
    width: 180px; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    text-align: left; 
 
    font-weight: 900; 
 
    background: rgba(0, 173, 239, 1); 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 50px 50px 50px 50px; 
 
    z-index:2; 
 
\t position:relative; 
 

 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    
 

 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 177px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
\t margin-top:-20px; 
 
    left:2px; 
 
    z-index:0; 
 
} 
 
.sphere { 
 
    height: 45px; 
 
    width: 45px; 
 
    border-radius: 50%; 
 
    vertical-align: top; 
 
    /* position: relative; */ 
 
    background: black; 
 
    display: inline-block; 
 
    margin-top: 5px; 
 
    margin-left: -55px; 
 
} 
 
.dropdown-content a:first-child{ 
 
\t \t padding-top: 30px; 
 
} 
 
.dropdown-content a { 
 
    table-layout: fixed; 
 
    color: black; 
 
    padding: 12px 16px 13px 30px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
\t .dropdown-content a{ 
 
    border:1px solid #000; 
 
    border-bottom:0; 
 
\t } 
 
.dropdown-content a:last-child{ 
 
    border-bottom:1px solid #000; 
 
    } 
 
.dropdown a { 
 
\t background:url('sidearrow.png') no-repeat left; 
 
} 
 

 
.dropdown-content a:hover { 
 
\t background:url('sidewhite.png') no-repeat left; 
 
\t background-color: rgb(255,131,0); 
 
\t color:white; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
div#arrow { 
 
    position: absolute; 
 
    margin-left: 10px; 
 
    margin-top: 11px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="dropdown.css"> 
 
</head> 
 
<body> 
 

 
<h2>Dropdown Menu</h2> 
 
<p>Move the mouse over the button to open the dropdown menu.</p> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">SELECT</button> 
 
    <div class="sphere"> 
 
    \t <div id="arrow"> 
 
    \t \t <img src="arrow.png" width="29" height="27" alt=""/> 
 
\t </div> 
 
    </div> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-11-07 14:55:48

希望它適合你 –

使用CSS設計樣式下拉

回答

相關問題