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

What is the best way to showcase an array of objects in a table using AngularJS that updates

My technology stack includes angular.js for the front-end, node.js for server-side operations, and PostgreSQL for managing my database. Currently, I have a list of values stored in the database: Upon checking the controller code, I obtained the following ...

htmlangularjshtml-table

Show a grid layout with adjustable sizing and elements centered in the middle

When dealing with a layout like the one below, how can we ensure that elements are centered within the wrap container? The margins around the elements should be flexible but at least 14px. .wrap{ display: grid; grid-template-columns: repeat(auto-fi ...

htmlcsscss-grid

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element: <style>{` .something>div{ color: blue; } `}</style> While this works fine in development, in production React replaces > ...

cssreactjs

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. ...

javascriptjqueryhtmlcssangularjs

Convert text into a clickable link

Creating a form with numerous text fields, some of which require numerical input. The main goal is to have users enter a tracking number, order number, or any other type of number that, when submitted, will open a new URL in a separate window with the spec ...

javascriptphpjqueryhtmlforms

PHP code in Wordpress incorporating an Ajax request

Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...

javascriptphpjqueryhtmlwordpress

`Can a creation of this nature be accomplished?`

In my text input field, users can type messages to send to me. I'd like to add buttons on the page with symbols like "!", "XD", and "#". When someone clicks on a button, such as the "!" button, that corresponding symbol should be inserted into the tex ...

javascripthtmlcss

Guide on incorporating data from a text file into an HTML table

I'm attempting to showcase the records from upload.txt in an HTML table. The location of the upload.txt file is at this URL: http://localhost:3000/upload. When accessing this URL, it retrieves the upload.txt file. Currently, I am using node.js for r ...

jqueryhtmlajax

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

cssreactjsanimationnext.js

The static files are being received by Django but are not functioning properly

I've been working on a project using django 1.7, and below is my settings.py configuration: STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, "assets"), ) STATIC_ROOT = "absolute/path/to/static" In the 'assets&apo ...

javascripthtmlcsspython-2.7django-1.7

Expanding an element to cover all columns in a grid with automatically generated columns

I am working on a CSS grid layout with automatic columns and 2 rows. All elements are normally placed in the first row except for one special element that should span both rows while filling all available column space. My current code looks like this: ...

csscss-grid

The sidebar's background is cut off before reaching the bottom when scrolling

I have been working on creating a sidebar that includes a background image with a transparent overlay. However, I encountered an issue where the overlay background does not stretch all the way to the bottom when the scroll bar becomes visible. Despite sett ...

htmlcss

What causes the position: sticky; property to fail in React implementations?

Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page. In my current editing project, this implementation seems to be more complex compared to other programs w ...

cssreactjs

Tips for highlighting a Material UI Button when pressing the Enter key

Once the user has completed the final input, they need to press the save button The 'Tab' key typically moves the focus to the next element (in this case a button), but I want to use the 'Enter' key for this action. Can anyone advise o ...

htmlnode.jsreactjsmaterial-ui

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

javascripthtmlcssreactjssass

Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

My CSS doesn't seem to be working in my HTML. I have linked it correctly, but it's not displaying properly - even showing empty in the CSS tab of Chrome Inspector. The links are there, so I'm not sure why it's not functioning correctly. ...

htmlcss

Is there a way to click on a button and have its background color change randomly each time?

I am facing an issue with a button on my HTML page. When the button is clicked, I want its background color to change to a random different color. However, despite trying various sources, I am unable to get it right. It seems like I am not placing the code ...

javascripthtmlcss

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

cssreactjsmaterial-ui

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

cssangularsassnavigation

Signs that indicate a socket has truly disconnected

socket.on('disconnect') isn't behaving as I anticipated. I want to be able to track when a user leaves my website completely, not just switches pages. Currently, navigating to a different route on my webpage triggers the socket disconnect ev ...

htmlnode.jsexpresssocket.io