How can I place a Pure CSS Menu within a Div Container?

I've been experimenting with the Pure CSS menu found on this site:

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

It's working well, but I'm facing an issue where I want to place this menu inside another div container. However, it only appears below it. I tried setting overflow to auto to make it appear inside, but then the menus don't expand when hovered over. You can see what I mean in the following example:

http://chemsworks.com/so/index.html

Is there a way to have the menu bar stay within the blue section?

I'm not including my CSS or HTML here since you can easily find that on the linked page.

Thank you for any help in advance.

htmlcss

Answer №1

To resolve the issue with your menu, you should eliminate the vertical bar (|) character located after the navbar div and ensure that your menu is properly cleared. Follow these steps:

.navbar:before, .navbar:after {
    display: table;
    content: "";
    zoom: 1; /* workaround for IE */
}

.navbar:after {
    clear: both;
}

Answer №2

To achieve the desired result, consider adding display:inline to the #nav element or removing float:left from the #nav li element and replacing it with display:inline-block. The choice between these two methods depends on the specific look you are aiming for, as both will display the menu in blue but with subtly different styles.

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

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

I have a question... If you're interested in conditional styling, the best approach is to utilize either ng-class or ng-style. However... For instance, let's say I'm an admin and I would like to customize the color of my application using ...

javascripthtmlcssangularjs

Navigate the page by scrolling the absolute positioned div

Is it possible to make the fancybox modal scroll with the page using fancybox 2? I want it to move along with the content rather than being fixed in the center with a max-height restriction. How can I achieve this? $('.fancybox-open').fancybox({ ...

javascriptjqueryhtmlcss

`Finding Solutions for jQuery and CSS Problems`

My jQuery slideDown/slideUp animation works smoothly in IE9 and Firefox, but is choppy in Chrome. When I remove the css file, the issue disappears, leading me to believe it is a Chrome and CSS interaction problem. Are there any tools available to help ide ...

jquerycssgoogle-chrome

Floating footers with centered content - they remain aligned in the center even when zoomed out

Behold my unique and straightforward footer design (100% zoom above, 70% zoom below) : To keep things simple, I aimed to center content with a single div having a fixed width and margin: 0 auto, all while maintaining the same color for the outer footer la ...

htmlcss

Is there a way to transfer an element from one row to another using Bootstrap?

Can the grid layout transition smoothly from a desktop view to a mobile view using Bootstrap 4 or pure CSS flex classes? Desktop view: Mobile view : Currently, I have a solution in place but I want to avoid repeating content in two different places. Is ...

cssbootstrap-4flexbox

Incorporate a pair of additional columns and showcase the outcome within a third column within an HTML

function = () => { var info1 = parseInt(document.getElementById("info1").value); var info2 = parseInt(document.getElementById("info2").value); var res = Number(info1.value + info2.value); var info3 = document.getElementById("info3"); ...

javascripthtmlreactjs

Swiper.IO pagination indicators not displaying

Why is the pagination not showing up on the image carousel I created with Swiper? Despite being in the DOM, it has a height of 0 and manual changes have no effect. Any suggestions? import Swiper from '../../vendor/swiper.min.js'; export default ...

javascriptcssvue.jsswiper.js

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

javascriptphphtmlonsubmit

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

I'm attempting to have the button with id 'testp' return an api request in json format, however it seems to not be functioning properly. You can find the HTML code link here: https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-bu ...

javascripthtmlcssapi

Ways to unmark the "select all" checkbox when any one of its children is no longer selected

Is there a way to automatically uncheck the "Select All" checkbox when any of its child checkboxes are deselected? In the code snippet provided, the goal is for the "Select All" checkbox to be unchecked if not all child checkboxes are selected. The script ...

javascripthtmlcheckboxcheckboxlist

Mobile Safari is having troubles loading CSS

After a long time of using in-line CSS directly on the page, I finally decided to consolidate it all into one file for my own sanity. Initially, I attempted the standard <link rel="stylesheet" href="URL"> approach and it loaded successfully, alt ...

phphtmlcsssafarimobile-safari

Despite being a valid <link rel="shortcut icon">, a validation error occurs

I'm encountering an error with the w3.org validator related to this line of code: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> The error message provided is as follows: Line 1, Column 727: Invalid value shortcut icon f ...

htmlfaviconw3c-validation

jQuery body background changer/utilizer

I am currently developing a website that requires the functionality to switch between background images with the ability for users to navigate through them using back and forth arrows. Each background image should have a unique dynamic description associa ...

phpjqueryhtmlcss

Create a Bootstrap layout with three columns and three rows, where the third column has a height

I am trying to achieve a specific layout using the col-lg-4 class. My main goal is to make the third column span across all three rows without creating excessive white space between them. The current layout looks like this: Is it possible to do this in B ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best method for decreasing the space between ordered list elements?

Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...

htmlcss

Looking to extract a particular set of information from past records in a GAS web application

Regarding a previous query I made before (Check for login username and password, and then bring data from every previous entry). I've developed a web application to monitor the working hours of employees at my organization. The app is straightforward ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

My header includes an off-canvas menu that slides in from the right side. Everything seems to be working fine, except for one issue: when the menu is open and visible, the mouse and touch events pass through it to the content underneath. Check out the cod ...

cssreactjsnext.jstailwind-cssoff-canvas-menu

Disable the div by graying it out when the button is clicked

In my jsni form, I have implemented a click handler on the save button. When the save button is clicked, I would like the specific div to be greyed out to indicate that data is being saved. var x=$doc.createElement("div"); x.id="nn"; var lbl=$doc.createEl ...

javascriptcss

Placing one element beside another element

I am facing an issue with my layout where I have a list taking up 100% of the height and next to it, I am attempting to place an image box. Here is the fiddle link for reference: https://jsfiddle.net/wrdvkgyj/ Even after setting my image container to inl ...

htmlcss

Is the textarea's shape out of the ordinary?

Most textareas are typically rectangular or square in shape, similar to this: However, I am interested in having a custom-shaped textarea, like the example below: Is it feasible to achieve? ...

javascriptjqueryhtmlcss