我正在尝试根据此处图片设置下拉列表的样式。我能够得到下拉框但不知道如何让它看起来一样。 任何输入都将是非常有用的。
我试过在线查找示例,但没有找到类似的东西。 谢谢你的帮助。
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>
&#13;
答案 0 :(得分:0)
你在找这样的东西吗?
* {
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>