樣式下拉CSS

我想在這裏根據圖像樣式下拉列表。我能夠得到下拉框，但不知道如何讓它看起來一樣。任何輸入都將非常有幫助。樣式下拉CSS

是我到目前爲止。

我嘗試過在網上查找示例，但還沒有找到類似的東西。感謝您的幫助。

div#setting-dropdown { 
 
    position: absolute; 
 
    margin-left: 1350px; 
 
\t 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 { 
 
\t display:block; 
 
}

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

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

來源

2016-11-10 Maddy

@Raziasultana它怎麼連遠程相關的問題，但不錯的網站壽。 –

您正在尋找這樣的事情？

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

來源

2016-11-10 16:37:18

確實，我只是想弄清楚如何將其與我的代碼整合。如果你可以幫助我，因爲我不使用列表 – Maddy

@Mani絕對......告訴我更多...我想要關注的主要是定位。 –

如何將此移動到聊天狀態以告訴您更多信息？有很多代碼，我不想在這裏粘貼它。感謝您的幫助 – Maddy

回答

相關問題