Mani Mani - 25 days ago 16
CSS Question

Styling dropdown CSS

I am trying to style my dropdown list according to this image here. I am able to get the dropdown box but not sure how I can get it looking the same.
Any input will be extermly helpful.

This is what I have so far.

I have tried looking up examples online but have not found something similar.
Thanks for the help.



div#setting-dropdown {
position: absolute;
margin-left: 1350px;
display: inline-block;
}


div#setting-dropdown-content {
background: rgba(0, 173, 239, 1);
width: 237px;
display: none;
/* padding: 8px; */
position: absolute;
margin-left: -105px;
margin-top: -15px;
padding: 15px;
}

div#setting-dropdown p {
font-size: 22px;
margin-top: 44px;
font-family: 'Museo Slab 700';
}

img#setting-blue-arrow {
position: relative;
margin-left: 121px;
top: -44px;
}

div#setting-dropdown-content a {
color: white;
text-decoration: none;
/* display: none; */
font-size: 19px;
font-family: 'Museo Slab 300';
padding: 2px;
}

#setting-dropdown:hover #setting-dropdown-content {
display:block;
}

<!DOCTYPE html>
<html>
<head>
<title>Averios</title>
<link rel="stylesheet" type="text/css" href="averios.css">
<link rel="stylesheet" type="text/css" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="dropdown.css">
<meta charset="utf-8">
</head>
<body>
<div class="averios-header">
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
<p> SETTINGS </p>
<img id="setting-blue-arrow" src="C:\Users\msehgal\Desktop\Averios\Images\downarrow.png" width="29" height="15"/>
<div id="setting-dropdown-content">
<a href="#">Change Password</a>
<a href="#">Change Security Settings</a>
</div>
</div>
<div id="averios-logo">
<img src="averioslogo.png" width="176" height="129">
</div>
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
</div>
<div id="header-hr">
</div>
</div>

<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<br>
<p> Please select an application below to begin </p>
</div>
</div>
</body>
</html>




Answer

Are you looking for something like this?

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown-trigger {
  line-height: 1;
  padding: 5px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.dropdown-trigger i {
  display: inline-block;
  padding: 5px;
  padding-right: 7px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  padding-bottom: 10px;
}
.dropdown-trigger:hover i {
  background-color: #99f;
}
.dropdown-trigger:hover .dropdown-menu {
  display: block;
}
.dropdown-menu {
  display: none;
  background-color: #99f;
  position: absolute;
  right: 5px;
  padding: 5px;
  left: 5px;
}
.dropdown-menu li {
  padding: 5px;
}
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<div class="dropdown-trigger">
  Dropdown <i class="ion-chevron-down"></i>
  <div class="dropdown-menu">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Comments