I'm brand new to coding and struggling to create a drop-down menu similar to the one used in fonawsome fa fa-ellipsis-v
While I'm attempting to code it here, I'm not sure why the class is being overridden.
*{
margin: 0;
padding :0;
box-sizing: border-box;
}
.chat-container{
height: 100vh;
width: 100vw;
display: grid;
grid-template-rows: 10% 80% 10%;
grid-template-columns: 75% 25%;
/* grid: 'search-container chat-title' 50px
'conversation-list chat-massage-list' 1fr
'new-massage-container chat-form' 420px/ 320px 1fr;
overflow-x: hidden;
border: 1px solid black;
} */
}
#search-container
{
/* height: 60px;
width: 25%;
float: left; */
background-color: #0048aa;
box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.75);
z-index: 1;
}
#chat-title{
background-color: rgba(217, 223, 221, 0.945);
/* height: 60px;
width: 75%;
float: left; */
color: #0048AA;
font-weight: bold;
font-size: 2.0rem;
box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.25);
z-index: 1;
}
#conversation-list{
/*
height: 85vh;
width: 25%;
position: fixed;
float: left;
top: 60px;
left: 0; */
background-color: #0048aa;
}
#chat-form
{ /* height: 85vh;
width: 75%;
position: fixed;
float: left;
top: 60px;
left: 25%; */
border-radius: 0 0 10px 0;
background: #eee;
border-top: 1px solid rgba(0, 0, 0, 0.25);
}
/*#search-container
{
}*/
[...]
Many thanks!