Steps for changing the direction of a dropdown menu to the left instead of the right

I'm having a bit of an issue with my inbox setup. I have a dropdown for it, but the dropdown is appearing off to the right and since it's at the end of my top navbar, it's not very visible. Here is the CSS code for the inbox:

.notification {
      background-color: #555;
      color: white;
      text-decoration: none;
      position: relative;
      display: inline-block;
      border-radius: 2px;
    }
    
    .notification:hover {
      background: red;
    }
    .notification .badge {
      position: absolute;
      top: -7px;
      right: -10px;
      padding: 5px 10px;
      border-radius: 50%;
      background-color: red;
      color: white;
    } 
    .dropdown {
      position: relative;
      display: inline-block;
      user-select: none;
    }
    .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;
      user-select: none;
    }
    .dropdown:hover .dropdown-content {
      display: block;
      user-select: none;
    }
<div style="float:right;" class="dropdown">
<span className="span3"></span><a href="#inbox" class="notification">
<span><img src="https://flounder.epizy.com/images/inbox.png" height="25" width="25"/></span>
<div class="dropdown-content">
</div>
</a>
</div>

I'm not quite sure how to fix this issue, can someone please help me out?

htmlcss

Answer №1

I did everything within my power. I believe it has occurred.

 .notification {
      background-color: #555;
      color: white;
      text-decoration: none;
      position: relative;
      display: inline-block;
      border-radius: 2px;
    }
    
    .notification:hover {
      background: red;
    }
    .notification .badge {
      position: absolute;
      top: -7px;
      right: -10px;
      padding: 5px 10px;
      border-radius: 50%;
      background-color: red;
      color: white;
    } 
    .dropdown {
      position: relative;
      display: inline-block;
      user-select: none;
    }
    .dropdown-content {
      display: none;
      background-color: #f9f9f9;
      color: black;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
      user-select: none;
    }
    .dropdown:hover .dropdown-content {
      display: block;
      user-select: none;
    }
 <div style="float:right;" class="dropdown">
    <span className="span3"></span><a href="#inbox" class="notification">
      <span><img src="https://cdn.iconscout.com/icon/free/png-256/left-arrow-8-458424.png" height="25" width="25"/></span>
    <div class="dropdown-content">Hello Test
      </div>
      </a>
      </div>

Answer №2

In my understanding, it seems like there is content within div.dropdown-content that needs to be formatted as a list. To achieve this, I have made some adjustments by incorporating a list structure into the HTML code:

<div style="float:right;" class="dropdown">
  <span className="span3"></span><a href="#inbox" class="notification">
    <span><img src="images/inbox.png" height="25" width="25" /></span>
    <div class="dropdown-content">
      <ul>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
      </ul>
    </div>
  </a>
</div>

To ensure that the dropdown contents appear below the a.notification element, you can adjust the position of the dropdown content wrapper (div.dropdown-content). Here is what the corresponding CSS code would look like:

.notification {
  background-color: #555;
  color: white;
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}
.notification:hover {
  background: red;
}
.notification .badge {
  position: absolute;
  top: -7px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}
.dropdown {
  position: relative;
  display: inline-block;
  user-select: none;
}
.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;
  user-select: none;
  right: 0;
}
.dropdown:hover .dropdown-content {
  display: block;
  user-select: none;
}

I've also created a demo for reference. Feel free to take a look!

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

Verifying the selection state of a dynamically generated checkbox with JavaScript

I have a table with checkboxes. Each time a button is clicked, I dynamically add new checkboxes to the table like so: var cell3 = row.insertCell(2); cell3.innerHTML = '<input type="checkBox" value=\"selected?\" style="cursor:poin ...

javascripthtml

Angular - The differ is unable to find support for the object 'Item One' which is of type 'string'. NgFor is only able to bind to Iterables like Arrays and not individual objects

Many questions on StackOverflow share similarities with this one, but I have not been able to find a solution that fits my issue. My code functions correctly when attempting to populate items in a "Select" control. It successfully retrieves data if the it ...

htmlangulartypescript

Issues with Vertical Alignment and Navigation

Link: Please resize the browser to mobile view. Issue with Header: I am facing alignment issues in the header. The elements do not seem to be aligned properly at the center of the header. The Android logo is aligned, but the text and dash image are not. ...

htmlcss

Creating an animated Gif using HTML and CSS styling

I am trying to create an effect where a .gif animation plays once when the mouse hovers over a specific image. I have one static image in PNG format and one animated gif. The goal is for the gif to play every time the mouse is hovered over the png image. ...

htmlcssanimation

Is there a way to adjust the transparency of specific text when clicking on a different div?

How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this: https://i.sstatic.net/MgbYQ.png I have set the current opacity of the submit message to 0 so it is hidden, but is there a way to change its o ...

jquerycss

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...

javascriptcssanimation

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

csshtmlgridmaterial-designflexbox

Utilize jQuery or Javascript in WinRT to transfer names between pages seamlessly

Is there a way to pass four names entered by the user on the first page to another page while navigating in a winRT app using winJS or jQuery? For example, if the four names are: 1. Akshay 2. Ashish 3. Pavitra 4. Adarsh How can this be achieved? ...

jqueryhtmlnavigationwindows-runtimewinjs

Issue with bottom margin on the last flex item located at the end of the container is not being applied

My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...

htmlcssflexbox

What could be causing the divs to overlap? Without the use of floats or absolute positioning,

When resizing vertically on mobile, my date-time-container is overlapping the upper elements welcome and weather. Despite setting them as block level elements, adding clear: both, and not using absolute positioning or floats, the overlap issue persists. An ...

javascripthtmlcsspositioncss-position

Trouble with stroke width in Svg bezier path while using a mask

I'm having trouble hiding part of a path using a mask. When I apply the mask, the stroke width doesn't seem to work anymore. Any suggestions on why this is happening and how to fix it? svg { position: absolute; width: 100%; height: 100%; ...

htmlcsssvg

The Vue2 @click event does not function properly when using v-html within a different component

I currently have a sign up form that includes an Alert component for displaying any errors. One of the conditions may prompt a message saying "You already have an account, click here to log in". The error messages are passed as props to the "Alert" compon ...

javascripthtmlvue.jsvuejs2

Is it possible to define the sequence of wrapped items in CSS flexbox?

I am using a <div> with CSS flex to maintain responsiveness. I want to control the order in which elements are wrapped. For instance, I need 1 - 2 - 3 To be rearranged as 1 3 2 Once fully wrapped. Here is my current code: https://jsfiddle.net/ ...

htmlcssresponsive-designflexbox

Styling Images in HTML with Text Overlays and Buttons using CSS

Hello everyone, I am new to this and struggling with formatting text over an image using a CSS button. I need the code to be responsive for mobile devices as well. Any help or advice on this would be greatly appreciated. Thanks in advance, Johnny_P This ...

htmlcssbuttonformatting

The design of the button appears unappealing when viewed in

Hi there! I am currently working on creating a button for Outlook 2010, but I am running into an issue. The button image is not aligning vertically in the center, and the padding and margin are not displaying properly. It works perfectly fine on most ema ...

htmlcssoutlookhtml-email

Using jQuery to clear a textarea when a select input is changed

Currently, I am in the process of developing a small text editor that enables users to edit files and create new ones. Here is how I have set up my select menu. <select name="reportname" id="reportname" class="form-control"> <option value="zr ...

javascriptjqueryhtmlajax

Tips for creating a responsive H1 tag within the Avada WordPress theme by implementing CSS

One of my acquaintances recently upgraded his Avada WordPress theme to the latest version of WordPress without physically uploading any files. However, after this upgrade, he noticed that the page titles (H1) no longer appear responsive as they did before. ...

csswordpress

Conceal Child Component Element Upon onClick Event with ReactJS

As someone new to React, I am learning by coding. Currently, I have component A which includes a select element with menu items (all material UI). Is it possible for the whole component to disappear once a user chooses an option from the dropdown? Essentia ...

javascriptcssreactjsmaterial-uimaterial-design

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

javascriptjquerycsshtml

`asp:button displaying without any CSS applied`

asp:Button does not respond to CSS styling. CSS: .TabButton { border: none; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } HTML5: <asp:Button runat="server" Text="Events" CssClass ="TabButton" ...

asp.netcsshtml