Altering the standard positioning of a dropdown menu options

I created a CSS-only dropdown menu with a simple snippet:

.menu-container {
  width: 60px;
  float: right;
  border: 1px solid #999
}

.menu-container .menu {
  display: none;
  list-style: none;
  position: absolute;
  min-width: 80px;
  margin: 0;
  padding: 0
}

.menu-container:hover .menu,
.menu-container .menu:hover {
  display: block
}

.menu-container .menu li {
  border: 1px solid #999;
  text-align: right
}
<div class="menu-container">
  Go to...
  <ul class="menu">
    <li>
      <a href="#">Item #1</a>
    </li>
    <li>
      <a href="#">Item #2</a>
    </li>
    <li>
      <a href="#">Item #3</a>
    </li>
  </ul>
</div>

The menu is aligned to the right edge of the page. I'm looking to have the list items align to the right of the title "Go to...", similar to the image below:

https://i.sstatic.net/22WIj.png

I want the menu to expand based on the length of the list item text, preventing horizontal scrolling. Any suggestions on how to achieve this? Feel free to suggest changes to the HTML structure if necessary.

Appreciate any assistance!

htmlcss

Answer №1

Adjust the right property for the .menu element.

Example:

.menu {
  right: 8px;
}


.menu-container {
  width: 60px;
  float: right;
  border: 1px solid #999
}

.menu-container .menu {
  display: none;
  list-style: none;
  position: absolute;
  min-width: 80px;
  margin: 0;
  padding: 0;
  right: 8px;
}

.menu-container:hover .menu,
.menu-container .menu:hover {
  display: block
}

.menu-container .menu li {
  border: 1px solid #999;
  text-align: right
}
<div class="menu-container">
  Go to...
  <ul class="menu">
    <li>
      <a href="#">Item #1</a>
    </li>
    <li>
      <a href="#">Item #2</a>
    </li>
    <li>
      <a href="#">Item #3</a>
    </li>
  </ul>
</div>

Hopefully, this solution is beneficial!

Answer №2

Primarily, if that is your intention, I would recommend assigning 

.menu-container { position: relative; }
so that the position of the .menu relates to it. Once this is done, simply include .menu { right: 0; } to make it expand towards the left.

As a side note: It is generally seen as poor practice (although acceptable) to leave out the semi-colon after the last declaration in a CSS block.

.menu-container {
  width: 60px;
  float: right;
  border: 1px solid #999;
  position: relative;
}

.menu-container .menu {
  display: none;
  list-style: none;
  position: absolute;
  min-width: 80px;
  margin: 0;
  padding: 0;
  right: 0;  
}

.menu-container:hover .menu,
.menu-container .menu:hover {
  display: block;
}

.menu-container .menu li {
  border: 1px solid #999;
  text-align: right;
}
<div class="menu-container">
  Go to...
  <ul class="menu">
    <li>
      <a href="#">Item #1</a>
    </li>
    <li>
      <a href="#">Item #2</a>
    </li>
    <li>
      <a href="#">Item #3</a>
    </li>
  </ul>
</div>

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

Using JQuery and CSS to handle multiple hyperlink links with a single action

UPDATE: Issue resolved, thanks for the help. It is working fine now: http://jsfiddle.net/c3AeN/1/ by Sudharsan I have multiple links on my webpage, all in a similar format like this: note: When I say 'similar format', I mean that all links share ...

javascriptjqueryhtmlcss

Determining the Desired CSS Style with Target Label

Seeking advice on how to target the label for an input using css3. I attempted the following method: input[type="text"]:focus label:target { color:orange !important; } Unfortunately, it doesn't appear to be working. Is this something that can on ...

jquerycsscss-selectorstarget

Click on the 'appearance' dropdown menu while using Safari or Chrome on a Mac computer

Struggling to achieve uniform appearance for the select box across all browsers and devices? It seems like IE 10 and Microsoft Edge are giving you trouble with the appearance property. Any suggestions on how to fix this issue would be greatly appreciated. ...

htmlcssmacosgoogle-chrome

Ways to reduce the width of a flex box

I am facing an issue with my main container where I have two items placed on the same line. Item 1 is an image linked to a URL and it should be positioned at the far left of the container. On the other hand, item 2 contains a font awesome icon that needs t ...

htmlcssfont-awesome

Utilizing jQuery/Ajax to send an ID parameter to a PHP script

This code is where the user interacts. <html> <head> <title></title> <script src="jquery-1.9.1.js"></script> <script src="jquery.form.js"></script> </head> <body> <?php include 'con ...

javascriptphpjqueryhtmlajax

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

I am looking for a way to color individual Tree Items in a treeView based on specific conditions. I found a promising answer, but unfortunately, I am struggling to implement it. You can check out the answer here. My main obstacle is understanding how to u ...

cssjavafxtreeview

The graph created in an HTML format within an rmarkdown document appears too tiny when exported

Currently, I'm attempting to generate an HTML graph in a PDF output using rmarkdown: --- title: "Test report" output: pdf_document always_allow_html: yes params: plot: NA --- {r, echo=FALSE,message=FALSE, fig.height=4, fig.width=10, fig.show=&apo ...

htmlrpdfr-markdownplotly

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...

javascripthtmlcssvue.js

The component's div does not respond to the max-width attribute

I'm currently facing an issue with my chart component in a view. I've been trying to reduce its size using max-width property but it doesn't seem to be working. Below are the relevant code snippets: <div id="chart"> < ...

htmlcssvue.js

Styling HTML divs to fit together like a puzzle in CSS

I'm attempting to fit these divs together like a jigsaw puzzle. My goal is to position div 4 between div 1 and 3. Currently, div 4 starts below div 3. What would be the solution to make the divs seamlessly fit into each other? <div style='ove ...

css

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

javascriptphpjqueryhtmlcss

particular shade for button border and background

I'm looking to create a button using Material UI that has a specific design. Right now, I've only been able to achieve this: https://i.stack.imgur.com/xvv7s.png Here is the code I am currently using. If anyone can help me identify what I'm ...

cssmaterial-ui

Is there a chance that unused fonts included in @font-face are still being requested by browsers?

Curiosity Do browsers fetch and download all the files specified in @font-face declarations or do they grab only the ones referenced in stylesheets? For Instance Imagine I have these 3 @font-face declarations: @font-face { font-family: 'A'; ...

cssfontswebfonts

CSS functioning properly on Localhost, but encountering issues on the Server

I am encountering an unusual issue. After developing a website using ASP.NET The problem I am facing is : While the website works perfectly on my local server and all pages display correctly, once I uploaded the files to my GoDaddy hosting account, the ...

cssasp.netweb-hosting

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

Create a CSS style to set the background with a half height positioned behind the

I am looking to create a div with a background and overlay effect. Here is what I have done so far: https://i.sstatic.net/hVkBd.jpg I want it to look like this: https://i.sstatic.net/rQvcm.jpg body { background: blue; } .wrap { height: 300px; wi ...

htmlcss

The font color fails to change when hovering over

I'm experiencing an issue with the styling of my input box. When the user starts typing, a div containing a list of possible clubs is displayed. Currently, I am having trouble with the .clubLink:hover class and its background color. CSS: <style& ...

jqueryhtmlcss

Having trouble with transitions in CSS using React.js?

I am facing an issue with a CSS property transition that is set to height 3s, but it's not working as expected. The context is within a React.js application. Despite my attempts, there is no smooth transition effect on the height when triggered. Her ...

javascripthtmlcssreactjs

Two adjacent divs merge into the following div

Hey everyone, I'm facing an issue that I can't seem to figure out. I know it's probably something very simple, but as a beginner, I'm struggling... Every time I use the float:left command, the elements with classes .con-icon and #con-i ...

htmlcss

The flexibility of the flex-wrap property does not extend to affect nested elements

Check out this example first: http://jsfiddle.net/8ofrs0y7/14/ <div class="flex-group"> <ul class="flex-container red"> <li class="flex-item"&g;1</li> <li class=&qu ...

htmlcssflexbox