Creating a sleek CSS drop-down navigation menu

I seem to be facing an issue with the side navigation drop down menu. Below are the link and CSS code:

<nav id="nav">
    <div class="menu-main_nav-container"><ul id="menu-main_nav" class="menu"><li id="menu-item-270" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-270"><a href="http://449design.net/clientpages/gamiing/">Home</a></li>
<li id="menu-item-271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/">About Us</a>
<ul class="sub-menu">
    <li id="menu-item-283" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-283"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/history/">History</a></li>
    <li id="menu-item-282" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-282"><a href="http://449design.net/clientpages/gamiing/home/mandate-and-mission/">Mission and Mandate</a></li>
    <li id="menu-item-291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-291"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/what-gamiing-does/">What Gamiing Does</a></li>
    <li id="menu-item-290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/our-board/">Our Board</a></li>
    <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/corporate-reference-manual/">Corporate Reference Manual</a></li>
    <li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/our-shop/">Our Shop</a></li>
    <li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/resources/">Resources</a></li>
    <li id="menu-item-286" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286"><a href="http://449design.net/clientpages/gamiing/links/">Links</a></li>
    <li id="menu-item-285" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-285"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/advocacy/">Advocacy</a></li>
</ul>
</li>
...
#nav ul.sub-menu li a:hover {color: #000;}

/*Second Level*/
#nav .sub-level {
    background: #999;
}

/*Third Level if needed*/
#nav .sub-menu .sub-menu {
    background: #09C;
}

It seems that there is an issue where parts of the drop-down menu disappear when hovered over or are difficult to use. I have been trying to find a solution for this problem without success.

cssnavigation

Answer №1

Your #header section appears to be covering the navigation bar. To resolve this, insert the following CSS code:

#header {
   width: 85%;
   float: left;
}

nav {
   //margin-left: 3%; please delete this line
}

Answer №2

Here is a possible solution:

#navbar ul .subnav:hover,
#navbar ul:hover .subnav {

    background-color: #98f79a;
    border: 2px solid #000;
    display: block;
    position: absolute;
    left: 120px;
}

Answer №3

For an improvement on #nav, consider incorporating the following additions:

position: relative;
z-index: 1;

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 define css attributes for the "before" and "after" pseudo elements in the DOM

I'm looking to modify the color of the "border-left" property from its default red to a different color within the scope, such as blue. .hello:before { content:' '; display:inline-block; width: 22px; height: 25px; ...

htmlcss

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

Issues with the use of overflow:hidden

I need to create 5 divs aligned horizontally next to each other, spanning the width and height of the window. Each div should occupy 20% of the window width, and any overflow content should be hidden. Below is the CSS code for two of the divs: #container1 ...

htmlcss

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had ...

jquerycssinternet-explorer-8

Troubleshooting jQuery masonry problem related to initial display and height settings

Within a div, there is a masonry container with the inline style property display:none. With several divs on the page, clicking their respective buttons during load causes them to switch like a slideshow. This disrupts masonry's ability to calculate t ...

javascriptcssheightjquery-masonry

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

javascriptphpjqueryhtmlcss

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...

cssbrowserchart.jsresize

Images of equal height without compromising the resolution

How can I create responsive images with the same height inside a DIV tag, with a specified height of 200px? Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="desc ...

htmlcss

Foundation 5.2.2: Creating a Dropdown Menu

Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...

htmlcssnavigationzurb-foundationnavbar

Incorporating Bootstrap into a fresh project

I'm completely new to the world of development, so I'll do my best to phrase this question correctly! Last month, I successfully created my first web application using RoR and Bootstrap for some visual enhancements. Currently, I am working on a ...

htmlcsstwitter-bootstrap

"Trouble with Material-UI DataGrid: Column headers are being cut off

I am facing an issue where my column names are getting cut off even though they should fit in the available space. ...

cssreactjsmaterial-ui

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui

How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code: <fieldset><legend>Callout Report</legend> <table> <tr><td>Start Time</td><td> <input type="text" id="startTimeUI" autocomplete="off" /> </td></tr> <tr><td& ...

htmlcsshtml-tablemultiple-columns

ReactJS -- Button Overlay Issue: Unresponsive Clicks when Positioned on Top of List

Please check out the Code Example in my Code Sandbox demo that I have set up https://codesandbox.io/s/W7qNgVnlQ I am trying to get the button action of the Floating Button to work, but currently it is triggering the Action assigned to the ListItem instea ...

htmlcssreactjsoverlaymaterial-ui

Trying to arrange HTML elements in a diagonal configuration while ensuring they are all uniform in size

My goal is to create an attractive splash page with diagonal, circular links that are all the same size. The <p>'s will function as the links, but I'm struggling to figure out how to make them all diagonal and uniform in size. I've ex ...

htmlcssflexbox

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

javascriptjquerycsstabs

The word-wrap property does not function properly in the <small> element or any other HTML elements

My code has a small issue with the word-wrap property not working as expected. When I change it to a div element, it works fine but I need to use the small or another specified element. Does anyone have any ideas why the word is not breaking and what could ...

htmlcss

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: However, I haven't been able to achieve the desired result with the following code: <img height="632" width="428" sr ...

htmlcssimagetwitter-bootstrapalignment

Struggling with color styling within link_to tags in Rails 4 - having trouble getting inline styling to show up correctly

<%= link_to "Sign In", new_user_session_path, :method => :get, style: "color:white" %> <h3>Read More - <%= link_to 'Article', action: :articles, style: "color: purple" %></h3> <%= link_to 'Click to Read More Abo ...

htmlrubycssruby-on-rails-4sass

CSS can be utilized to craft intricate and dynamic shapes

Currently, I am attempting to produce a trapeze-like design utilizing various techniques in order to achieve the best possible outcome. The shape I am aiming to create is similar to this: (the content inside the shape will consist of images and text) Th ...

csscross-browser