Drifting my dropdown menu bar through the digital sea

I'm having trouble with my navigation bar and I need help styling it. I want the navigation bar to have a dropdown menu when the user hovers over the top level of the navigation bar. The issue I am facing is that the second level of the navigation bar is not displaying correctly.

Here is my HTML code:

<div id="menubar">
  <ul id="menu">
    <li class="selected"><a href="">Home</a></li>
    <li><a href="">Volunteers</a>
      <ul>
        <li><a href="">Add</a></li>
        <li><a href="">View</a></li>
        <li><a href="">Update</a></li>
      </ul>
    </li>
    <li><a href="">Packaging Session</a>
      <ul>
        <li><a href="">Add</a></li>
        <li><a href="">View</a></li>
        <li><a href="">Update</a></li>
      </ul>
    </li>
  </ul>
</div>

And here is my CSS code:

#menubar
{
  width: 900px;
  height: 72px;
  padding: 0;
  background: #1293EE;
}

ul#menu, ul#menu li
{
  float: left;
  margin: 0;
  padding: 0;
}

ul#menu li
{
  list-style: none;
}

ul#menu li a
{
  letter-spacing: 0.1em;
  font: normal 100% arial, sans-serif;
  display: block;
  float: left;
  height: 37px;
  padding: 29px 26px 6px 26px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
}

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{
  color: #FFF;
  background: #0D66A5;
}

ul#menu li ul li a
{
  display: none;
  height: auto;
  margin: 0;
  padding: 0;
  position:absolute;
}

If there are any suggestions on how to style the second level of the navigation bar properly in Google Chrome or Internet Explorer, please let me know.

htmlcssdrop-down-menu

Answer №1

Instead of simply hiding individual a tags within the dropdown menu, consider hiding the entire ul element instead. In doing so, you can use the hidden ul as a positioning element and style the contained li's and a's just like any other element on the page.

For an example, check out this link: http://jsfiddle.net/gd2SX/

Focus on the section labeled "Added styles" to see how this technique is implemented.

Answer №2

Check out the informative and detailed article on floating menus by HTMLDog titled Sons of Suckerfish.

Make sure to explore the section about dropdowns, especially the sample they offer.

This resource will not only help you solve your floating menu issue but also improve other aspects of your website.

If you're facing a similar problem, my suggestion is to temporarily disable menu hiding, style everything as if all submenus are open, and then re-enable submenu hiding with this code:

/* Lists directly inside list-items. */
li>ul {
  display: none;
}
/* Lists directly inside hovered list-items. */
li:hover>ul,
li.selected>ul {
  display: block;
}

By following these steps, fixing the issue should be much simpler for you.

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

Creating a visible block in ReactJS: Step-by-step guide

Hello and thank you for all the hard work you do on this platform. I am relatively new to working with ReactJS and have been encountering some difficulties trying to integrate it with sandbox environments like JSFiddle. I have a div element named "app-con ...

cssreactjsjsfiddle

As you scroll, the top block in each of the three columns will remain fixed within its

I need assistance with a problem involving three columns and multiple blocks within each column. Specifically, I want the first block in each column to remain fixed at the top when scrolling. However, once you reach the bottom of each column, the first blo ...

javascriptcsssticky

Achieve vertical center alignment of text without using line height or table cells

Looking to add a "toggle" animation on my Teaser, here's the code: .ax { height:60px; width:150px; background:gold; } .caption { position: absolute; left:0; top: 35%; overflow: hidden; right: 0; background-colo ...

cssvertical-alignment

Challenges with uploading files using jQuery

Click here to upload a file I'm trying to create a feature where users can choose an image and have it displayed in place of the "trees" image. Feeling stuck, I could really use some guidance. Check out the code below: <div class="user-editab ...

phpjqueryhtmlcssupload

How can I match dates in order to run the following code?

If Purchase Date is after 31/Mar/xxxx it should not calculate elap_yend, rem_days, depre_cur, cur_wdv. Also I have to calculate GST with some options that is if SGST and CGST are chosen, I should not calculate IGST else if IGST selected or marked it shoul ...

javascriptjqueryhtmlajax

Display or conceal form elements depending on the JSON response

Upon making an api call, a json Response is received with the following structure: {"Field":"Amount","FieldName":"Amount","FieldType":"Numeric","MaximumLength":128,"MinimumLength":0,"Options":"Mandatory"} This api call yields between 5-10 of these object ...

javascriptjqueryhtmljson

Adjust the dimensions of the text area to modify its height and width

Can someone help me adjust the width and height of the <textarea> tag in HTML so that it only has two lines (rows)? Right now, it's only displaying one line. Any suggestions on how to solve this issue? Even when I try changing the width to 1000 ...

htmlcssasp.nettwitter-bootstraptextarea

Click on the navigation bar buttons to toggle between different divs and display multiple information boxes simultaneously

Here is the current code snippet... $("#contact").click(function() { if ( $( "#contact_div" ).length ) { $("#contact_div").remove(); } else { var html='<div id="contact_div" class="contact-info"><p>Contact info</p&g ...

javascriptjqueryhtmlcss

Incorporate multipart data into your HTML form for increased versatility and

Can HTML form input values be set as multipart data? I am attempting to prepare an image for upload while submitting an HTML form (the desired remote image data is generated by PHP). For example: <form action="http://remote_site.com" method="post" en ...

phphtmlformsmultipartform-data

Tips on using b-table attributes thClass, tdClass, or class

<template> <b-table striped hover :fields="fields" :items="list" class="table" > </template> <style lang="scss" scoped> .table >>> .bTableThStyle { max-width: 12rem; text-overflow: ellipsis; } < ...

javascriptcssnode.jsvue.jsbootstrap-vue

Remove the styling of the text decoration from the child element

In order to style the parent element differently from the child element, you can use specific CSS rules for each. For example, you may want to underline the parent element while leaving the child elements unaffected. .parent { text-decoration: underli ...

htmlcss

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Do HTML elements that have the css property visibility:hidden still exist within the DOM tree? ...

javascripthtmlcss

Reactively responsive table view

I am new to CSS and recently discovered a responsive table on this website that I would like to incorporate into my application. My challenge is figuring out how to switch the table layout from left to right (headers on the right and values on the left) w ...

cssresponsive-designright-to-left

Tips for displaying a PNG image correctly within the navbar

I'm facing an issue with adding a logo to the navigation bar, as the logo I want to use doesn't display correctly. Even after trying to adjust the width and height, it continues to stretch inappropriately and the text on the image remains unread ...

htmlcssbootstrap-5

How can we sort an array based on the inner HTML values of its children elements in JavaScript?

Can you arrange a JavaScript array based on the innerText values of its HTML elements? I am generating a div element (class="inbox" id="inbox${var}") with a number as its innerText, then adding all these divs to an array (numArr). I wan ...

javascripthtmlarraysdomscope

Do not exceed 3 elements in a row when using Bootstrap's col-auto class

col-auto is excellent. It effortlessly arranges items by size in a row, but I need it to strictly limit the number of items in each row to a maximum of 3. Each row should only contain between 1-3 items. <link rel="stylesheet" href="https://cdn.jsdeli ...

htmlcssbootstrap-4bootstrap-5

Triggering a JavaScript function when the mouse moves off an element

Recently, I created the following code snippet for marquee effect. The main functionality it is missing is triggering a function on mouse-over. <marquee class="smooth_m" behavior="scroll" direction="left" scrollamount="3"> <span style="float:le ...

javascripthtmlmarquee

Display HTML using JavaScript/jQuery

I am trying to figure out how to print a document by passing custom HTML code. Below is the code I have tried, but unfortunately it's not working: function Clickheretoprint() { var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes, ...

javascriptjqueryhtmljquery-ui

Are there any reliable sources for a complete list of browser CSS properties?

Is there a way to easily access a comprehensive list of CSS properties supported by specific browsers, particularly IE8? Any suggestions on where I can find this information? ...

htmlinternet-explorercssbrowser

Incorporate a JSON file into the Webpack output separately from the bundle.js file

Is there a way for my webpack application to read a JSON file at runtime without including it in the bundle.js after packaging? I want the JSON file to be available in the package folder but not bundled with the rest of the code. How can I achieve this? ...

node.jshtmlreactjsnpmwebpack