What is the best way to center my dropdown menu on the page?

Discover my exclusive menu by visiting this link.

For those who are curious about the source code, here's the HTML snippet:

<div id='menu-container'>
<ul id='menu' class="menu">
   <li class='active'><a href='/'><span>Home</span></a></li>
   <li class='has-sub'><a href='/games/'><span>Games</span></a>
      <ul>
         <li><a href='/games/dota-2/'><span>Dota 2</span></a></li>
         <li><a href='/games/cs-go/'><span>CS: GO</span></a></li>
         <li><a href='/games/css/'><span>CS: Source</span></a></li>
         <li><a href='/games/terraria/'><span>Terraria</span></a></li>
         <li class='last'><a href='/games/minecraft/'><span>Minecraft</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='/about.html'><span>About Us</span></a>
      <ul> 
         <li><a href='http://www.youtube.com/user/'><span>Our YouTube Channel</span></a></li>
         <li><a href='/faq-list.html'><span>Our FAQs/Q&amp;A List</span></a></li>
         <li><a href='/feed-news.rss'><span>Our RSS Feed</span></a></li>
         <li><a href='/wiki/'><span>Our Wiki</span></a></li>
         <li><a href='/wiki/'><span>Our Blog</span></a></li>
                 <li class='last'><a href='/privacy.html'><span>Privacy Policy</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='/contact.html'><span>Contact Us</span></a>
      <ul>
         <li class='last'><a href='/forums/'><span>Forums</span></a></li>
      </ul>
   </li>
</ul>

Moreover, here is the accompanying CSS style for the menu design:

* {
margin: 0px;
}
#menu-container ul,
#menu-container li,
#menu-container span,
#menu-container a {
  margin: 0;
  padding: 0;
  position: relative;
}
#menu-container {
  height: 49px;
  border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
...

I hope this resourceful information serves your needs. Feel free to use the provided code in your projects and experiments!

Answer №1

If you're looking to align your menu to the center of the screen, check out this helpful fiddle. Simply search for "EDITED" in the css to see the 3 changes I made.

Here's a breakdown of what I did:

1. Removed the float left rule from the entire menu:

#menu-container > ul {
    float: left;
}

2. Specified that the parent element should be centered on the page:

#menu-container {text-align:center;}

3. Updated each menu element by changing:

#menu-container > ul > li {
    float: left;
}

to

#menu-container > ul > li {
    display: inline-block;
}

Regarding your query about removing the grey space from the menu bar, could you clarify further? Do you want to eliminate the grey color entirely?

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

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

Tips on modifying the content of an element located within two iframes using the Chrome console

I'm trying to modify an element that is nested within two iframes. The issue I'm facing is that the Chrome console seems unable to locate the element. Is there a specific method to identify and target elements within nested iframes? document.quer ...

What causes a fixed position div to extend beyond the boundaries of the main container?

Below is the CSS for the fixed div: .top-container { position: fixed; width: 100%; z-index: 999; } Upon zooming out the screen, the div causes the main container to break on the right side while the left side remains unchanged. Refer to the screenshot be ...

Encountering an unanticipated reference error while attempting to paste the data

// Modify the layout function document.addEventListener('DOMContentLoaded', function() { function modifyLayout(productId) { // Referencing the original card and detailed card const originalCard = document.querySelector(&ap ...

Preventing responsive elements from loading with HTML scripts

Currently, I am utilizing the Gumby framework which can be found here. Everything appears to be running smoothly. My goal is to incorporate a mobile navigation list where the links are grouped under a single button, as outlined here. Initially, this funct ...

What is the process for incorporating data- attributes into ExtJs-generated HTML?

Currently working with ExtJs 4.1. In the process of developing a panel (for instance), I want to incorporate one or more "data-" attributes in the generated html, such as data-intro="some text" data-step="1" Any tips on how to achieve this? ...

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

Show a dynamic Swiper carousel upon selecting a thumbnail in an image gallery

I am in the process of creating a thumbnail gallery that includes a slider feature using Swiper. The default setup has the slider hidden, and once an image is clicked, the slider should appear with the selected image. To close the slider and return to the ...

Ways to hide a div element when the size of the window is decreased

I need help with keeping my logo fixed on the header of my website. You can view an example of the issue here: Currently, when the window is resized to a certain height, the logo (The sun) changes position. How can I ensure that it remains fixed in place? ...

I am seeking assistance with refining my responsive side menu code

I've been diligently working on my project for about a week now, but I've encountered a small yet incredibly frustrating issue that has me stumped. The problem lies in the functionality of the responsive sidemenu with multiple dropdowns that I ha ...

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

How can I dynamically populate a select menu in HTML without the need to submit any data

Looking for help with an input form in HTML that uses a combination of input and select boxes. My goal is to dynamically populate a select menu based on the data entered into the input boxes. For example: Employee One: Jim Employee Two: John Employee Thre ...

Validating (Update database with correct email and token)

Authentication (Update database if email and token are accurate) Even when the code is incorrect, it displays "Great Success", but the status does not update in my database. However, if I input the correct code, it shows "Great Success" and updates the s ...

Ensuring the Selection with jQuery

I've successfully implemented jQuery validation on a text field, but when I try to apply it to a radio button, it doesn't seem to work. I'm not sure what I'm doing wrong. Here is my HTML and jQuery code: <input type="text" placehol ...

What is the process for inserting a hyperlink onto an image within a query slider?

I am experiencing difficulties when attempting to add hyperlinks to the images in my slider. I have come to understand that images cannot be clickable in jQuery sliders, so I have tried the following in the HTML: <div class="wrapper"> <div class= ...

How can I show a tooltip when hovering over a tab using uib-tab?

Currently facing an issue with HTML/Bootstrap. My tabs are displayed using the uib-tabset directive on Angular Bootstrap (UI Bootstrap). I am trying to implement a tooltip that appears when hovering over a tab that is disabled. Does anyone know how I can a ...

Adding an image to a server through PHP in the TinyMCE editor

Currently, I am in the process of utilizing TinyMCE text editor for uploading images using PHP and JS database. However, I find myself perplexed when it comes to sending the image to the server. Below is the snippet of the JS code being used: <script ...

Storing Images in MySQL Database with JavaScript and Node.js: A Step-by-Step Guide

I am using Javascript to capture an image and store it in a MySQL Database. Below is the code I have written for this: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- ...

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...