My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Hello there!

I've encountered an issue with my drop-down menu. The text within the <a> tags is too long to fit on a single line, and I'm struggling to make it display in two lines instead. I've been experimenting for the past couple of days, adjusting the width property to force it onto one line, but it's not aesthetically pleasing. I feel like I must be overlooking something simple, but I just can't seem to spot it.

Your assistance would be greatly appreciated!

Here is the code I'm working with:

HTML snippet:

<ul class="supplier_top_link">
    <li>Category 1
        <ul class="supplier_1">
            <li><a href="#">Sub-Category 1</a>
            </li>
            <li><a href="#">Sub-Category 2</a>
          ...

CSS snippet:

.supplier_top_link {
  position    : relative;
  font-size   : 14px;
  font-weight : 400;
  z-index     : 3;
     }
     
...
htmlcss

Answer №1

To enhance the appearance of the <a> elements, consider enclosing their contents within a <span>, as shown in this example:

<li><a href="#">
    <span><span>Extremely lengthy Sub-Category Name 2</span></span>
</a></li>

In your CSS file, include the following code snippet to adjust the width and display properties of the newly added <span>:

.supplier_top_link li ul li a span {
    width: 180px !important;
    display: inline-block;
}

Additionally, it might be beneficial to remove the "height" attribute from the existing <a> elements for aesthetic purposes:

.supplier_top_link li ul li a {
    ...
    /* height: 30px;   <-- Delete this line */
    ...

For further reference, take a look at this interactive demonstration.

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

Submitting selected options from radio buttons to the server-side using HTML

I'm facing a challenge that requires some guidance. Here is the html code I am working with: Avatar: <br /> <input type="radio" id="avatar" name="avatar" value="Option1"/><img src="" alt=""> <input type="radio" id="avatar" name ...

phphtml

Disable the parent CSS styling when focusing on the child button

Within an anchor tag, I have a div element. The CSS on the :active state is set to transform the element, but I want to avoid this behavior when focusing on the child element bx--overflow-menu. I am working with NextJS using styled-jsx and SaSS. Here is my ...

cssreactjssassnext.jsstyled-components

Ways to align radio buttons vertically

I am currently working with three radio buttons that are initially aligned horizontally, but I would like to change their alignment to be vertical instead. What is the best way to achieve this? * { margin: 0; padding: 0; box-sizing: border-b ...

htmlcss

Using CSS to create a color combination of black with varying opacities

I attempted to achieve a black color by blending together the colors red, yellow, and blue in CSS, but encountered an issue... Is there a way to create black color using opacity? ...

htmlcss

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

javascriptjqueryhtmlajaxwordpress

Incorporate a PowerPoint presentation into an Iframe

Can you confirm if this code is correct? Is there another way to achieve the same result? Could you please provide some assistance with the code? I would like to show my PowerPoint file in an iframe when I click on a link. <html> <head> < ...

htmlcss

Is it possible to retrieve the value of a particular field from a table?

My goal is to create a table that displays data about various users awaiting admin approval. Each row represents a specific user, and when the approve button on a particular row is clicked, I want to open a new window displaying detailed user information f ...

javascripthtmlobject

How can we align the Recaptcha and Send button with the text box in a DIV using CSS exclusively?

Struggling to line up my send button and recaptcha with the end of the text box in a contact form in a responsive manner. I've spent days trying to make it work without success. Check out my jsfiddle here: Example Here's the current CSS: /*cust ...

htmlcss

Error 404: Django is unable to locate the static/css files

This particular issue appears to be quite widespread, but existing Q&A resources are outdated and do not address my specific problem. Currently, with Django 2.0.2, my basic webpage is failing to render the bootstrap.css file simply because it cannot locat ...

pythoncssdjangostatic

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

What is the best way to apply a border-radius to the top of bars in @nivo/bar?

Is it possible to apply a border radius to the tops of each stack in a stacked responsive bar created from the Nivo library, without affecting the bottom? Currently, the responsive bar's border radius applies to both the top and bottom. Thank you! ...

javascriptcssreactjsnivo-react

CSS transitions/transforms are failing to impact the necessary elements

I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...

htmlcsscss-transitionscss-transforms

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

javascriptjqueryhtmlclick

What is the method for compressing text in CSS?

I'm curious about how to condense my text so it doesn't extend beyond the page. Any ideas on how to achieve this? Issue: Solution: .Subheading{ text-align:center; font-family: 'Mukta', sans-serif; margin-top:70px; m ...

htmlcsstext

I am encountering a 404 error when attempting to make a GET request for a file located in the same directory

Here is the Javascript code that utilizes the get method. The directory contains both files - the HTML file where the JS code resides, and the text file. Below is an image of the console displaying errors. ...

pythonhtmldjangoajaxget

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

cssreactjsfluent-ui

Using jQuery to iterate through an array and reverse its order

Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...

javascriptjquerycss

What is the best location for storing buddypress css files?

Recently, I set up buddypress on a fresh WordPress installation and am interested in developing a child theme with personalized styles. Following advice from the buddypress codex, I copied the buddypress theme from plugins > buddypress > bp-template ...

csswordpressbuddypress

Utilizing UIWebView for dynamic HTML templating

Greetings! I am seeking to develop an HTML template (either internal or external) for the data received from an XML request. The following code has been functioning smoothly thus far: NSString* desc = [screenData.jsonVars objectForKey:@"descriptionTXT ...

iphonehtmliosuiwebview

Is there a way to select only a single line from an HTML document?

Is there a way to extract just one specific line from an HTML file? Let's say we have the following file: <!DOCTYPE html> <html> <head></head> <body> This is a test string. This is another test st ...

javascriptphphtml