Struggling with CSS drop-down navigation bars

Lately, I've been dedicating my time to creating a small CSS menu, but it's just not cooperating the way I want it to. Despite playing around with different menus and adjusting positions and fonts, I can't seem to get it right.

Initially, my main menu was working perfectly as expected. However, when I attempted to add a dropdown feature to one of the options, everything went haywire, and now I'm stuck trying to untangle this messy situation.

What I need assistance with is positioning the dropdown menus beneath the correct menu item (currently, they stubbornly remain on the left side). Additionally, I'm struggling to make the submenu items match the style, size, and font of the main menu items, which is proving to be quite challenging for me.

I would greatly appreciate any help and feedback. I've shared the CSS / HTML Code of the menu via Pastebin:

CSS: http://pastebin.com/rJEgvnK1

HTML: http://pastebin.com/e52RuH4r

htmlcssdrop-down-menu

Answer №1

Although it may not be flawless, you can still determine the correct positioning, but the fonts may pose a challenge. Feel free to take a look at this jsfiddle

Here is the CSS used:

#mainMenu ul{
        width:954px;
        padding:0;
        margin:5px 0 10px 0;
        list-style-type:none;
        border:solid 2px #ddd;
        font-size: 18px;
        text-transform: uppercase;
}  
#mainMenu ul li a{
        text-decoration:none;
        color:#000000;
        background-color:#eee;
        padding:0.2em 0.6em;
        border-right:0px solid white;
        display:block;
}     
#mainMenu a:hover{
        color:#FFFFFF;
        background-color:#2E9AFE;
}      
#mainMenu ul li{
    display:inline-block;
    position: relative;
}
#mainMenu ul ul {
        background-color: #eee;
        display: none;
        width: 133px;
        height: auto;
        position: absolute;
        border: solid 1px #ddd;
        top: 23px;
}
#mainMenu ul li:hover > ul{
        display:block;
        padding:0;
        margin:5px 0 10px 0;
        list-style-type:none;
        border:solid 2px #ddd;
        font-size:18px;
        text-transform:uppercase;
} 
#mainMenu ul ul li:hover a{
        color:#FFFFFF;
        background-color:#2E9AFE;
}
#mainMenu ul ul li:hover {  
        cursor:pointer;
} 
#mainMenu ul ul li {
        float:none;
        padding:10px;
} 
#mainMenu ul ul li{
        font-size:16px;
        padding:0 10px;
}

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

Mediawiki version 1.26.2 experiencing loading issues with Stylesheet

I recently updated my Mediawiki installation to the latest version 1.26.2, but I've encountered an issue with the stylesheet not loading correctly. Strangely enough, in a previous version (1.23.5) installed on the same server, everything was working f ...

phpcssmediawiki

Issue with forms not correctly transferring data from selected checkboxes

I am attempting to submit all checked input checkboxes. The input fields are dynamically generated through a Django loop. Based on my research, the code below should be functional. I suspect that the issue lies in the generation of input fields within the ...

htmldjango

iOS browsers including Chrome, Safari, and Firefox are unable to properly render Svg clip-path

When implementing svg clip-path in react, it seems to function correctly on Google Chrome and Firefox for both Desktop and Android. However, there are issues with the display on Safari (iOS and Desktop) as well as Google Chrome on iOS. Here is the code sn ...

cssiossvgsafariclip-path

At the header of my webpage, there is a subtle grey border

As a beginner in the world of HTML website building, I am currently working on creating a fast food website. My goal is to have a "Home", "Menu", and "Contact" links at the top of my webpage, but I am struggling with adjusting the margin and padding. Here ...

htmlcssnew-operator

positioning a window.confirm dialog box in the center of the screen

I'm currently facing an issue with a dialog box that I have implemented successfully. However, I can't seem to get it centered on the page: <Button variant="danger" onClick={() => { if (window.confirm('Delete character?')) handle ...

javascriptcssreactjs

CSS: Display the index of each ordered list item within a child element

I'm working on creating a unique accordion-style widget similar to the design shown in this image: https://i.sstatic.net/EBymf.png My plan is to utilize an ordered list where each <li> element will include a question, answer, and an expand/col ...

htmlcss

Linking various nodes together using the capabilities of the Web Audio API

I am experimenting with audio and trying to achieve a few specific goals: Adjust the overall volume of the audio. Modify the volume and delay of a particular channel (left). This is the code I have been working on: var audioContext = window.AudioContex ...

javascripthtmlweb-audio-api

Dynamic Dropdown Navigation with Bootstrap 4

I noticed that the default Bootstrap (4.0) dropdown animation is not present. How can I achieve a "slide" open effect similar to the collapsed navbar? It should be mentioned that the dropdown is located within the navbar. You can find the codeply example ...

jquerycssbootstrap-4navbardropdown

Dimensions properties for a webpage displayed within a DIV element

I was attempting this in an iframe previously, but now I have managed to make it work in a DIV. However, I am facing issues in achieving the desired properties. When I try to modify the properties of the 'siteloader', it seems to ignore the embe ...

jqueryhtmlcssheightembedding

Expanding the width of a list-group with Bootstrap to fill the entire div

I am working with a div that has a height of 200px. How can I make sure the ul items are divided into equal rows within the div, instead of always aligning to the top? To illustrate this, I have colored the div green. As I will be using ngFor in my ul, the ...

htmlcssbootstrap-4

Chrome is currently experiencing a problem with embedded fonts, causing the bottom of the customer's font to be

Greetings, I am encountering a font-face issue specifically in Chrome on Windows. Below is the code snippet causing the problem: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta ...

htmlcssfont-faceembedded-fonts

Issue with Retina display: containing div fails to properly expand to accommodate 1000px width div

As I was preparing to launch a new webpage, I decided to test how it looked on an iPad with Retina display. Unfortunately, the page didn't appear as expected. If you visit the link on an iPad Retina, you can see the issue: The problem becomes apparen ...

htmlcssipadwidthretina-display

Pass information from JavaScript to PHP without using a form

I am trying to pass data from JavaScript to PHP without using an HTML form. The scenario involves the user clicking on a specific HTML div, sending its ID to a JavaScript file, and then transferring it back to a PHP file. How can I achieve this? Below is ...

javascriptphphtmlajax

PowerShell unordered list in HTML formatting

I'm currently working on a function to generate an unordered HTML list. It works perfectly when utilized as ConvertTo-HTMLlist $MyArray, but encounters issues when information is piped into it like $MyArray | ConvertTo-HTMLlist. This is my function: ...

htmlpowershell

Implementing JavaScript to override inline CSS styles

Is it possible to override inline CSS using JavaScript with compatibility for IE6? I came across a pure CSS solution, but unfortunately it doesn't work in IE. http://www.sitepoint.com/blogs/2009/05/27/override-inline-css/ <div class="block"> ...

javascriptjquerycssinternet-explorer

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

javascriptjqueryhtml

The CSS styles are not being rendered on the page

My simple static html/css project seems to be having trouble applying styles to the html elements in stackblitz. You can view the project here. I'm wondering if there might be an issue with linking the css file using the link tag, or perhaps it's ...

htmlcssstackblitz

Storing an HTML file in a designated directory using ASP.NET

After creating a simple program that generates an HTML document based on user input, I encountered an issue. Currently, when the user clicks a button, the document is automatically downloaded onto their machine using the following code: Response.C ...

asp.nethtmlfilesave

Is it possible to incorporate shadows on a pie chart using recharts?

Does anyone know how to enhance a pie chart with shadows using the recharts library? https://i.sstatic.net/JLGVF.png https://i.sstatic.net/f5qv4.png If you have any solutions, please share. Thank you! ...

cssreactjssvgrecharts

Click event dynamically bound to list items

I have a web application built with Durandal and Knockout. Here is the HTML code snippet: <ul id="header"> </ul> In a JavaScript function, I am dynamically adding a list item as follows: $("#header).append('<li id="btn"><a hre ...

javascriptjqueryhtmlknockout.js