1
イメージ
のようなドロップダウンのスタイルを設定しようとしています。私は近づいていますが、私が把握することができないものはほとんどありません。 - リスト内の各項目の間に行を追加するにはどうすればいいですか？ - リストを「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>
@SebastianBroschあなたはそれがどのように似ているか説明できますか？ – Maddy