Tips on creating a dropdown menu with a fontawesome icon

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


[...]
   

see image description here

Many thanks!

Answer №1

modify this content

 <a >
<i  onclick="myFunction()" style="float: right;" class="fa fa-ellipsis-v fa-lg dropbtn"></i>
</a>

instead of

 <button >
<i  onclick="myFunction()" style="float: right;" class="fa fa-ellipsis-v fa-lg dropbtn"></i>
</button>

Due to button's inherited stylesheet, the style of <i> changes when used inside a button. You can still use it, but you may need to override the button's default styles.

You can customize the style of <i> with properties like color, font-size, and more.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

loop not functioning properly with file type input

Having trouble uploading an image and copying it into a folder named images within a loop. Can you assist with solving this issue? Here's my code: $sql="SELECT * FROM product"; $q=$conn->query($sql); while($r=$q->fetch(PDO::FETCH_ASSOC)) { $cod ...

Can JavaScript be Utilized to Create Dynamic Layouts Successfully?

Are you curious about the viability of using Javascript to create fluid website layouts? While it is possible, how does it compare in terms of performance and complexity when compared to other methods like CSS3/HTML5? Take a look at the function below that ...

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

I have a group of form elements located within a hidden div which looks like this: <div id="jDivUpdateFolder" style="display:none;"> <asp:TextBox ID="txtEditFolderName" runat="server"></asp:TextBox><br /> <asp:TextBox ID ...

Having trouble changing the chosen selection in the material UI dropdown menu

I've encountered an issue with my material ui code for a select dropdown. It seems that the selected option is not updating properly within the dropdown. <FormControl variant="outlined" className={classes.formControl}> <InputLabel ref={ ...

The ng-repeat function is unable to fetch data from a JSON file

Within my AngularJS framework template, I have the following snippet of html code: <ul class="sb-parentlist"> <h1 class={{headerClass}}> Popular</h1><div data-ng-repeat="data in data track by $index"> <li> ...

When I implement inline CSS, everything works smoothly. However, when I try to use the same styles in an external

I am facing an issue with CSS. I have created an HTML page and added some padding and margin properties using inline CSS, which is working fine. However, when I try to add the same properties in my external CSS file, they are not taking effect. Here is my ...

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

Chrome is experiencing compatibility issues with Datatable

I'm encountering an issue with Datatables and I'm at a loss on how to resolve it. In my custom cms, Datatables functions perfectly on my Mac (Safari, Chrome, Firefox) and also works seamlessly for my colleagues on Windows machines. However, we ...

How can I dynamically pass a background:url using JavaScript to CSS?

I have a CSS code snippet below that I would like to dynamically change the "background:url" part using Javascript. div{ background: url('pinkFlower.jpg') no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

Issues with refreshing the content in form fields

I am encountering issues with reloading fields, especially the datepicker in a form. The website is live at , and when I attempt to search using the search form, it works fine the first time. However, if I press the reset button before searching again, th ...

Tips for smoothly transitioning from a simple transform to a rotate effect

I need help with an HTML element that needs to rotate when hovered over. Here is the code I have: The issue I'm facing is that I don't want a transition for translateX, only for the rotation. What steps should I take to achieve this? .cog { ...

Ways to format the direct descendant of a multi-level list?

Check out my nested ul list: <ul> <li> <a href="/"></a> </li> <li> <a href="/"> </a> &l ...

Is it possible for a website to instruct a user's browser to save the entire page locally?

Is it possible for a (single-page) website to instruct a user's browser to save the entire page locally? To provide some background: I am running a website on a server that bills based on bandwidth usage. Since the content of the site remains mostly ...

Tips for wrapping text to fit the width of a column

Hello, I have a table with varying column widths as shown below ${"#goldBarList"} table tr td:first-child{width:5%;} ${"#goldBarList"} table tr td:first-child+td{width:5%;} ${"#goldBarList"} table tr td:first-child+td+td{width:6%;} ${"#goldBarList"} table ...

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Issue with Checkbox Selection In my project, I have implemented two tabbed containers for grid and list view. Each container contains multiple elements called info boxes with checkbox inputs. Whenever a checkbox is checked, the background color of the res ...

Full-width sub menu within the menu

I'm trying to make a sub menu appear below my main menu that is the same width as the main menu, which has a fixed width. I want the sub menu to adjust its width based on the number of links it contains. Is this even possible? Here's the code I h ...

Utilizing C# ASP.NET to Extract Data from a Web Page Post JavaScript Execution

Looking to extract all links from a web page in order to review where cookies are being set for compliance with UK legislation. In an effort to streamline the process, I am exploring automation options to save time. However, a challenge I am facing is tha ...

Flexibility on smaller screens using Flexbox

On larger screens, I have arranged 4 icons in a row, but on smaller screens (less than 768px), I need to display only 2 icons in a row. This is my current code : .welcome { display: flex; justify-content: space-around; } @media (max-width: 768px) ...

Troubleshooting problem with jQuery attribute value assignment

I am currently working with text boxes that store data in local storage upon saving. $(".formFieldUserData").each(function () { var key = $(this).attr("name"); var value = $(this).attr("value"); localStorage.setItem(key, value); } However, I have c ...

Utilizing AJAX for showcasing the data from an XML document

Our professor gave a brief explanation of AJAX, expecting us to showcase the data from an XML file in a scrollable text area on our website. Unfortunately, I am facing issues with loading the XML file into the designated div area. Any assistance or suggest ...