html - Styling dropdown CSS -


i trying style dropdown list according this image here. able dropdown box not sure how can looking same. input extermly helpful.

this have far.

i have tried looking examples online have not found similar. 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 {      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 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 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> last login time on date </p>  		<br>  		<p> please select application below begin </p>  	</div>  </div>  </body>  </html>

are looking this?

* {    margin: 0;    padding: 0;    list-style: none;  }  .dropdown-trigger {    line-height: 1;    padding: 5px;    display: inline-block;    position: relative;    cursor: pointer;  }  .dropdown-trigger {    display: inline-block;    padding: 5px;    padding-right: 7px;    text-align: center;    border-radius: 10px 10px 0 0;    padding-bottom: 10px;  }  .dropdown-trigger:hover {    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

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more