使用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设计样式下拉

回答

相关问题