Achieving Proper Alignment of Dropdown Menu in CSS

Currently, I am tackling the challenge of creating a responsive navigation bar. Despite my numerous attempts to troubleshoot, I am struggling to find a solution.

My current issues are as follows: 1) On wide screens, I aim to center the dropdown menu beneath its respective button title. 2) On smartphones/tablets, I want the dropdown menu to push down the other button titles when it appears, instead of overlapping them.

Regarding the first issue, I have experimented with adjusting the 'right' and 'left' attributes of the dropdown menu, but it remains stuck to the side of the screen regardless of any changes I make to the 'position' of the dropdown list and its parent element.

As for the second issue, I have played around with the 'position' property, but I still can't seem to get it to function as if it were static.

My preference is to resolve this using only HTML and CSS.

For a demonstration, visit: https://jsfiddle.net/SteliosKts/01o6cem5/10/

PS. Apologies if this is a repost; I simply cannot find a solution despite checking numerous related threads.

htmlcssdropdownnavigationbar

Answer №1

These steps are necessary:

  1. Take out the style position:absolute; from 
    .dropdownItem:hover .dropdownList
    .
  2. Replace display: block; with display: inline-block; in .dropdownList.
  3. Delete max-height: 55px from li:nth-child(n + 2)
  4. Introduce flex-basis: 30px; for mobile view.

css content goes here

html and other code goes here

Answer №2

To reveal the dropdown list on both large and small screens, simply eliminate the absolute positioning in the code snippet below:

.dropdownItem:hover .dropdownList {display: block;/*   position: absolute; */}

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

Implementing dynamic display of div based on dropdown selection in typescript

A solution is needed to display or hide specific div elements based on a dropdown selection using Typescript. Sample HTML file: <select class="browser-default custom-select"> <option selected>single</option> <option value="1"> ...

htmlangulartypescript

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...

cssreactjsresponsive-designleaflet

Looking for solutions to issues with Style errors and Visibility problems?

< table border="1" cellpadding="0" cellspacing="0" width="100%"> < tr> < td>1< /td> < td>1< /td> < td>1< /td> < td>1< /td> < td>1< /td> ...

htmlcsshtml-tablevisibility

Align images to the left in Typora for a cleaner look

Typora typically aligns all images in the center by default. https://i.stack.imgur.com/TrqIM.png In my search through the github.css, I was unable to locate any instances of img. $ grep img "/Users/me/Library/Application Support/abnerworks.Typora/themes ...

cssmarkdown

How to stop Bootstrap collapsible items from "shifting"

I recently integrated a Bootstrap collapse plugin to manage my list of common inquiries: https://jsfiddle.net/2d8ytuq0/ <ul class="faq__questions"> <li> <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a> ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the problem with locating elements in Selenium with Java?

I've been encountering difficulties in finding elements on a webpage structured like this: <tr id="filter100" style="...." idx=0 <td> <div onclick=... style=... <table dir = "fil"> <tbody> ...

javacssseleniumlocate

What is the best method for implementing border-radius on select2 elements?

I previously had a default bootstrap user select box with a border-radius style applied: <div class="container"> <select class="form-control" style="border-radius: 1rem;"> <option value="1">Us ...

htmljquerycssbootstrap-4jquery-select2

What is the technique for enabling a mouse click in the vicinity of an element?

During a presentation on React at a conference, I witnessed the speaker introduce a feature that allowed users to click and drag a divider on the screen by simply getting close to it instead of having to click directly on it. This concept adds to usabilit ...

htmlcssreactjsusability

Adjust the height of a div in JQuery to fit new content after specifying a height previously

I have a division element with an initial height of 0 and opacity set to zero, its overflow is hidden, and it contains some content. <div style='height: 0px; opacity: 0px; display: none; overflow: hidden; border: 1px solid #000;' id='myd ...

javascriptjqueryhtmloverflow

Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...

jqueryhtmlcsscheckbox

Ways to increase the font size of input text using bootstrap's css framework

I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...

csstwitter-bootstraptextbox

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss

What is the best way to extract the HTML input id using observeEvent in shiny?

How can I capture the HTML input id using observeEvent in shiny? shinyApp( ui = basicPage( HTML('<input type="button" name = "b1" value="Travel time"/>')), server = function(input, output, session) { o ...

htmlrshiny

Focusing on styling specifically for Chrome rather than Safari using SCSS

Is there a method to specifically target only Chrome browsers within a mixin in SCSS? @mixin { &:after { border-bottom:black; @media screen and (-webkit-min-device-pixel-ratio:0) { border-bottom: red; } } } Currently, this code targets bot ...

htmlcssgoogle-chromesafarisass

Adaptive design that uses identical HTML for both desktop and mobile versions

I'm currently working on a project using Bootstrap 4 to create a responsive design, but I'm facing some challenges. I managed to achieve the desired layout on CodePen, but I'm struggling to find a way to avoid repeating the code for both de ...

htmlcssbootstrap-4

Building a loading spinner component in a react-native project

I have successfully implemented a loading spinner that is currently being used in various components of my React project. However, as I am now working on a react-native version of the application, I am faced with the challenge of recreating this loading sp ...

javascriptcssreactjsnode.jsreact-native

Tips for enabling auto-scroll feature in MuiList

Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sen ...

javascriptcssreactjsmaterial-uistyled-components

Struggling to retrieve an integer value from user input?

Hey there! I am facing an issue where I receive data from a form via POST, and some fields need to be treated as integers. However, when I use: var_dump($_POST) All the data is returned as strings enclosed in double quotes, which I would like to remove. ...

phphtmljson

How to conceal hyperlink underline with css

This is some HTML Code I'm working with <a href="test.html"> <div class=" menubox mcolor1"> <h3>go to test page</h3> </div> </a> Here's the corresponding CSS: .menubox { height: 150px; width: 100%; ...

csshyperlinkhovertext-styling