Step-by-step guide on creating a draggable navigation bar:

I am encountering an issue creating a droppable menu. I am currently working on Menu 1 but struggling to figure out how to make the drop-down menus appear on the right side.

<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css' />

<div class="nav">
  <ul class="menu" id="menu">
    <li> <a href="https://probapro2.blogspot.com/">home</a> </li>
    <li class=""> <a class="drop-ctg" href="#">category</a>
      <ul style="overflow: hidden; display: block; height: 0px; z-index: 1072; opacity: 0;">
        <li> <a href="#">Category 1</a> </li>
        <li> <a href="#">Category 2</a> </li>
        <li> <a href="#">Category 3</a> </li>
        <li> <a href="#">Category 4</a> </li>
      </ul>
    </li>
    <li class="">
      <a href="#">Menu 1</a>
      <ul style="overflow: hidden; display: block; height: 0px; z-index: 1069; opacity: 0;">
        <li class="dir">
          <a href="#">Menu 2</a>
          <ul style="overflow: hidden; display: block; height: 0px; z-index: 1070; opacity: 0;">
            <li style="margin-left:50px;"> <a href="#">Menu 3</a> </li>
            <li> <a href="#">Menu 3</a> </li>
            <li> <a href="#">Menu 3</a> </li>
          </ul>
        </li>
        <li class=""> <a href="#">Menu 2</a> </li>
        <li> <a href="#">Menu 2</a> </li>
        <li> <a href="#">Menu 2</a> </li>
      </ul>
    </li>
    <li> <a href="#">Menu 2</a> </li>
    <li> <a href="#">Menu 3</a> </li>
    <li> <a href="#">Menu 4</a> </li>
    <li> <a href="https://probapro2.blogspot.com/404">404 Error Page</a> </li>
  </ul>
</div>

Check out the JS fiddle for this code here.

I aim to create a droppable menu under Menu 1 with Menu 2 and further have Menu 3 displayed under the first instance of Menu 2.

htmlcss

Answer №1

If you want to achieve this effect with CSS, you can utilize the transform property along with the translate value. Here's an example:

*{
  margin:0;
  padding:0;
  outline:0; 
}
.nav {
  width:950px;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
  display:inline-block;
}
.menu {
  width:auto;
  list-style:none;
  font:$pagenavifont;
  text-align:center;
  margin:0 auto;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  width:auto;
  line-height:36px;
  padding:0 20px;
}

/* More CSS rules here */

.menu > li > ul {
  display: none;
}

.menu > li > ul > li > ul {
  transform: translate(100%,0);
  display: none;
  margin-top: -37px;
}

.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
  display: block;
}
<div class="nav">
  <ul class="menu">
    <li>
      <a href="https://example.com/">home</a>
    </li>
    
    <!-- More menu items -->
    
  </ul>
</div>

To make sure nested menus are displayed correctly, it's important to use the > selector in your CSS code when defining the display properties for these menus.

.menu > li > ul {
  display: none;
}

/* Adjust position for third-level menu */
.menu > li > ul > li > ul {
  transform: translate(100%,0);
  display: none;
  margin-top: -37px;
}

.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
  display: block;
}

Answer №2

When it comes to creating a dropdown menu, there are several key factors to consider. It seems like you are interested in developing a dropdown menu with nested submenus.

In order for each pop-out menu to function correctly, it must:

1) Determine the position of the parent element triggering the menu to ensure proper placement.

2) Calculate the appropriate location for the submenu based on the user's browser or screen position.

It is necessary to append the submenu to the right of the menu header that initiates its opening. Depending on any limitations you have, there are vanilla JS solutions available:

You can utilize techniques such as `position: relative;` and `position: fixed;` to properly position your nested menus next to their parent elements.

I would recommend carefully considering whether designing a custom nested dropdown menu aligns with your needs. There are well-established alternatives that have stood the test of time, offering flexibility in styling both menu headers and their child elements.

If you have any further inquiries, feel free to reach out!

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

Ways to troubleshoot and resolve the jQuery error with the message "TypeError: 'click' called"

I am currently developing a project for managing Minecraft servers, focusing on a configuration panel. I have set up a form that users need to fill out in order to configure the settings and send the values using Ajax. However, I encountered an error: Type ...

javascriptphpjqueryajaxhtml

How can I fix the issue with Parallax scrolling not functioning properly? (Using Next.js Image + Tailwind)

What am I missing to get parallax scrolling to work? <div className="h-screen"> <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat"> <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e86 ...

cssnext.jstailwind-cssparallax

Turn on the text field when the enter key is pressed

I've searched online for solutions, but none of them have resolved my issue. Upon loading my page, I am able to successfully have my JS file select the first textfield. However, I am struggling with getting it to proceed to the next textfield when th ...

javascriptjqueryhtml

Modifying the color of a non-active tab - Material UI Tabs

Is there a way to customize the color of inactive tabs in Material UI tabs? I have noticed that they currently appear black, as shown in the screenshot here: screenshot Thank you! ...

javascripthtmlcssreactjsmaterial-ui

What could be causing the last LI to drop onto a new line when floating UL to the right?

I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...

htmlcsscss-floathtml-lists

Navigate to the specific page using the router-link with the designated path

I have 10 different filters displayed in a table and I want each filter name to link to a specific page. Here is an example of my table row: <md-table-row v-for="(row, index) in manage" :key="index"> In the first cell of the table, I'm trying ...

htmlvue.js

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Is it feasible to hover over a nested child element without activating a hover effect on the parent element? In the demonstration below, you'll notice that even when hovering over the child, the hover effect on the parent is still in place. I am int ...

htmlcsscss-selectorshover

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

Why Changing the Width of a Flexbox Container Doesn't Impact Its Children?

Attempting to use TweenLite to animate the width of the blue sidebar down to zero, however facing an issue where the content breaks outside the parent's bounds. https://i.stack.imgur.com/4rEVr.png It is unusual for this to happen with Flexbox, given ...

javascriptcssflexboxgsap

Create a dynamic calendar by integrating dates with Javascript and an HTML table

Recently, I decided to delve into web design again and embark on a challenging project for my father's baseball business. The main task at hand is creating a detailed calendar using HTML tables. After spending a considerable amount of time perfecting ...

javascriptjqueryhtmlcsscalendar

Include previous input as a "phantom" thumbnail to the slider element of type "range"

https://i.stack.imgur.com/JnuCN.png Using a tutorial from w3schools, I have customized a regular range slider. The objective is to send a new value command to an external MQTT-based home automation system and display the previous value as a ghost-thumb in ...

javascripthtmlcssinputrange

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

The columns in the table are all displaying varying widths even though they have been defined with fixed table layout

I have a nested table displayed in my HTML, and I am attempting to set each column to be 50% width, but for some reason it's not working. In the past, whenever I've needed to accomplish this, applying table-layout: fixed has usually done the tri ...

cssangular

Ways to showcase a list in 3 columns on larger screens and 1 column on smaller screens

When viewing on a computer, my list appears like this: However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format. I am utilizing Bootstrap for my layout, and here is a snippet of my code: ...

javascriptcsssizescreen

What is the method for customizing the background color in a .vue file using Bootstrap?

Can anyone assist me in updating the background color of a div class from grey to white? The code is within a .vue file using Bootstrap and includes an enclosed SVG file. Here's the snippet: <div class="text-left my-3 bg-white"> <button var ...

htmlcssvue.jsvisual-studio-code

Organizing grid elements within the popper component

I am struggling to align the labels of options in the AutoComplete component with their respective column headers in the popper component: https://i.stack.imgur.com/0VMLe.png const CustomPopper = function (props: PopperProps) { co ...

javascriptcssreactjsmaterial-ui

Creating a dropdown menu and adjusting the content below

Feeling stuck in one place with my code here: link The side navbar animation is almost what I want, but clicking one option opens all of them. Hoping for a similar effect like this page: link $(document).ready(function() { $('.interfejs, .proces ...

jqueryhtmlcss

Issue with ng-pattern validation not functioning correctly on textarea in AngularJS

Attempting to validate a textarea that, if valid, will enable a specific button. Utilizing ngPattern for validation but encountering issues with implementation. Referencing the example code below: <div ng-app="test"> <form name="theForm" ng-contr ...

htmlangularjs

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

csstwitter-bootstrap-3

variances in CSS performance between local and remote hosting

My team and I are all using Internet Explorer 8 on Windows 7 Professional, with Visual Studio 2010 Premium. However, we have noticed that when running our application in localhost mode versus remote mode (on the server), there are differences in the CSS re ...

c#.netasp.netcss