Tips for positioning the popup ul in relation to its parent li

How can the pop-up ul be positioned in the center of the parent li using CSS?

* {
  margin: 0;
  padding: 0;
}

#track-nav {
  margin-left: 50px;
  margin-top: 50px;
  float: left;
  width: 100%;
  list-style: none;
  font-weight: bold;
  margin-bottom: 10px;
}

#track-nav li {
  float: left;
  margin-right: 10px;
  display: block;
}

.track-nav-menu {
  display: inline-block;
}

#track-nav ul {
  list-style: none;
  position: absolute;
  display: none;
  opacity: 0;
  -webkit-transition: 0.25s linear opacity;
  padding-bottom: 2px;
}

#track-nav ul li {
  float: none;
}

#track-nav ul a {
  white-space: nowrap;
  display: block;
}

#track-nav li:hover ul {
  display: block;
  opacity: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

#track-nav li:hover ul li {
  padding: 10px 10px 0 10px;
}

#track-nav li:hover ul:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 35px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: #fff transparent;
}

#track-nav li:hover ul:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  right: 13px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1) transparent;
}

#track-nav li:hover a {
  white-space: nowrap;
}

.clearfix_track:after {
  content: "";
  display: table;
}

#track-nav li:hover ul a {
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.075s linear;
  white-space: nowrap;
}
<div id="main">
  <div id="track" class="container">
    <nav class="nav-menu">
      <ul id="track-nav" class="clearfix_track">
        <li>
          <a href="/">Main</a>
          <span>&gt;&gt;</span>
        </li>
        <li>
          <a class="consum" href="/product/catalog">Matherials</a><span>&gt;&gt;</span>
          <ul>
            <li>First gdgsfgs dfghdsfh</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fouth</li>
            <li>Fifth</li>
          </ul>
        </li>
        <li>
          <a href="/cat/zhestkie-listovye-materialy">Color pencils</a><span>&gt;&gt;</span>
          <ul>
            <li>White pencil</li>
            <li>Red pencil</li>
            <li>Green pencil</li>
            <li>Blue pencil</li>
          </ul>
          <span>&gt;&gt;</span>
        </li>
        <li>
          <a href="/cat/listovoi-pvh">Color paper</a>
          <span>&gt;&gt;</span>
          <ul>
            <li>fdfd</li>
            <li>dfdf</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>

htmlcss

Answer №1

To create the dropdown menu, you will have to apply the translateX and left properties to the ul element, as well as add position:relative to the parent li.

* {
  margin: 0;
  padding: 0;
}

#track-nav {
  margin-left: 50px;
  margin-top: 50px;
  float: left;
  width: 100%;
  list-style: none;
  font-weight: bold;
  margin-bottom: 10px;
}

#track-nav li {
  position: relative;
  padding-bottom: 15px;
  float: left;
  margin-right: 10px;
  display: block;
}

.track-nav-menu {
  display: inline-block;
}

#track-nav ul {
  list-style: none;
  position: absolute;
  display: none;
  opacity: 0;
  -webkit-transition: 0.25s linear opacity;
  padding-bottom: 2px;
  min-width: 150px;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
}

#track-nav ul li {
  float: none;
  padding: 0;
}

#track-nav ul a {
  white-space: nowrap;
  display: block;
}

#track-nav li:hover ul {
  display: block;
  opacity: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

#track-nav li:hover ul li {
  padding: 10px 10px 0 10px;
}

#track-nav li:hover ul:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: #fff transparent;
  transform: translateX(-50%);
}

#track-nav li:hover ul:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1) transparent;
  transform: translateX(-50%);
}

#track-nav li:hover a {
  white-space: nowrap;
}

.clearfix_track:after {
  content: "";
  display: table;
}

#track-nav li:hover ul a {
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.075s linear;
  white-space: nowrap;
}
<div id="main">
  <div id="track" class="container">
    <nav class="nav-menu">
      <ul id="track-nav" class="clearfix_track">
        <li>
          <a href="/">Home</a>
          <span>&gt;&gt;</span>
        </li>
        <li>
          <a class="consum" href="/product/catalog">Materials</a><span>&gt;&gt;</span>
          <ul>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
            <li>Fourth item</li>
            <li>Fifth item</li>
          </ul>
        </li>
        <li>
          <a href="/cat/color-pencils">Color Pencils</a><span>&gt;&gt;</span>
          <ul>
            <li>White pencil</li>
            <li>Red pencil</li>
            <li>Green pencil</li>
            <li>Blue pencil</li>
          </ul>
          <span>&gt;&gt;</span>
        </li>
        <li>
          <a href="/cat/color-paper">Color Paper</a>
          <span>&gt;&gt;</span>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</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

Issue with Firefox hover effect not applying transform:scale

I'm experiencing some difficulties with the border colors when using transform:scale on my element. I want to find out if there is a known solution to this issue. Removing the scale animation resolves the problem and the borders return to normal. I ha ...

htmlcssfirefox

The vertical writing mode is causing boxes to stack in an unexpected direction

I am encountering an issue with three div elements that have a writing-mode of vertical-rl. Despite setting the writing mode to vertical, the block stacking context is not being displayed from left to right as expected, but rather stacking inline. CSS .v ...

csstextlayout

divs aligned at the same vertical position

Struggling for days to align buttons vertically, I have tried various approaches without success. I attempted using position: absolute; bottom: 0; on the parent with position: relative; set. @import url('https://fonts.googleapis.com/css?family=Mon ...

htmlcss

Adjusting the background color of <tr> depending on the number of <tr> elements in the HTML using CSS

When working on my HTML page, I have utilized multiple <tr> tags with different bgcolor values such as: <tr bgcolor="#000000"> <tr bgcolor="#E5F1CC"> <tr bgcolor="#D30A0A"> <tr bgcolor="#656766"> I am aiming to assign unique ...

javascripthtmlcss

Looping in jQuery: Tips for Improving Performance

In my popup window, I have a JavaScript function that utilizes jQuery to retrieve checked checkboxes from the parent window. It then uses jQuery again to access associated data from hidden fields in the parent window for each checkbox. var chked = $(&apos ...

javascriptjqueryhtmlasp.net

Tips on connecting data within a jQuery element to a table of data

I am currently developing a program that involves searching the source code to list out element names and their corresponding IDs. Instead of displaying this information in alert popups, I would like to present it neatly within a data table. <script> ...

javascriptjqueryhtmlasp.nethtml-table

What causes the disruption of vertical alignment among inline-block elements when using overflow:hidden?

Take a look at these two JSFiddles: http://jsfiddle.net/am28dsbz http://jsfiddle.net/am28dsbz/1/ Why is it that the first one shows my text aligned correctly, while the second one displays the first link lower than the second? Stack Overflow requires m ...

css

Place the division at the bottom of the screen

I'm facing an issue where I am trying to place a div at the bottom of the viewport but it's not working as expected. Here is how my current setup looks like: html <div class="parent"> <div class="bottom"> </div> </div&g ...

jqueryhtmlcss

Is there a way to use jQuery draggable to move a zoomed image within a div clipping mask?

Looking to enhance user experience, I am developing an interface that allows users to zoom in on an image and move the zoomed version within a clipping mask div. I have created a div with dimensions of 200px by 200px and set overflow: hidden. Then, I inse ...

jqueryhtmldraggableclipping

Tips on avoiding blurring when making an autocomplete selection

I am currently working on a project to develop an asset tracker that showcases assets in a table format. One of the features I am implementing is the ability for users to check out assets and have an input field populated with the name of the person author ...

javascriptjqueryhtml

Are iFrames being utilized for third-party applications?

I am looking to create a web application that can be extended by other developers with their own applications. Would using iFrames, similar to how Facebook does it, be the best approach? Is this considered a good practice in web development? Are there a ...

javascriptpythonhtmlruby

Comparing GET and POST actions in mod_rewrite search form

Hey there, thank you for taking the time to address this query. I have implemented a live search form using jQuery on my website. The search bar is present on every page and functions well. Now, I am looking to enhance its functionality. When users press ...

phphtmlmod-rewrite

What is the best way to apply a semi-transparent background to my navigation bar, while maintaining a blue background across my entire page?

Currently, I have a background set for my website along with a navigation bar that displays my name and additional information. I am looking to make the background of this navigation bar semi-transparent so that it is possible to see through it. I tried ...

htmlcss

Generate div elements corresponding to individual objects

Previously, I inquired about a similar issue but have not come across any solutions. I made updates to my code, which is now functioning well, however, I am facing a new dilemma. Here is the PHP code I am currently working with: class individual { pu ...

phphtmlclassobject

Change the colors of a dynamic row in an HTML table using various options

I have successfully implemented a dynamic table using HTML and JavaScript. However, instead of applying alternate row colors, I want to assign a unique color to each row. How can I achieve this? <!DOCTYPE HTML> <html> <head> ...

javascriptjqueryhtmlcss

Trouble displaying complete image (ReactJS, CSS)

I am looking to create a visually stunning landing page that covers the entire screen, showcasing a captivating image. However, I have encountered an issue where only a portion of the image is visible due to additional divs being created. Here is what my ...

htmlcssreactjs

Implementing jQuery to enable the selection of multiple options depending on user input

Assume that when the people input value is 1, then the options for values 1 and 2 will be selectable. However, if the people value is greater than 1, then all other options will become selectable. Is it feasible to enable multiple select options based on ...

jqueryhtmlformsinput

Is the CSS parser malfunctioning?

My program is designed to scan css files using the jar cssparser-0.9.5.jar and perform various operations on the data. public static Map<String, CSSStyleRule> parseCSS(String FileName) throws IOException { Map<String, CSSStyleRule> rul ...

javacss

Improving the style of Google Maps InfoWindows for right-to-left languages

I'm currently working on a Google Maps marker infowindow and trying to adjust the padding specifically for RTL languages. Here's what I've attempted so far: google.maps.event.addListener(marker, 'click', function () { i ...

javascriptjquerycssgoogle-maps

How to retrieve video duration in Angular 2 before uploading the file

Is there a way to retrieve the video duration before uploading it in Angular2? I am looking for a solution without using jQuery. Here is the code snippet I have so far: <input type="file" class="form-control" ng2FileSelect [uploader]="uploader" accept= ...

htmlangularfile-upload