Align the CSS dropdown content to the right rather than the left for a cleaner layout

The information in this dropdown menu is currently aligned to the left of the icon. I would like it to be aligned to the right. Thank you!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-span {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>


<div style="text-align:center;">
<div class="dropdown">
  <span><i class="far fa-caret-square-down fa-lg"></i></span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
</div>


</body>
</html>

htmlcss

Answer №1

If you're looking to enhance your dropdown menu, consider adding the following line of code: right:0; within the .dropdown-content element.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-span {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>


<div style="text-align:center;">
<div class="dropdown">
  <span><i class="far fa-caret-square-down fa-lg"></i></span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
</div>


</body>
</html>

Answer №2

Include the right: 0 property in the dropdown-content class.

Answer №3

I must clarify that I misunderstood your question after reading another answer. However, I will keep this response here for reference.

Below is a workaround that sets the dropdown icon height to 18px.

The modification in my code compared to yours is:

  • top: 18px; added to the .dropdown-content css rule
  • display: inline-block adjusted in the 
    .dropdown:hover .dropdown-content
    css rule

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-span {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    top: 18px;
}

.dropdown:hover .dropdown-content {
    display: inline-block;
}
</style>
</head>
<body>

<div style="text-align:center;">
<div class="dropdown">
  <span><i class="far fa-caret-square-down fa-lg"></i></span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
</div>

</body>
</html>

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

What techniques can I use to change multiple sibling elements with CSS when hovering over them?

Imagine a scenario where hovering over any row within group 1 changes the color of all rows within that same group. Now, extend this concept to apply to an unlimited number of groups, denoted by N. Let's consider having 300 groups, each consisting of ...

htmlcss

IE having issues with selecting all options button in jQuery, but it is functioning correctly in Firefox

In one part of my cgi code, I create the following: my $PARAMETER_HTML .= "<select name='parameters' id='parameters' size='10' multiple='multiple'>"; foreach my $values (sort @PARA_VALUES) { $PARAMETER_HTM ...

jqueryhtmlperlcgi

Only the initial value is being processed in the for loop using Javascript

I am having issues trying to sum the values within a for loop sourced from my Django database using JavaScript. Currently, when I iterate through the loop, only the first value in the array is returned. I need assistance in finding a solution that allows ...

javascripthtmldjangomath

Tips for customizing the background color and image of a toaster

Looking to modify the background color and image based on the else condition (toaster.error) success: function (data) { if (data.message != ""){ toastr.success(data.message); ...

javascripthtmlcssstylesangular-toastr

Using absolute elements within a div that is positioned relative in HTML code

In the layout below: <div style="margin-top:0%" class="postcell"> <div id="postspantitle" > <span class="texts"><?php echo __('Başlık :', 'goldmem');?></span> </div> & ...

html

Why is this specific element showing as undefined in the form during editing, but appearing correctly in both the debugger and console.log?

I've encountered an error that keeps popping up: "Cannot read property 'textContent' of undefined at HTMLDocument". This error specifically occurs when dogName, dogBreed, and dogSex are set within the 'click' listener. It's st ...

javascripthtmlfetchpatchjson-patch

Create an interactive quiz using JQuery that focuses on sorting and organizing

Hey there, I need some advice on creating a quiz for ordering and sorting in HTML5/JQuery. Basically, I want to display a random set of steps on the page that users have to organize correctly. I found an example using jQuery and jquery-ui-1.8.5.custom.min. ...

javascriptjqueryhtml

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

Track when a user modifies a <select> dropdown list generated using the Jquery method ".html()"

Is it possible to detect a change in the value of a select list when that select list has been added using either the .html(htmlString) or .append(content[,content]) jQuery function? HTML CODE: <ul class="htmlClass"> <!-- Populated via JS --& ...

javascriptjqueryhtml

Directional Div CSS Transition

Is it feasible to determine the starting direction of a CSS transition? I've designed a div that enlarges in height when hovered over; however, it's situated at the bottom of the page, causing the scrollbar to extend downward. Ideally, I would ...

jquerycsstransitiondirection

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

csslayoutcss-grid

Transitioning in CSS involves animating the changing of a CSS property over

My goal with CSS is to create a transition effect with a delay that behaves differently when entering and exiting. Specifically, I want a 1 second delay when an element enters, but no delay (0 seconds) when it exits. transition: width 0.3s ease-in 1s; tra ...

csscss-transitions

section featuring a striking visual, user input form, and descriptive content

I want to create a layout with a background image in a div, a signup form on the right side, and a div containing h1 tags on the left side. Here is the HTML code: <html> <title> GoToMy PC </title> <head> <link rel="stylesheet" ...

htmlcss

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

How can I achieve a transition effect from the bg-red-300 class to bg-transparent, or a different background class, over a 2-second duration? Do I need to use javascript for this effect? I would like an element to be highlighted and then return to its no ...

csstailwind-csstailwind-in-js

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element. The problematic code snippet appears as follows: <div id="FacebookWra ...

htmlcssinternet-explorer

Fixed Element Transitioning from Starting Position on Scroll

Check out the JSFiddle example here I'm currently working on a website utilizing Bootstrap 3. I have an image that sticks to the page when scrolling by changing its position to fixed. While this functionality works, the image tends to shift slightly ...

javascriptjqueryhtmlcsstwitter-bootstrap

What causes the width of a card to vary between Windows and a Macbook Pro?

Here is the code I have: <div id="app"> <v-app id="inspire"> <v-content> <v-container> <v-card max-width="1000" class="mx-auto" > <v-form v-model="valid"> ...

cssvue.jsbootstrap-4vue-componentvuetify.js

The SpringMvc tiles are failing to display the header and footer

One of the main components in my project is a file called tiles.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apa ...

javacssspringjspspring-mvc

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

cssreactjstypescriptmaterial-ui

Determine the specific value of an HTML table cell by specifying the column name for a specific row

One challenge I am facing is dynamically creating a table using JSON without knowing in advance the number of columns and/or rows that will be generated. I have successfully added a clicked event for the row that gets selected. In every table, there will ...

javascriptjqueryhtml