Extensive Horizontal Menu and Sub Menu Aligned Perfectly in the Center

I need help creating a horizontal menu with a sub-menu that is full width and centered. Does anyone have any advice on how to achieve this?

Thank you in advance!

The following HTML code creates a horizontal menu and sub-menu, but they are currently aligned to the left. I am struggling to make them both full width and centered.

HTML:

<div id="menu">

<ul id="nav">
<li><a href="#">Menu 1</a>
 <ul>
 <li><a href="#">Menu 1 Submenu item 1</a></li>
 <li><a href="#">Menu 1 Submenu item 2</a></li>
 <li><a href="#">Menu 1 Submenu item 3</a></li>
 </ul>
</li>;

// Rest of the HTML code continues...

CSS:

<style type="text/css">
#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

// CSS styling continues...
htmlcssmenu

Answer №1

Take a look at this link

To create an adjustable menu, I utilized the CSS properties display: table; for the UL and display: table-cell for the li.

Here is the HTML code:

<div id="menu">
<ul id="nav">
  <li><a href="#">Menu 1</a>
    <div class="dropdown"><ul>
        <li><a href="#">Menu 1 Submenu item 1</a></li>
        <li><a href="#">Menu 1 Submenu item 2</a></li>
        <li><a href="#">Menu 1 Submenu item 3</a></li>
    </ul>
    </div>
  </li>

  <!-- Remaining menu items omitted for brevity-->

</ul>

CSS styling for the menu:

#menu {
  width: 960px;
  height: 40px;
  clear: both;
  position: relative;
}

/* Additional CSS styles included for the menu visibility and interactivity */
/* Please refer to the original source for full CSS code */

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

Implementing JavaScript for showcasing weights

I've encountered a JavaScript function that modifies user preferences for weight units, allowing them to choose between metric and imperial measurements. When displaying weights on my page, I typically present them as follows: This is a brief explan ...

javascriptjqueryhtml

Space between pixels at the bottom of a division

There's a puzzling issue here with a simple fix waiting to be uncovered. In the example below, a pixel gap has formed between the bottom of two images and the DIV elements (home-top or home-bottom). How can this bothersome space be eliminated? .con ...

htmlcss

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

javascripthtmlcsstwitter-bootstrapjquery-isotope

Trouble centering a list within a parent div using CSS

Even though this issue seems straightforward and many others have asked similar questions on the site, I find myself stuck after reading through several solutions and attempting various fixes. Why is this happening? My problem involves centering a navigat ...

htmlcssdjango

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can you set the line thickness for "text-decoration: line-through;" using CSS?

When it comes to the line-through property in CSS, the default weight of 1px is ideal for body copy set at 1em. However, for larger items like a price set at 3em on an offer site, 1px can feel too light. Is there a way to increase the line weight for line ...

css

Utilizing CSS pseudo-elements in selectors with Scrapy

Is it possible to use the CSS text-transform property directly within Scrapy selectors? Ex: .css("::text-transform: capitalize").extract() The current method returns capitalized data, but can we apply CSS properties like text-transform to modify ...

pythoncssscrapy

Inserting a vertical barrier in the midst of the content

I am struggling to create a vertical divider and align the text properly in the top right corner of my screen. https://i.sstatic.net/UqURE.png Currently, I am facing issues with displaying the divider and positioning the text correctly. <div class="r ...

htmlcssbootstrap-4

Can the html content provided by the user be extracted and highlighted?

When utilizing the onClick function in ReactJS, I am receiving the entire property which includes Lorem Ipsum is simply dummy text. However, I only require the highlighted content like "is simply dummy". Is there a way to achieve this?</p> ...

javascripthtmlreactjsonclickdom-events

Using jQuery to toggle between two elements and updating the SELECT field

<div class="r_row"> <div class="row field_currency"> <div class="f_row"><label class="" for="currency">Currency</label></div> <div class="r_row"> <select id="currency" name="currency" class=" select ...

javascriptjqueryhtmlcss

I'm having trouble getting my dropdown content to align properly with my centered search bar. Any suggestions on how to fix this issue?

How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar. This is the HTML: &l ...

htmlcss

Autosuggest Feature in Google Maps

Can someone please help me with customizing the width of the input text box and drop down menu using this resource: https://developers.google.com/maps/documentation/javascript/places#places_autocomplete? I'm having trouble figuring it out. ...

google-mapscssgoogle-maps-api-3

Remove the focus from an HTML element when the page loads

After customizing the contents of this theme for my website, I encountered an issue with the login form fragment. Each time the page loads, the focus is automatically directed to the username input field, causing a skewed appearance on the page. Despite at ...

javascripthtml

Having trouble with your custom AngularJS directive not functioning correctly?

I am facing an issue with my custom directive implementation. I have a custom directive that contains a table which references a controller. The ProjectController part works fine when it is not included in the code, but as soon as I put everything into the ...

javascripthtmlangularjsangularjs-directive

Arranging cells within a table with numerous rowspan configurations

I need some help creating a table that will be divided using rowspans for a PDF rendering with BFOreports. I have included an example layout below (numbers are just for reference): https://i.stack.imgur.com/Wbe96.png However, the output I am currently ge ...

htmlhtml-tablebfo

What are the steps to utilizing mattooltip effectively?

Can someone help me figure out how to successfully implement mattooltip in this code? It's not working as expected. <div class="btn-edit-nounderline" matTooltipClass="custom-tooltip" (click)="edit(row.widgetAccess)" ...

htmlangulartypescript

Align columns responsively with Bootstrap and center overlay image

Experiencing issues with aligning responsive divs using Bootstrap. Here is the code in question: <div class="container-fluid"> <div class="row"> <div class="col-xl-5"> <img src=&quo ...

csstwitter-bootstrapbootstrap-4alignment

How can I implement a loop to showcase bootstrap popover content?

I'm having issues with my popover content always displaying the first item in the list. How can I make it display each individual item? Below is the snippet of Razor HTML code I am using: @{ foreach(item in Model.SomeObject) { <div clas ...

c#htmltwitter-bootstraprazorpopover

iCloud Web Portal - Element Search Failed: Element Not Found

Exploring Python as a novice, I embarked on a project that requires logging into Gmail and iCloud using Selenium. The Gmail portion went smoothly, indicating that I am headed in the right direction. However, I hit a roadblock while trying to identify the l ...

pythonhtmlseleniumxpath

Is there a way to efficiently use AJAX and PHP to iterate through JSON data and save it to a new JSON file

I have created a simple movie editor with a sidebar where users can drag and drop elements. On the right side, users can edit these elements as they wish and save the data to a JSON file. When the user clicks save, I want it to create a new file and save t ...

javascriptphphtmljsonajax