Altering the width of an unordered list (<ul>) to fit menu items with the help of jQuery

I had previously asked a question that I need further assistance with: Fitting a <ul>'s width to accommodate the menu items

Is there a way to use jQuery to adjust the width of each <ul> within a specific parent <ul> so that the <li> items do not overflow? The structure of the menu is similar to this:

<ul id="menu">
  <li>
    <a href="javascript:;">Menu 1</a>
    <ul>
      <li><a href="javascript:;">Item 1<a></li>
      <li>
        <a href="javascript:;">Subitem 1</a>
        <ul>
          <li><a href="javascript:;">Subsubitem 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

If the width of the <ul> is not adjusted properly, it can cause layout issues like the one shown in this image:

https://i.sstatic.net/zmwx8.jpg

You can visit the website I'm working on here for more details on the CSS and overall site structure.

jqueryhtmlcssxhtmlmenu

Answer №1

The width issue actually originates from the width set at the top level in this section:

ul#menu > li {
  display: block;
  float: left;
  background: url(img/menuitem.png) top left;
  width: 104px;                                 /* this is where the problem lies */
  height: 36px;
  margin-right: 1px;
  text-align: center;
  position: relative;                           /* include this */
}

Because a width is defined, and its child element is within the normal flow, the child is adhering to its width instead of resizing independently. To remedy this, you can remove the child from the flow by adding position: realtive; as seen in the above style, and then assign <ul> inside the child a position: absolute, as shown here:

ul#menu > li ul {
  position: absolute;
  top: 36px;              /* top <li> is 36px, align downwards by that amount */
}

Lastly, to ensure the anchor text receives a full background, apply a white-space rule like so:

ul#menu > li > a, ul#menu > li > ul a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

Here's the expected outcome: https://i.sstatic.net/WsAyz.jpg

Answer №2

Simply follow these instructions (and make sure the spacing fits your theme perfectly):

ul#menu > li > ul {
  position: absolute;
  top: 37px;
}

Answer №3

By excluding the line-height attribute from:

ul#menu > li > ul li {
  color:black;
  font-size:10pt;
   /*line-height:30px;*/
  text-align:left;
}

The content still looks good, or you can adjust the line-height to a lower value like 20px

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

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this poin ...

javascripthtmlcssvue.js

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

htmlangularangular-materialangular11

Tips for transferring data between two forms in separate iFrames

I'm trying to achieve a functionality where the data entered in one form can be submitted to another form within an iframe. The idea is to allow visitors to preview their selected car in the iframe, and if satisfied, simply press save on the first for ...

javascriptjqueryformsiframe

Designing a responsive two-column table layout

My current challenge involves a small table structured as a bullet list with two columns. To enhance mobile display, I am seeking a way to collapse it down to a single column: https://i.sstatic.net/LqbA6.png The current implementation includes the follow ...

htmlcssflexboxresponsive

Sending the image's identification number as a parameter to a function and showing the total number

On a static page, I have the following HTML markup: <div class="middle-content"> <div class="white-div"> <div class="like-buttons"> <img id="1" src="up.png" onclick="onClick(true, this.id)" /> &l ...

javascripthtml

Is there a way to adjust only the height of a responsive image?

Increasing the Height of an Image on a Mobile Device! I have an image that displays as the header of my website. When I resize the window to mobile format, the image resizes too. However, I want the height of the header image to be longer! Is this possibl ...

csshtml

Trouble encountered when attempting to override styles in Material UI's TableRow

I am attempting to customize Material UI's default styles in order to create a margin between each TableRow. Despite my efforts, it appears that the override is not being reflected in the user interface. ...

javascriptcssreactjsbootstrap-4material-ui

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

javascripthtml

CLS notifies about an Unrecognized CSS Element in Page Insights' Core Web Performance

My experience with Google PageSpeed Insights has been quite frustrating due to the numerous alerts I'm receiving about Unsupported CSS Properties. The importance of avoiding non-composited animations: Animations that are not composited can appear gli ...

csspagespeedgoogle-pagespeedpagespeed-insightscls

Is it necessary for the URL of Ajax's $.post function to be identical to the URL specified in the web

I need to transfer data from my JavaScript code to a servlet. My JavaScript file is located in the webapp\secure folder, while the servlet is in the java\com\servlet folder. After researching, I found out that I can use AJAX to send data. T ...

javajqueryjsonservlets

What strategies can we implement to ensure consistency in visual styles and templates across our microservices?

Our team is currently working on multiple microservices simultaneously. While traditional microservice architecture discourages code sharing and reuse between services, we are considering the benefits of consistent styling across all services that have Web ...

cssstylesmicroservices

The alignment of the rows and columns is off, causing the image to shift onto a separate row altogether

Struggling to configure the header section of my website, specifically dealing with the mobile class. I'm attempting to set up a col-xs-7 with an h1 tag and two p tags, along with a col-xs-5 containing an image. However, the col-xs-7 is taking up the ...

htmlbootstrap-5

Tips for utilizing the if-else directive in an AngularJS controller

My current challenge involves HTML coding. <li><strong>Scrub:</strong> {{insuredProfile.permanentAddress.isScrubbed}}</li> This code displays either true or false. I want to show Yes for true and No for false. Using data-ng-if, ...

htmlangularjs

Unable to access GDrive on Moodle with an iOS device

I have an iframe code that works in Android, but not on iOS when embedded in Moodle. Does anyone know how to fix this issue? <p><iframe src="https://drive.google.com/embeddedfolderview?id=1d-SHXhof2KnyTmMr2GowJuf4bVKFKQg3&amp;usp#list&q ...

htmliosiframemoodle

In Internet Explorer 7, the combination of having a hasLayout property along with setting the position to relative,

Issue: Encountering a challenge in IE7 with a div containing a gradient and a flyout menu on hover. Although it may seem simple, applying position:relative to the container for accurate menu positioning conflicts with the filter/hasLayout combination. Ch ...

cssinternet-explorer-7

Troubleshooting: ASP.NET Jquery DateTimePicker Issue with Server Side Function not Executing

I have a requirement to implement a jQuery datetimepicker that appears when the user clicks on an input field. The user can then enter the correct date and time, which will be populated in the input field. Initially, my method was working fine. However, af ...

jqueryasp.netdatetimedatetimepicker

What is the best way to add a triangle pointer to the Vuetify v-menu component?

Is there a way to insert a triangular pointer into the v-menu component of Vuetify 2.x? I am referring to this common feature found on web pages (as seen in this screenshot from Github): https://i.stack.imgur.com/DMOjF.png I have included sample code he ...

cssvue.jsvuetify.js

How to Retrieve a Specific Line with jQuery

Could jQuery be used to retrieve the offset of the first letter in the 5th visual line of a block's content? I am referring to the visual line determined by the browser, not the line seen in the source code. ...

javascriptjqueryajax

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Apologies for the lengthy title. Here's the issue: I have a WordPress website with a custom theme and its corresponding child theme. Previously, updating the style.css file of the child theme would show the changes immediately after a website refresh ...

htmlcsswordpresscachingweb

Concealing Nested Div Elements

Can someone help me figure out why my code is not hiding the two divs within my content div? I need assistance checking my code to see what's causing the issue. Thank you! I have made some edits to my code. Currently, both forms appear under the "War ...

jqueryhtml