Question

我正在尝试根据此处图片设置下拉列表的样式。我能够得到下拉框但不知道如何让它看起来一样。任何输入都将是非常有用的。

是我目前所拥有的。

我试过在线查找示例，但没有找到类似的东西。谢谢你的帮助。

＆＃13;

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

＆＃13;

<!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;

Answer 1

你在找这样的东西吗？

* {
  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>

样式下拉CSS

1 个答案: