Struggle with the background div menu

I am trying to create a menu with a background color, but when I use "background" or "background-color" on the div that contains my menu, I can't see any color. It's frustrating because I know it should be working..

Here is the HTML :

 <header class="menu-top">
    <div class="menu">
        <ul>
            <li><a>Home</a></li>
            <li><a>Portfolio</a></li>
            <li><a>Contact</a></li>
        </ul>
    </div>
</header>

Check out this JSFIDDLE for a live example: https://jsfiddle.net/szf1xksv/

htmlcssmenubackgroundjsfiddle

Answer №1

Another option might be to implement the following code:

.navigation > ul > li {
  display: inline-block;
}

By using this, you can maintain the original height of the list items.

Answer №2

When the list items in your menu are floated, it causes the menu to lose its height. To fix this issue, you can clear the float after the container. Here's a simple way to do that:

.menu:after {
  content: "";
  display: table;
  clear: both;
}

Check out the updated fiddle here.

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

Issue with PHP (functions correctly on local server, but encounters errors on online server)

I am encountering an issue with PHP on the web server I am utilizing. Despite my efforts, the solution seems to elude me completely. The PHP file I have uploads two files; a before and an after shot of the client. The script on my localhost server works p ...

phphtml

How do I insert a variable into my email content using PHP?

Hey there, I have a form that captures Name, Email, Subject, Telephone Number, Message, and a checkbox. Unfortunately, I'm not very proficient in PHP. I've just started learning the basics and could use some guidance from you :) The Form < ...

phphtmlformsemailvar

Is it possible to retrieve the selected DataList object in Angular 10?

I encountered an issue while creating an Input field with DataList. My goal was to retrieve the entire object associated with the selected option, but I could only access the selected value. Previous suggestions mentioned that DataList items should be uniq ...

htmlangulartypescripthtml-datalist

Tips for changing color when hovering over elements in a CSS grid

I am currently attempting to incorporate a hover effect into this CSS grid, but I have not been successful in my efforts. I experimented with transition and opacity techniques, but they did not work as expected. Can someone please point out what I may be ...

csshovercss-grid

Python Selenium: Strategies for Iteratively Waiting for a Clickable Element

My task involves downloading images from website pages using Python Selenium. I need to select the web elements of these images and click on them one by one: ... THUMBNAILS = browser.find_elements_by_xpath("//div[contains(@class, 'lg-thumb-item&a ...

pythonhtmlseleniumwebdriverwait

html displaying dynamic data in a table

As a beginner in coding, I am attempting to create a dynamic table. The first column is working fine with each new cell being added to the top. However, when I try to add columns, they fill from top to bottom instead of mirroring the first column. I want m ...

javascripthtml

Issue with justify-content in Bootstrap 5 still unresolved

Currently working with Bootstrap 5 and have set up 4 cards. My goal is to position the second card on the left side. I've applied the class justify-content-xl-start to the card, however, it doesn't seem to be functioning as expected. I also attem ...

htmlcsstwitter-bootstrapbootstrap-5

Update a particular class following an AJAX POST request in JavaScript

After conducting extensive research, I have come here seeking your assistance with a particular issue: I am using a comment system with multiple forms on the same page (utilizing FOSCommentBundle in Symfony). My goal is to be able to post comments via Aja ...

javascriptjqueryhtmlajaxsymfony

When I update URLs in Django, my CSS breaks down

Recently, I encountered an issue on my website and found a solution by creating two separate HTML pages. However, when I modified the urls.py to differentiate the URLs for these pages, the CSS stopped working. Below is my code snippet and a detailed explan ...

pythoncssdjangourl

Ensure that every closing curly brace is followed by a new line character

I'm utilizing a piece of code I stumbled upon online to condense my css files and it's working well, but there's a slight regex problem that's causing me some difficulty. $css = preg_replace('/([\\w#\\.\&b ...

phpcssregexnewlinecurly-braces

Warning displayed on form input still allows submission

How can I prevent users from inserting certain words in a form on my website? Even though my code detects these words and displays a popup message, the form still submits the data once the user acknowledges the message. The strange behavior has me puzzled. ...

javascriptphphtmlajaxvalidation

background gradient coloring and image blending

I have created a special class that includes a gradient background color: .banner { background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D; } Additionally, I have defined another class that adds a background ...

htmlcss

hint.css guide for inserting line breaks into hints

Is there a way to manually insert line breaks in Hint.css hints? I've attempted using <br>, \n,, and various combinations of them. I've also experimented with the following CSS properties: white-space: normal; word-wrap: break-word; ...

htmlcssline-breakshint

What are the best ways to change the styling of jquery ui widgets?

Currently utilizing jQuery UI, I have encountered an issue with the font size within a dialog. When utilizing the standard settings, the font size appears to be excessively large. To address this, I used the element inspector to identify the class name o ...

jquerycssjquery-ui

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

javascripthtmlurlweb

The background refuses to cooperate, soaring upward only to be abruptly sliced in two

I am in the process of creating a website login window with an image background, but I'm experiencing issues where the image is being cut in half and moved up. Here is the code snippet I am currently using: .loginbody { background: url(img/LoginB ...

htmlcssbackgroundbackground-image

Utilizing diverse values retrieved from HTML data attributes

*UPDATE Within my HTML, I have a list titled "#wordlist" that contains the words for my game, along with corresponding audio and images for each word. Everything is functioning correctly. As there will be multiple versions of the game, I've been tas ...

javascriptjqueryhtmlvariables

Works well with Bootstrap but not compatible with other frameworks

Looking for assistance with a code within Bootstrap (HTML and CSS). I have been trying to create a dropdown menu (burger menu) following the Bootstrap Documentation, but I am unable to expand the burger menu (Dropdown). I have tested it on both Firefox an ...

htmlcss

Tips on improving a function that verifies the existence of an image used as a CSS background to output a boolean value

I have encountered a challenge while working on a react file-upload component. The issue at hand is relatively simple - I aim to display an icon corresponding to the file extension for each uploaded file. These icons are loaded through css as background im ...

javascriptcssreactjsimageasynchronous

Expanding your knowledge of AngularJS: utilizing ng-click to interact with elements

After a user clicks on an element in my app, I have some logic that runs. For example: html <h3 ng-click="showAlert('text')">this is text! (try to click and select)</h3> js $scope.showAlert = function(text) { console.log(' ...

javascriptjqueryhtmlangularjs