Mani Mani - 1 month ago 6
CSS Question

Styling dropdown using CSS

I am trying to style the dropdown similar to the image here. I am close but there are few things which I am unable to figure out.
- How can I add the lines between each item in the list
- How can I make the list start from under the "SELECT".

This is what I have so far.

Is there a better way to do this without using CSS? I am fairly new to CSS.

I am not sure how my question is similar. If someone can explain. The post does not have similarity to what I am trying to achieve.



.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 {
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;
}

<!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">
<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>
</body>
</html>




Answer

You still need to adjust some sizes, but it works:

.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 {
  
	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;
}
<!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">
  	<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>
</body>
</html>