The navigation bar spans the entire width of my webpage

I came across this cool man code at and I'm trying to make the menu bar stretch across the entire width of my page.

The theme I'm using is called nvidia. You can download the original code by getting the zip file from the link above.

Here's a Fiddle for you: http://jsfiddle.net/6Yy4R/

Check out the CSS code below:


ul.dropdown {
    font: normal 16px "Square", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

ul.dropdown li {
    padding: 7px 0;
    background-color: #000;
    color: #fff;
    line-height: normal;
}

ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #005CE6; text-decoration: none; }
ul.dropdown a:active { color: #fff; }

ul.dropdown ul {
    width: 170px;
    background-color: #333;
    color: #fff;
    font-size: 12px;
    text-transform: none;
    filter: alpha(opacity=90);
    -moz-opacity: .9;
    KhtmlOpacity: .9;
    opacity: .9;
}

ul.dropdown ul li {
    background-color: transparent;
    color: #000;
    filter: none;
}

ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
    background-color: transparent;
}

ul.dropdown ul a:link,
ul.dropdown ul a:visited { color: #fff; }
ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
ul.dropdown ul a:active { color: #fff; }

// More CSS rules here...

Answer №1

To achieve full width for the ul, simply clear the floats and add a background color.

Check out this JSFiddle example

ul.dropdown {
    background-color: #f00;
    overflow:hidden; /* use as a quick clearfix */
}

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

The lower text box on the page being covered by the virtual keyboard on IOS

Our website features a fixed header and footer with scrollable content. We have 20 text boxes on the page, but the ones at the bottom, like Zip and Telephone, are obscured by the iOS virtual keyboard that appears when a text box is clicked. If we could d ...

Loop causing AJAX response problem

I am looking to implement AJAX functionality that updates two separate elements: the clicked button class and a record in the database while looping through the results. Home <?php $q = mysqli_query($cn, "select * from `com`"); while ($f = mys ...

Styling Text with CSS

I am currently using axios to fetch data from my backend. The data consists of a string format similar to "phone number: {enter phone number here}". My goal is to add CSS styling wherever there is a curly brace. let testString = "hello this ...

Customizing Your WooCommerce Storefront: Tips for Enhancing Your Product Catalog and Minimizing White Space

Lately, I've been working on enabling a product filter in the left sidebar of my Woocommerce theme. However, I have noticed that the layout is not quite how I would like it to be. Take a look at this image that shows the changes I am aiming for. Cur ...

Is there a way to automatically fill up a second dropdown menu based on the user's selection from the first dropdown

Using jQuery or vanilla JavaScript, I am looking to dynamically populate a second dropdown based on the selection made in the first dropdown. The value chosen in the first dropdown will determine which options are displayed in the second dropdown. What is ...

Implement pop-up functionality on additional buttons. Modify existing code to accommodate multiple buttons

I have a feature that allows me to click on a button and trigger a pop-up window with the desired content. The issue I am facing is how to duplicate this functionality for multiple buttons, each triggering a different pop-up content. I attempted to duplic ...

JavaScript taking over the HTML footer content

I'm attempting to update the content of my footer without modifying the HTML by including a class or an id. HTML: <footer> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </footer> Java ...

Show a confirmation dialog box using bootbox that includes a link when the user selects OK

I am currently experimenting with integrating bootbox.js into a test page. However, I am facing an issue where the href tag in the hyperlink triggers regardless of whether the user selects the Cancel or OK button on the bootbox. Is there a way to include ...

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...

When the Jqueryui dialog is closed, it effectively terminates the current JavaScript thread

Hello there, I'm currently facing an issue with closing my jQuery dialog box. The situation involves a comet connection that sends messages to my browser. My goal is to perform certain actions upon receiving a message, close the dialog, and then conti ...

Is it possible to utilize HTML as a platform for interfacing with a C/C++ program?

As I work on a new product with USB interface, I need to create a control app for it. However, my GUI programming skills are limited, so I have thought of using a local web page within the app's installation directory as the interface for the program. ...

What is the best way to retrieve an image URL from a CSS file located in a public folder within a

Trying to set a background image in a css file located inside the public/ folder of Rails, but want the image to be sourced from the app/assets/images/ directory. Currently using the code below: background: url("bg-noise.png"); This method typically work ...

What steps can be taken to stop my Bootstrap carousel from overflowing its boundaries?

While constructing my bootstrap portfolio, I encountered an issue with the carousel at the top. It is overflowing and causing horizontal scrolling. Carousel HTML: <div id="carouselExampleIndicators" class="carousel slide" data-ride= ...

``Inconvenience of Extensive URLs Being Displayed in Tables

I've been struggling to find a solution for the problem I'm facing with Chrome when it comes to wrapping long URLs in a table cell. Despite trying various solutions found online, including using the CSS code word-wrap: break-word;, I have not bee ...

Unique CSS animation effect for mouse hover interaction

I am working with a set of buttons that have an animation named "slideIn". The keyframes for this animation are as follows: @keyframes slideIn { 0% {opacity: 0; transform: translate(-200px);} 100% {opacity: 1; padding-left: 110px; w ...

Learn how to use jQuery to dynamically insert a table inside a div element in HTML, specifically for jQuery

Currently, I am attempting to incorporate HTML code through JQuery Ajax. I possess an HTML form (jQuery mobile) where data gets sent to a PHP file upon clicking the submit button using JQuery Ajax. The PHP file then responds with JSON data structured thi ...

The grid images transition at set intervals using jQuery or another JavaScript framework

I am facing a challenge with developing an image grid that transitions some images at random intervals using either jQuery or another method in JavaScript. It's important to note that I don't want all the images to change simultaneously; each gro ...

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Seeking assistance to enhance the display of museum information when a museum name is selected from an option dropdown box. The data is extracted from a json array. Although I managed to populate the option box with the museum names, I am encountering di ...

What could be the reason behind the lack of vertical centering for the Spartan

I can't seem to figure out why my font isn't aligning vertically correctly. I'm using the Spartan MB font from Google, but it just doesn't look right, you can see here. https://i.stack.imgur.com/wbLc2.png This is my HTML code: <htm ...

Let's explore a way to make the button text wrap onto multiple lines for smaller screens when using Bootstrap 4.0

I am encountering an issue with the layout of my asp.net mvc core web application + bootstrap 4.0 FAQ section. The problem is that the question description overflows the screen on small screens, while the answer text aligns properly. I need a solution to m ...