Struggling to customize a CSS navigation menu?

In search of a skilled CSS professional to examine the CSS and HTML code for my website menu. To view the menu in action, visit

The main issue is that the sub menus are not displaying on the top level page, but they appear when navigating to specific pages like .

This code was generated by a free online menu builder that I can't recall. Therefore, I am unsure about what might be causing the problem.

Any assistance or guidance on fixing this issue would be greatly appreciated. Thank you!

htmlcssmenu

Answer №1

The main page is lacking the doctype declaration.

Currently, you have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If you add this to the main page, it should resolve the issue.

Answer №2

Have you ever wondered why generators are necessary for creating menus? In reality, all you need is this simple snippet of code:

.menu > li {display: inline-block; position: relative;}
.menu > li .sub {display: none; position: absolute; left: 0;}
.menu > li:hover .sub {display: block; margin: 0; padding: 0; list-style: none;}
<div>
  <ul class="menu">
    <li class="top"><a href="http://boltbait.com" target="_self" class="top_link"><span>Home</span></a>
    </li>
    <li class="top"><a href="/dominoes" target="_self" class="top_link"><span>Dominoes</span></a>
      <ul class="sub">
        <li><a href="/dominoes" target="_self">Double-Six Dominoes</a>
        </li>
        <li><a href="/dominoes/DoubleSix20.exe" target="_self">Download Now</a>
        </li>
        <li><a href="/dominoes/rules" target="_self">Domino Rules</a>
        </li>
        <li><a href="/dominoes/help" target="_self">Help</a>
        </li>
      </ul>
    </li>
    <li class="top"><a href="/pdn" target="_self" class="top_link"><span>Paint.NET</span></a>
      <ul class="sub">
        <li><a href="/pdn" target="_self">Free Paint.NET Plugins</a>
        </li>
        <li><a href="/pdn/CodeLab" target="_self">CodeLab</a>
        </li>
        <li><a href="/pdn/CodeLab/help" target="_self">CodeLab Help File</a>
        </li>
        <li><a href="/pdn/InstallingEffects.asp" target="_self">How to Install Paint.NET Plugins</a>
        </li>
      </ul>
    </li>
    <li class="top"><a href="/htmleditor" target="_self" class="top_link"><span>HTML Editor</span></a>
      <ul class="sub">
        <li><a href="/htmleditor" target="_self">Free HTML Editor</a>
        </li>
        <li><a href="/htmleditor/HTMLEditor.hta" target="_self">Download Now</a>
        </li>
        <li><a href="/htmleditor/Help.asp" target="_self">Help</a>
        </li>
        <li><a href="http://www.w3.org/MarkUp/Guide/" target="_blank">HTML Basics</a>
        </li>
        <li><a href="http://htmlhelp.com/reference/html40/alist.html" target="_blank">HTML Reference</a>
        </li>
      </ul>
    </li>
    <li class="top"><a href="/free/games" target="_self" class="top_link"><span>Free Games</span></a>
    </li>
    <li class="top"><a href="http://boltbait.com/donate" target="_self" class="top_link"><span>Donate</span></a>
    </li>
  </ul>
</div>

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

After a CSS animation, the Div element disappears from view

I recently implemented a CSS3 delayed animation on page load. Everything was working smoothly until I noticed that after the animation finishes, the DIV reverts back to visibility: hidden. .content-left { margin-left: 100px; margin-top: 32px; ...

htmlcsscss-animations

Using jQuery to apply CSS with relative percentage values (+=/-=/)

Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...

jquerycss

Creating a dynamic animation effect on a div with a changing number of child elements

Currently, I am utilizing the nganimate library and have implemented an animation that affects the max-height property of a div. Here is a snippet of my code: CSS .sublist.ng-hide { max-height: 0; } .sublist { max-height: 1300px; overflow: hidden; ...

cssangularjsng-animate

Position the Material UI Box element to the bottom of its parent container

Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...

cssreactjsmaterial-ui

What steps should I take to eliminate the white gap between the paragraph and the footer on my webpage?

If you're new to html and css, feel free to check out the url [file:///Users/CatherineDu/百度云同步盘/practice/about.html]. I'm currently working on building a simple website and facing an issue - there are unwanted white spaces between the ...

htmlcss

The issue with displaying inline block is that the divs are not appearing side by side on the

Two of my div elements, namely form-panel and data-panel, are currently not aligned on the same line. How can I use display:inline-block to align them in a single line? Please review the code provided below. I have already used display:inline-block on both ...

javascripthtmlcss

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss

Using Javascript to delete an HTML list

Currently, I am working on a webpage that includes notifications along with options to mark them as read individually or all at once. However, when attempting to use my loop function to mark all notifications as read, I noticed an issue. let markAllAsRead ...

javascripthtmlfrontend

Are there any JavaScript functions available that can navigate to a different HTML page?

Here is an example of the functionality I am attempting. Can it be implemented? function CloseHTML(){ ApplyCSSClosingTransition(); setTimeout(function() { RedirectToAnotherPage(); }, 2000); } <div onClick='CloseHTML()'&g ...

javascripthtmlhttp-redirecthyperlink

Start a new typescript project from scratch

Seeking assistance in setting up a blank TypeScript project with a package.json, TypeScript and HTML file. I am looking for something akin to the Stackblitz blank-typescript project. If anyone could provide me with a step-by-step guide on how to create su ...

node.jshtmltypescriptnpm

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

I am struggling with my code which has unnecessary information. <div> <div id="one" class="button"></div> <div id="two" class="button"></div> </div> <div> <div class="Home tab"> < ...

javascriptjqueryhtmlcss

Creating a grid layout similar to Tumblr using HTML and CSS

Struggling all day to figure out how to create a Tumblr-style grid for my website, I'm reaching out here for some assistance. Here is the page: I have a grid of images on my project page that initially looked fine, but as I try to add new elements, i ...

htmlcssimagegrid

Angular 8 dropdown menu that closes when clicking outside of it

Hello, I am currently using the click function on the p tag. When a user opens the dropdown menu, I want to close it when they click outside of it in Angular. Here is the HTML code: <div class="select_cat"> <p class="cat_name" (click)="openC ...

htmlangular

What is the best way to conceal a portion of a child element that exceeds the size of its parent container?

My <div> contains a <p>, but sometimes the text in the <p> exceeds the boundaries of the div. <div style="width: 100px'; height='100px';"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

htmlcss

Troubleshooting: Why isn't my CSS fixed position working for my sticky

I have a simple jQuery code snippet that is supposed to make the navigation element sticky by applying a class with position: fixed. However, I'm facing an issue on my Commerce platform where the fixed position property doesn't seem to work corre ...

javascriptjqueryhtmlcss

Having trouble getting the img file to show up in the img tag - the src URL is not updating

<div class="col-lg-3 col-md-4 pl-md-1"> <label class="ORGAd16-preview"> input type='file' name="modelvariant_file" id="imageUpload" accept=".png, .jpg, .jpeg" > <img id="ima ...

htmljquerylaravel

Designing a personalized carousel component in Angular

Looking to replicate this design, any tips? I'm aiming for a carousel layout with developers listed in a project, where the center item is larger than the others. Any guidance on how to achieve this look? ...

htmlcssangular

Python Selenium returning 'None' when attempting to retrieve the source attribute of an image

Having trouble retrieving the src of images in the class "KfFlO" using selenium. Whenever I try to print for the source, Python keeps returning "none." Can anyone help me identify the problem? Below is my code snippet: from selenium import webdriver from s ...

pythonhtmlimageselenium-webdriverweb-scraping

Needing to scroll within a dropdown menu has become a necessity for me

While working with Selenium for automation, I encountered a challenge in clicking on a hidden element within a dropdown menu. The issue is that when scrolling down the page, the entire page moves instead of just the specific dropdown. Here is the HTML cod ...

javahtmlseleniumselenium-webdriver

Run JavaScript upon the webpage loading without the dependency of jQuery

Is there a way to ensure that JavaScript code is executed only after the entire page has loaded, without relying on jQuery? Take this example... <html> <head> <script type="text/javascript"> var box = document.ge ...

javascripthtml