Navigation Menu Dropdown Present on the Right Side and Arranged in a Horizontal Stack

I'm having trouble with a dropdown menu in my navigation bar. I followed the example on W3Schools but when I hover, the menu appears horizontally instead of vertically and to the far right of the page. I've searched for solutions but can't seem to find the issue in my code. Any assistance would be appreciated.

https://i.stack.imgur.com/rCtLz.png

/* nav */

nav {
  display: flex;
  flex-wrap: wrap;
  padding: .25rem 0;
  color: #ffffff;
  font: 30px 'Roboto', sans-serif;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}

nav a {
  display: block;
  margin: 0 40px;
}


/* dropdown container */

.dropdown {
  float: none;
  position: relative;
  overflow: visibile;
}


/* dropdown button */

.dropdown .dropbtn {
  display: flex;
  font-size: 30px;
  border: none;
  outline: none;
  color: #ffffff;
  padding: inherit;
  background-color: inherit;
  font-family: inherit;
  margin: auto;
}


/* dropdown content (hidden by default */

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  background-color: #ffffff;
  width: 250px;
  left: calc(50% - 125px);
}

.dropdown-content>a {
  color: black;
  text-align: left;
  border-bottom: 1px solid #009EDB;
}


/* show dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  float: left;
  margin: 0;
}
<nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">
                        Work
                    </button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

htmlcssnav

Answer №1

Your dropdown menu is currently structured with anchor (link) tags, which are inline elements by default. To change the layout to appear vertically, you can modify these elements to display as "block" by adding the CSS property display: block to the styling of the dropdown links:

nav a {
  margin: 0 40px;
  display: block;
}

The 'margin' property was already set for these elements.

I have removed the unnecessary use of "!important" in your styles and restyled the triggering element to have red text instead of a white space to improve visual clarity when triggering the dropdown menu.

However, it seems that the dropdown menu is not behaving as expected in terms of being styled far right. Currently, it appears directly below the triggering element due to the specified margin of 40px. On smaller screens, this may give the illusion of being far right.

/* CSS Styles */
/* nav */
nav {
    display: flex;
    flex-wrap: wrap;
    padding: .25rem 0;
    color: #ffffff;
    font: 30px 'Roboto', sans-serif;
    margin: auto;
    justify-content: center;
    overflow: hidden;
}

nav a {
    margin: 0 40px;
    display: block;
}

/* dropdown container */
.dropdown {
    float: none;
    overflow: hidden;
}

/* dropdown button */
.dropdown .dropbtn {
    display: flex;
    font-size: 30px;
    border: none;
    outline: none;
    color: red;
    padding: inherit;
    background-color: inherit;
    font-family: inherit;
    margin: auto;
}

/* dropdown content (hidden by default */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: inherit;
    width: 100%;
}

/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
<nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">Work</button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

Answer №2

A solution for problem number 1 was found using Rody of the Frozen Peas answer.

Addressing Problem number 2: The goal is to center align the dropdown-content in relation to its parent element. To achieve this, you need to shift the dropdown-content to the left by half of its width and then slightly to the right by half of the dropdown's width. It is important that the dropdown element is positioned relatively to prevent the dropdown-content from being positioned relative to the entire document. In order to ensure the visibility of the dropdown-content, set both the dropdowns and nav bars to overflow visible.

nav {
    overflow: visible;
}

.dropdown {
    position: relative;
    overflow: visible;
}

.dropdown-content {
    position: absolute;
    width: 250px;
    left: calc(50% - 125px);
}

The key concept behind this approach is aligning the center of the dropdown-content with the left side of the dropdown by setting left: -125px, effectively shifting it to the left by half of the dropdown-content's width. To further align it with the center of the dropdown, adding 50% ensures that it utilizes the parent's width as a reference point, with 50% representing the center of the parent element.

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

Is it possible to integrate external search functionality with Vuetify's data table component

I am currently working with the v-data-table component from Vuetify, which comes with a default filter bar in its properties. This table retrieves data from a local JSON file. The issue arises when I have another external component, a search bar created u ...

javascripthtmljsonvue.jsvuetify.js

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

My issue involves several radio inputs where clicking one should reveal a hidden div containing information. However, when this div appears, it overlaps with the footer instead of staying positioned between the footer and radio input as intended. I am str ...

javascripthtmlcss

Components will be displayed without any gaps on smaller screens

I attempted to apply styles to two components in order to create space between them, visible on both larger and smaller displays. The code snippet appears as follows: <div> <CustomPageHeader pageTitle={t('offersPage.pageHeader')} ...

cssreactjsmaterial-ui

Steps to create a "reset fields" option for specific input fields

Is there a way to create a link that clears the input fields in a specific column? I have managed to style a button to look like a link: <input type="reset" value="clear fields" style=" background:transparent; border: none; color:blue; cursor:pointer"& ...

htmlcss

Incorporating local JSON data into HTML: A Step-by-Step

I'm completely new to javascript and the utilization of json. What I want to accomplish is quite straightforward, although I am encountering difficulties. My objective is to create a website consisting of two pages: one that showcases artists and ano ...

javascripthtmljson

By utilizing the <tr> element, one can enhance the border thickness by 1 pixel

Is it possible to ensure that row selection in a table is consistent in terms of border alignment on both sides? https://i.stack.imgur.com/qmZiQ.png If you have any suggestions or solutions, please share them. Thank you! table { margin: 10px; bord ...

htmlcsshtml-tableborder

The error code 13:5 indicates that the "Home" component has been registered in the Vue application but is not being used, leading to the error message "vue/no-unused-components"

I encountered this issue while working with Vue for the first time. I was attempting to construct a website using Vue/CLI by reorganizing and building from the inside out. However, I am unfamiliar with Vue and unsure how to resolve this error. The changes ...

javascripthtmlcssvue.js

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

How to position a <div> in the center of a popup <div>

I've encountered a problem trying to center a <div> within another <div> that pops up when a button is clicked. It's not my code, but it's similar. Here is the HTML: <div class="popup"> <div class="options"> ...

htmlcss

Having trouble fetching information from form in a basic node.js program

Hey, so I'm not exactly a pro at backend development, but I gave it a shot and came up with this straightforward program: Here's my HTML file: <!DOCTYPE html> <head></head> <body> <form action = "http://lo ...

htmlnode.jsforms

Retrieve information from the table and display it in a reverse order

Below is a link to view the table in my database: click here I want to retrieve and display the names of users whose user_group is "member". I plan to put their ratings in an array and then print their names in descending order based on their rating. For ...

phphtmlmysqlsql

Equal-height rows and columns using Flexbox

I've been working on a row layout with two columns, each set to 50% width. The left column contains an image, while the right column displays text. Here is my HTML: .row{ display:flex; ...

htmlcssflexbox

Issues with Vue-select dropdown functionality are causing inefficiencies

I am utilizing vue-select to generate a standard drop-down menu. However, it comes with a search bar by default that I do not need and prefer to keep it simple. I attempted to hide the search bar by using "display: none" which made it disappear. This is t ...

htmlvue.js

There are no elements displayed beneath the div

If you're short on time, let me explain my point with an image: Here is the HTML code I am working with: <div align="center"> <div class="img-container"> <div class="myconatiner"> <h2>Headline< ...

csshtml

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Within my code, I have a designated DIV element that serves as the root node for applying knockout bindings like so: ko.applyBindings(viewModel, document.getElementById('myContainerDiv')); In all of my viewmodel types, there is a generic post m ...

javascripthtmlknockout.jsjquery-blockui

Seems like the ng-show events inside are not being triggered, almost like an invisible image

I am encountering an issue where no JavaScript events are triggering inside an ng-show div in my code. You can access my code through the following link on Plnkr: http://plnkr.co/edit/kGqk8x?p=preview Upon loading data from JSON, I set ng-show to true. Ho ...

javascripthtmlangularjsjsonajax

What are the steps to developing a responsive tile using HTML and CSS?

I am exploring the functionalities of CSS and responsive design. To better understand how it works, I created a simple example which can be accessed here. This demonstration showcases a basic tile template. My goal is to display my tiles in 2, 3, 4, or m ...

htmlcssresponsive-design

Material Design Forms in Angular: A Winning Combination

I'm currently working on developing a form using Angular Material. This form allows the user to update their personal information through input fields. I am utilizing "mat-form-field" components for this purpose. However, there are certain fields tha ...

javascripthtmlangularformsangular-material

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Hello there! I've integrated full calendar into my Angular project and I'm facing a challenge. I want to restrict users from defining the duration of an event by holding click on an empty schedule in the weekly calendar, where each date interval ...

javascripthtmlangulartypescriptfullcalendar

Guide to transforming Tailwind CSS into a class and saving it in a CSS document

Recently, I implemented Tailwind CSS to style my application. It has been a helpful tool, but I am looking to consolidate all the CSS into one file for better organization. I want to keep it separate from the HTML code. My attempt to convert the following ...

cssreactjstailwind-css