Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling.

<ul>
   <li>
    <a href="">Item FooBarBaz</a>
    <ul class="submenu">
        <li><a>sub1</a></li>
        <li><a>sub2</a></li>
        <li><a>sub3</a></li>
    </ul>
   </li>
   <li>
       <a href="">Item FooBarBazZipBamBop</a>
       <ul class="submenu">
        <li><a>sub1</a></li>
        <li><a>sub2</a></li>
        <li><a>sub3</a></li>
       </ul>
   </li>
</ul>

My goal is to have each ul.submenu match the min-width of its preceding anchor element. Since this width could vary for each submenu, is CSS capable of achieving this or would javascript be a more suitable solution?

javascriptjqueryhtmlcss

Answer №1

Of course! Here is a sample illustration: http://jsfiddle.net/SeKT9/

ul
{
    margin:0;
    padding:0;
    list-style:none;
}



body > ul > li 
{
    float: left;
    position: relative;
}

ul > li  a
{
    display: block;
    margin: 5px;
}

ul > li:hover > ul
{
    display: block;
}

ul > li > ul
{
    position: absolute;
    min-width: 100%;
    background-color: green;
    display: none;
} 

ul > li > ul > li
{
    display: block;
}

Answer №2

Perhaps wrapping each submenu with an inline-block div could be a quicker and easier solution? I always hesitate to add extensive lines of code for a minor effect.

<ul>
   <li>
    <div style='display:inline-block;'>
        <a href="">Item FooBarBaz</a>
        <ul class="submenu">
            <li><a>sub1</a></li>
            <li><a>sub2</a></li>
            <li><a>sub3</a></li>
        </ul>
    </div>
   </li>
   <li>
    <div style='display:inline-block;'>
       <a href="">Item FooBarBazZipBamBop</a>
       <ul class="submenu">
        <li><a>sub1</a></li>
        <li><a>sub2</a></li>
        <li><a>sub3</a></li>
       </ul>
    </div>
   </li>
</ul>

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

Converting constants into JavaScript code

I've been diving into typescript recently and came across a simple code snippet that defines a constant variable and logs it to the console. const versionNuber : number = 1.3; console.log(versionNuber); Upon running the tsc command on the file, I no ...

javascripttypescript

Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3. Check out my webpage here: You can find the CSS file here: www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css The code for calling the spin effect is at the top, with the actual imp ...

cssanimation

I'm looking for a solution to enable the execution of 'expandRowByClick' only when clicking on a specific area within the row in Ant Design. Any suggestions?

In my quest to create a expandable table row with Ant Design's built-in expandRowByClick function, I encountered a dilemma. The function allows me to expand a row by clicking anywhere in it, but what if I want this feature to apply only to a specific ...

javascriptreactjsantd

Displaying inline causes the block elements to be removed from the

After two months of learning HTML and CSS, I still feel like a beginner. I'm attempting to create a header navigation bar, but whenever I apply the display: inline property, everything vanishes. I know this issue is probably basic, but any advice woul ...

htmlcss

The browser does not support the display of Spanish special characters

I am working on a website and need to incorporate support for the Spanish language. I have prepared an XML file with both English and Spanish text. The XML file is being read based on the user's selection of language from a dropdown menu. Everything s ...

htmlxmlutf-8metaiso-8859-1

Issue with Build System CTA's/Callback function functionality not operational

I have encountered an issue with my build/design system. Although everything works fine during development, when I publish my package and try to use the callback function, it does not return the necessary data for me to proceed to the next screen. I tried ...

javascriptreactjstypescriptnpm

What is the best way to create a taskbar using HTML or Javascript?

I'm currently developing an innovative online operating system and I am in need of a functional taskbar for user convenience. The ideal taskbar would resemble the Windows taskbar, located at the bottom of the screen with various applications easily ac ...

javascripthtmlwebtaskbar

Check to see if the item is not already in the cart, and if so, add it and then increase its quantity

Utilizing React context, I have implemented a simple logic to add products to the cart using the useReducer hook for adding items. If we look at the Redux Toolkit implementation, here is my redux logic: const cartItemSlice = createSlice({ name: " ...

javascriptreactjsreduxnext.js

Upon concatenation, the screen automatically returns to the beginning of the page

I've set up a page with a list of items, and at the bottom there's a handy "Load more" button that fetches new items to add on top of the existing list: handleLoadProducts = (append = false) => { this.setState({ isLoading: true, ...

javascriptreactjs

The event listener for the custom cursor in Nuxt.js is failing to work properly when the route

I am currently in the process of constructing a new website for our studio, but am encountering difficulties with getting the custom cursor to function correctly. I implemented a custom cursor using gsap, and it worked perfectly; however, once I navigate t ...

javascriptvue.jsnuxt.jsaddeventlistenergsap

When the JS function 'postMessage()' is invoked on an HTML object tag, what specific action does it perform?

Not too long ago, I found myself on a quest to figure out how to trigger the print function on a PDF that I was displaying in Adobe AIR. With a bit of guidance from a helpful individual and by utilizing postMessage, I successfully tackled this issue: // H ...

javascripthtmlactionscript-3pdfobject-tag

Connections transition among associated HTML pages

I am working on my very first website using HTML and I'm encountering some challenges with maintaining consistency across pages. On the top of my page, I have a div containing some links. While they function correctly, I noticed that the spacing betw ...

htmlcsspositionspacing

The footer navigation in CSS shifts position when it is hovered over

My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed. ...

htmlcssnavigation

getStaticProps only runs on IIS after the entire page is refreshed

Using the nextjs getStaticProps feature in my project has been smooth sailing so far. However, after uploading the Static files to IIS, the feature seemed to stop working until I configured a urlRewrite module on it. I noticed that when initially visiting ...

javascriptiisnext.jsurl-rewriting

The error message "Uncaught ReferenceError: e is not defined" is popping up in my code when

As a beginner with React and Material-UI, I am encountering an error that I cannot seem to resolve. When I load a component using material-ui/data-grid, the data grid simply displays "An error occurred" in the app. However, when I load the component withou ...

javascriptreactjsmaterial-ui

What is the best way to track and display the window.scrollY value in the console using Next.js

Unfortunately, my ScrollToTop component is not functioning correctly within my app. I have exhausted all possible debugging methods but am still unable to determine why the scrollY value is not being logged as expected. Even after moving the snippet to a ...

javascriptreactjsnext.js

Encountering issues with integrating interactjs 1.7.2 into Angular 8 renderings

Currently facing challenges with importing interactive.js 1.7.2 in Angular 8. I attempted the following installation: npm install interactjs@next I tried various ways to import it, but none seemed to work: import * as interact from 'interactjs'; ...

javascriptnode.jsangulartypescriptsingle-page-application

Steps to refresh my View following an Ajax Post request

Working in an MVC environment, I find myself calling a Controller method from my View. The Controller method conducts some validation checks and then returns to the same view with a faulty modelstate. However, despite expecting all of my validation fields ...

jqueryajaxasp.net-mvcasp.net-mvc-4razor

Navigate within a single component on the Stack by scrolling

I'm a huge fan of CSS! Although it may seem like a simple task, I am completely stumped on how to tackle it. Mission: My goal is to enable scrolling only within the List section without affecting the entire page. Here's the structure of my ...

cssreactjsmaterial-ui

Using jQuery, it is possible to eliminate a div element without affecting its contents

<div class="a"> <div class="b"> <ul> <li>Element A</li> <li>Element B</li> </ul> </div> </div> How can I eliminate div class="b" solely? I require the presence of div a, u ...

javascriptjqueryhtml