Make menu links stretch to match parent's width

Trying to set the dropdown submenu links in my navigation bar to match the width of their parent <li>, but it's proving to be more challenging than I expected.

Below is the code:

HTML:

<div id="navbar" class="navbar">
  <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    <div class="menu-hovedmenu-container">
      <ul id="primary-menu" class="nav-menu">
        ...
      </ul>
    </div>
  </nav>
  <!-- #site-navigation -->
</div>

CSS:

.main-navigation {
  clear: both;
  margin: 0 auto;
  max-width: 1300px;
  min-height: 35px;
  position: relative;
}

...

Link to JSFiddle Demo

htmlcssdrop-down-menuwidthsubmenu

Answer №1

To properly adjust the layout, make sure to change the display attribute from inline-block to block:

.sub-menu li {
    display: block !important;
}

Answer №2

The reason for this issue is that the <a> tag within the submenu list has a display property of inline-block. Inline block elements behave like block elements but do not automatically fill the width of their container. Furthermore, the menu items within the sub-menu (li) are also set to display as inline-block, leading to the same behavior where they do not expand to the full width of the containing list (ul).

To resolve this, you can apply the following CSS:

.nav-menu ul,
.sub-menu a {
    display: block;
}

This will ensure that the elements behave as block-level elements and fill the width of their containers as expected.

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

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

javascripthtmlcsshtml5-canvaswebgl

"Emphasizing the Html.ActionLink menu for improved user navigation and

Currently, I am facing an issue with my menu. I want to clear previously visited links while keeping the current one styled as a:visited in CSS. Although I have attempted to achieve this, unfortunately, the code is not functioning properly. Here is what I ...

javascriptjquerycss

The content in the footer is not displaying correctly (Vuejs)

I recently developed a component with a title and a background color meant to cover the entire page, but it seems to have a top margin that I can't seem to remove. Additionally, I created a footer component that should always stay at the bottom of the ...

htmlcssvue.jsbackgroundfooter

Steps for showing retrieved data individually:

Currently, I am utilizing angular-js, JavaScript, and HTML in my project. I have successfully retrieved a list of customer names and their corresponding details from the database. However, I am looking to implement a feature where each record is displayed ...

javascripthtmlangularjs

Pair up balls that have matching numbers

A software application was designed with the following features: It can create 4 balls on the screen, each containing a numerical value Users have the ability to input values for new circles to be generated Upon clicking a button, 4 new circles with num ...

javascriptjqueryarrayshtml

Combining ng-filter and ng-repeat to iterate over key-value pairs in objects

Currently, I am utilizing the built-in Angular 1 filters in an attempt to filter out a property of an object. While Angular Filters typically only accept Arrays and not Objects, the structure of the web application prevents me from refactoring to pass an a ...

javascripthtmlangularjs

Warning: An error occurred with undeclared variables... missing variable declaration

Hey everyone, I recently made a post but it seems like my explanation was not clear enough. So here's the issue - I have a products page with a URL structure like http:.......rest_id=3/area='Enfield'. I've been using a similar query on ...

phphtml

Tips for centering a DIV with nearly 100% width and full height

<div class="main"></div> <style> .main{ background-color:black; position:absolute; width:calc(100% - 40px); height:calc(100% - 40px); margin:20px; </style> H ...

htmlcss

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

After successfully testing my Azure function locally, I deployed it only to find that it fails to trigger when a file is uploaded to the video-temp container. { "bindings": [ { "name": "myBlob", "type&qu ...

javascripthtmltypescriptazureazure-functions

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...

javascriptjqueryhtmlcss

Issue with HTML dropdown functionality

I’m facing an issue with my dropdown menu. Clicking on a button should toggle the dropdown menu, showing it if closed and hiding it if open. However, the dropdown menu does not close when I click the button again. I suspect the problem lies with the clos ...

javascripthtmlcss

How can I center an image in HTML while maintaining a slight margin at the bottom

I am facing a minor issue with the bottom margin of an image. I can't figure out why there is a small gap between the image and the menu below. Can someone provide an explanation? My goal is to have the menu align perfectly with the image, but for so ...

htmlcssimagemargin

Error: Unexpected syntax error encountered in the form of T_FOR

I'm currently working on building an HTML form that includes a dropdown menu. Check out the code snippet I have below: $output[]='<td><select name="qty'.$name.'">' for($count=1;$count<=$total;$count+=1) { &apo ...

phphtml

Filtering div elements in REACT according to user input

I need to filter the div elements retrieved from a database based on user input. It's a chat user list, and I want to display only the div of the user entered in the input field. I've experimented with various solutions found online but none seem ...

htmlreactjsinputfilter

Tips for importing font files from the node_module directory (specifically otf files)

We cannot seem to retrieve the fonts file from the node module and are encountering this error message. Can't find 'assets/fonts/roman.woff2' in 'C:\Projects\GIT2\newbusinessapp\projects\newbusinessapp\src ...

javascriptcssnode.jsangularsass

What is the best way to achieve consistent alignment in Javascript?

I have been attempting to incorporate HTML code within JavaScript for alignment and styling. Despite searching on Google for 3 to 4 days, I have not found a suitable answer yet. What exactly am I looking for? Here is a snippet of my JavaScript code: funct ...

javascriptjqueryhtml

Getting rid of the excess white space below the footer caused by concealed elements

In my design, I have three columns. The rightmost column is filled with 'Divs' containing collapsed information that can be scrolled through using the mouse wheel. The overflow in the center is hidden. The width of all three columns is set to 760 ...

htmlcss

Assign a value to the active textbox using JavaScript

Hello everyone, I am working on a page with three textboxes and one listbox. I would like to have functionality where if the user clicks on the first textbox and then selects an item from the list, that selected item should be automatically set as th ...

javascripthtmltextinput

Using the <!DOCTYPE html> tag seems to cause issues with the measurements of div elements

Currently in the process of developing a website, I created this div: #container #content .imagewindow { width: 560; height: 380; background-color: #1E1640; } After adding the doctype html tag, the browser appears to be disregarding my styling commands ...

csshtmldoctype

Is it possible to preview and print a markdown file as a PDF in VS Code using a custom CSS stylesheet?

Let me explain my scenario: I am looking to create a formatted markdown document (such as my CV) and apply a customized style using a CSS file. Afterwards, I aim to generate a PDF version of this document. In order to achieve this, I have integrated the ...

cssvisual-studio-codemarkdown