Is there a way to modify the drop-down button so that it can display the links from the side while keeping the button fixed in place?

https://i.stack.imgur.com/ftj6w.pnghttps://i.stack.imgur.com/VuCDo.png

[I am new to creating websites and any assistance is welcomed.] This code snippet is used to display dropdown button links in a list format. My goal is to make the links appear on the right side of the button when hovering over "More about Us".

[HTML]
<div class="Links">
    <div class="dropdown">
  <button class="dropbtn">More About Us</button>
  <div class="dropdown-content">
    <a href="#">Employees</a>
    <a href="#">What we do</a>
    <a href="#">FAQ</a>
  </div>

</body>
</html>

[CSS]
/* Dropdown Button */
.dropbtn {
  background-color: brown;
  color: white;
  padding: 10px;
  font-size: 40px;
  border: outset;
  font-family: Agency FB;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #B9DADC;}
htmlcss

Answer №1

Alright, if I understand correctly now, you can solve this by adjusting the position of the .dropdown-content.

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


/* Dropdown Button */
.dropbtn {
  background-color: brown;
  color: white;
  padding: 10px;
  font-size: 40px;
  border: outset;
  font-family: Agency FB;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  /*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
  left: 100%;
  top:0;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #B9DADC;}
<html>
      <body>
        <div class ="Links">
        <div class="dropdown">
      <button class="dropbtn">More About Us</button>
      <div class="dropdown-content">
        <a href="#">Employees</a>
        <a href="#">What we do</a>
        <a href="#">FAQ</a>
      </div>
    
    </body>
    </html>

I see now that you want the links displayed all in line. To achieve this, you need to set a fixed width for .dropdown-content like :

width: 350px;

and change the display property of an element, like

display: inline-block;


/* Dropdown Button */
.dropbtn {
  background-color: brown;
  color: white;
  padding: 10px;
  font-size: 40px;
  border: outset;
  font-family: Agency FB;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  /*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
  left: 100%;
  top:0;
width:350px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
display:inline-block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #B9DADC;}
<html>
      <body>
        <div class ="Links">
        <div class="dropdown">
      <button class="dropbtn">More About Us</button>
      <div class="dropdown-content">
        <a href="#">Employees</a>
        <a href="#">What we do</a>
        <a href="#">FAQ</a>
      </div>
    
    </body>
    </html>

This may not be the perfect solution, but it's the only one that comes to mind right now. You could experiment with

display: flex;

by adding it to the .dropdown-content and then adjusting child elements accordingly.

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

Trouble displaying data with Angular 6 JSON object pipe

Having an issue with displaying tasks from a MongoDB project schema in HTML. The tasks are stored in a nested array and I want to show the task name and description. Here's the code: <div class="card-body"> {{project.taskName | json}} </ ...

htmljsonangularmongodb

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

javascriptjqueryhtmlcss

Display the iframe website without it being visible to the user

Is there a way to load a separate website, such as a Wikipedia article, in an iframe on a webpage without freezing up the whole page when it becomes visible after clicking a "show" button? And if not, how can we display a loading gif while the iframe is ...

javascriptjqueryhtml

Steps for shaping the dialog of Material-UI to fit an image

Is there a way to adjust the size of the dialog box to match that of the image? https://i.stack.imgur.com/pXtXg.png I've also tried changing the background color to transparent without success. https://i.stack.imgur.com/Hjx2x.png ...

htmlcssreactjsdialogmaterial-ui

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss

The menu on the webpage in smartphone mode is infiltrating other divs on the page

Encountering an issue with the TwitterBootstrap CSS menu on this page when viewed on a smartphone: The div containing the menu does not resize its height, causing it to invade the content below when the "Menu" is clicked. I've been unable to find a ...

htmlcsstwitter-bootstrap

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Currently, I am retrieving JSON data from an API and then displaying this data in an HTML table using plain JavaScript. My goal is to dynamically add a button at the end of each row for additional functionality, but so far, I have been unable to figure out ...

javascripthtmlhtml-table

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

javascripthtmlcssangularjsangular-ui-bootstrap

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

{"success":true} however, fineuploader displays an error

{"success":true} is returned by the php server script, indicating successful file upload but fineuploader displays an error message in red on the webpage. Upon checking the console, the following error was found: fineuploader-3.2.min.js: [FineUp ...

phpjqueryhtmlcodeigniterfine-uploader

A minimalist web page appearing as blank in Internet Explorer

After testing my simple web page in various browsers, I discovered that it only showed a blank white page in Internet Explorer. I combed through my CSS code and identified background = rgba(some stuff) as the unsupported line by IE. However, this particula ...

htmlcssinternet-explorer

Accessing a variable from another HTML using JavaScript

I'm currently attempting to access a variable from another HTML file using JS. Specifically, I have a file (file1.htm) that opens a dialog box, and I want to send the information of the selected file to another file (file2.htm) in order to modify a v ...

javascripthtml

What is the best way to show emojis in AngularJS?

Recently starting to work with angularjs, I've incorporated "emoji-min.js" and "emoji-min.css" into my project as an attempt to display emojis within a text field. Despite my efforts, the emojis are not displaying as intended. Here is a snippet of my ...

htmlangularjsemoji

What is the best way to style the header of a table when scrolling in CSS?

Currently, I am facing an issue with applying the top CSS property to the thead element of a table while scrolling. I have attempted various methods but have been unsuccessful in achieving the desired outcome. Initially, I used the scroll event, however, ...

javascriptjqueryhtmlcss

Which file extension is superior for SEO: .html, .php, or .aspx?

Which file extension is more SEO-friendly: .html, .php, or .aspx? Or is an extension-less URL the best option for SEO? ...

htmlxhtmlseofriendly-url

Personalize the styling of Material UI Tables - final element customization

I've been attempting to adjust the padding of the Material UI Table. The last-child element is receiving a 24px padding which I'm trying to modify. Despite my attempts at overriding the theme and using classes{{root: classes.xxx}}, I haven't ...

cssreactjsmaterial-ui

Is it possible to target elements based on a specific CSS3 property they use?

Is there a method to target all elements in the DOM with a border-radius other than 0? If anyone has suggestions, it would be greatly appreciated! ...

javascriptjquerycss

The value of Angular Input remains unchanged within a FormArray

I am experiencing an issue with the Sequence No in my PreprocessingForm's FormArray. When I add a new row, the Sequence No does not change as expected. <tr class="mat-row" *ngFor="let dynamic of PreprocessingForm.controls.arithmeticI ...

htmlangulartypescriptformarray

How about placing one element above another? What sets apart using the margin property versus the position property for achieving this effect?

As I pondered the concept of stacking context, a question arose in my mind. Through my readings, I learned that by not applying any CSS properties that create a stacking context (such as position), it is possible to stack elements on top of each other usin ...

csspositioncss-positionmargin

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

htmlcssfirefoxoverflow