Align the dropdown menu in the center of every navigation item

A div of exact dimensions, measuring 800px wide and 50px tall, contains an unordered list of 6 elements that are centered within the div. The alignment is currently working as intended.

My next goal is to create a dropdown list from each element. However, the second ul is currently aligned to the left side of the container div.

I am striving to center the dropdown list with each element while ensuring that the ul elements have varying widths. Below is the progress I have made so far: jsFiddle. Any recommendations?

#bar {
  width: 800px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  height: 50px;
  background-color: lime;
  position: absolute;
  top: 20px;
}
.test-navbar ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: ;
  text-align: center;
  font-family: sans-serif;
}
.test-navbar li {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
}
.test-navbar a {
  text-align: center;
  padding: 9px;
  margin: 0;
  display: block;
  text-decoration: none;
  color: #313131;
  font-family: 'Oswald', sans-serif;
  margin-top: 0px;
  font-size: 23px;
  background-color: ;
}
.test-navbar a:hover {
  color: #f50057;
}
.test-navbar ul ul {
  display: none;
  position: absolute;
  left: 0%;
  background: #fff;
  margin-left: 0px;
  text-align: center;
  width: 200px;
  line-height: 40px;
  padding: 10px;
}
.test-navbar ul ul li {
  float: none;
  width: 100%;
  background-color: ;
}
.test-navbar ul ul a {
  line-height: 0px;
  padding: 5px 5px;
  width: 100%;
  background-color: ;
}
.test-navbar ul li:hover > ul {
  display: block;
}
<div id="bar">
  <div class="test-navbar">
    <ul>
      <li>
        <a href="#">PASSION</a>
        <ul>
          <li><a href="">EXTRA FROM PASSION1</a></li>
          <li><a href="">EXTRA FROM PASSION2</a></li>
          <li><a href="">EXTRA FROM PASSION3</a></li>
          <li><a href="">EXTRA FROM PASSION4</a></li>
          <li><a href="">EXTRA FROM PASSION5</a></li>
          <li><a href="">EXTRA FROM PASSION6</a></li>
        </ul>
      </li>
      <li><a href="#">EXTRA AREA</a></li>
      <li><a href="#">VIDEO</a></li>
      <li>
        <a href="#">ANOTHER LINK</a>
        <ul>
          <li><a href="">EXTRA FROM PASSION1</a></li>
          <li><a href="">EXTRA FROM PASSION2</a></li>
          <li><a href="">EXTRA FROM PASSION3</a></li>
          <li><a href="">EXTRA FROM PASSION4</a></li>
          <li><a href="">EXTRA FROM PASSION5</a></li>
          <li><a href="">EXTRA FROM PASSION6</a></li>
        </ul>
      </li>
      <li><a href="#">LINK5 STYLE</a></li>
      <li><a href="#">BYE</a></li>
    </ul>
  </div>
</div>

htmlcss

Answer №1

To achieve the desired layout, you can combine relative and absolute positioning along with some transform techniques.

.example-navbar li {
  position: relative;
}
.example-navbar ul ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Check out the jsFiddle

Answer №2

Your question is a bit unclear, but it seems like you're looking to achieve a specific design effect. Check out this demo for reference:

If you want to learn how to create a similar dropdown menu, follow this tutorial:

Here is a JS Fiddle that showcases the HTML and CSS code needed for a dropdown menu:

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Movies <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">In Cinemas Now</a></li>
                    <li><a href="#">Coming Soon</a></li>
                    <li><a href="#">On DVD/Blu-ray</a></li>
                    <li><a href="#">Showtimes &amp; Tickets</a></li>
                </ul>
            </li>
            <li><a href="#">T.V. Shows</a></li>
            <li class="current-item"><a href="#">Photos</a></li>
            <li><a href="#">Site Help</a></li>
        </ul>
    </nav>
</div>

Remember to style your dropdown menu by using the provided CSS code:

body {
    background:#bf5c71 url('body-bg.jpg');
}

.clearfix:after {
    display:block;
    clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}

/* Add more CSS styles for the dropdown menu as needed */

Answer №3

    /* CUSTOM NAVIGATION BAR */

.my-navbar {
    background-color: #333; 
    margin-bottom: 2px;
    height: 40px;
    color: white;
    border-radius: 10px;
} 

.my-navbar ul {
    list-style: none;
    overflow: hidden;

}

.my-navbar ul li {
    float: left;
    border-right: 2px solid #dede0e;
    font-size: 1.5em;

}
.my-navbar ul li a {
    color: white;
    display: block;
    text-decoration: none;
    padding: 6px 10px;

}
.my-navbar ul li:hover {
    background-color: #000000;

}

/* DROP DOWN SECTION */

.my-navbar ul ul {
    display: none;
    list-style: none;
    color: blueviolet;
    background: #a80000;
    position: absolute;

}
.my-navbar ul ul li {
    float: none;
    font-size: 1em;
    border: none;
    position: relative;
    top: 100%;
    left: 0;
    border-top:3px solid white;
}
.my-navbar ul ul li a {
    border-right: none;
    padding: 0 20px;
}
.my-navbar ul li:hover > ul
{
    display: block;
}

Give This a Shot

This custom navigation bar was crafted for a unique demo purpose.

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

What is the best way to place a semi-transparent black overlay on an image?

<html> <head> <style> #contain_main {background-color:black; width:100%; height:auto;} #main {width:100%; height:700px; background-image:url("https://www.sappun.co.kr/shopimages ...

htmlcss

Text using Bootstrap positioned to the right of the breadcrumb navigation bar

Currently, I am using the default theme with Bootstrap 3. I have implemented breadcrumbs as shown below: <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> < ...

csstwitter-bootstrap-3

"I recently started using Protractor and as per company policy, I am unable to utilize XPath. I am facing difficulties with the code below and would greatly appreciate any insights or assistance provided

I am looking for guidance on how to write automation test scripts for a small AngularJs application using the cucumber-protractor-typescript framework. As someone new to Angular applications, I am particularly concerned about creating reliable locators. B ...

csscss-selectorsui-automation

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

<table id="DataTable" border="1" ALIGN="center"> <tr ALIGN="center"> <th>name</th> <th>address</th> <th>number</th> <th>type</th> </tr> <tr class="tcat" *ngFor ...

javascripthtmlarraysangulardatatable

Dim the background for all elements except for one

Seeking a way to create a dimmed-background effect by adjusting the opacity of all elements on the page except for one specific element. I've experimented with using the :not() selector as well as jQuery selectors to exclude certain elements, but have ...

javascriptjquerycsssasscompass-sass

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

javascriptphphtmlcss

What is the reason behind Drupal 8 appending a GET variable to the end of each CSS file and resulting in a 404 error?

I've been struggling for hours trying to figure out why the CSS is not loading on the Drupal 8 site I'm migrating. Despite successfully resolving other issues, the CSS files are throwing a 404 error, specifically due to a GET variable (?oe62rp) a ...

phpcssdrupaldrupal-8

Deactivate a specific button within a row on a Primeng table by clicking on it

I'm trying to modify my primeng table so that each row has a button, and when I click on a button, only that specific button should be disabled. However, in my current code, all buttons are getting disabled with a single click. Can someone please help ...

htmlangulareventsprimengprimeng-table

After attempting to refresh the webpage with the F5 key, I noticed that the jQuery progress bar was not functioning properly. Additionally, the webpage failed to display any

Trying to implement a web loading bar using jQuery on my website was initially successful, but I encountered an issue when reloading the page with F5. The progress bar would not work and the webpage displayed only a white background. Below is the code snip ...

javascripthtmljquerycss

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

javascriptjqueryhtmlcss

What could be causing the unpredictable behavior of my Material UI Tabs component, where it seems to be overriding other

I am facing an issue with the styling of tabs in my React app dashboard that uses Material UI Tabs. Specifically, I have a tab in the dashboard that opens a modal for adding new users to the system. The modal itself also contains tabs, but no matter how I ...

cssmaterial-uitabsmodal-dialog

Enhancing a video tag with a mysterious dark mask

I'm looking for a way to darken a video in my hero section to make it easier to see the white menu items that are getting lost in the brightness. Any tips on how to achieve this using CSS or Bootstrap? <template> <section class="se ...

htmlcsstwitter-bootstrapbootstrap-5

Creating a dynamic webpage where multiple images are displayed on a single canvas using

I'm currently working on a chess project where I'm using a canvas to create the game board and draw 32 chess pieces on it. To update the screen when a piece moves, I've implemented requestAnimFrame. However, I'm facing an issue where th ...

html

When utilizing narrow resolutions, header letters may overlap each other

As I integrate bootstrap into my website, I've noticed that when the resolution is narrow, my header overlaps. If the header is of a small size, like the typical H1 size, everything looks fine. However, when using a larger size (see CSS below), the is ...

htmlcssfont-size

The navbar toggler icon is not displaying

<header class="container"> <div class="container pt-3 col-md-5 col-sm-5 col-xs-6 text-center"> <a href="#" class="site-logo"><img src="#"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Managing and Streaming Music in a Rails Application

Currently, I am storing mp3s using paperclip and they only play back if I utilize Amazon S3. However, I am hesitant to use Amazon S3 because I am unsure how to secure the files. Now, I am reconsidering my approach as I need to secure the mp3s and provide ...

javascriptruby-on-rails-3htmlmp3

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

javascripthtmlcssrotationcube

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

javascripthtmlshopify

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

$scope.categories = [ { "advertiser_id": "2", "tier_id": 1, "tier_name": "1", "base_cpm_price": "", "retarget_cpm": "", "gender": "", "location": "", "ageblock1": "", "ageblock2": "", "ageblock3": ...

javascripthtmlangularjsjson

ensuring that all items in the owl Carousel have equal heights

My current project involves creating an Owl Carousel. Here is the code I have implemented so far: <div class="owl-carousel owl-theme"> @foreach (var item in Model.Books) { <div class="item"> ...

htmlcssbootstrap-4owl-carouselowl-carousel-2