A step-by-step guide to creating a CSS menu using pure HTML markup

I have been working on the CSS for a menu using some HTML code, but I am stuck and uncertain about my next steps.

Here is the CSS I have added so far:

#menu-my-integra, ul.sub-menu {
    list-style: none;
  padding: 0;
  margin: 0;
}
#menu-my-integra li {
    display: inline;
    margin-right:10px;
}
ul.sub-menu {
    display:none;
}
#menu-my-integra li:hover ul.sub-menu {
    display: block;
    max-height: 200px;
}

Currently, the menu appears horizontally, but I would like to change it so that the sub menus are displayed in a vertical list below the parent item.

I have also created a fiddle here:

htmlcss

Answer №1

To successfully implement this design, I utilized the box-sizing:border-box attribute:

/*Initialization*/
ul#menu-my-integra, ul#menu-my-integra ul.sub-menu {
    padding: 0;
    margin: 0;
}
ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
    width: 20%;
    background: #666;
    text-align: center;
}
/*Link Style*/
ul#menu-my-integra li a, ul#menu-my-integra li ul.sub-menu li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 8px;
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
}
/*Set Parent for Sub-Menu*/
ul#menu-my-integra li {
    position: relative;
}
/*Sub Menu Appearance*/
ul#menu-my-integra li ul.sub-menu {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu-my-integra li:hover ul.sub-menu {
    display: block;
}

NOTE: Adjust the percentage width of the 'li' elements according to the total count present. Hopefully, this clarifies things!

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

Struggling with showcasing database information in HTML using Node.js and Sequelize

In the server.js file, I have the following code: TABLE .findAll({ raw: true }) .then(function(asd) { console.log(asd); }); This code displays all data from my database in the console. Now, my question is: how can I display this data on my website? ...

htmlnode.jssequelize.js

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

What could be causing my CSS relative positioning to malfunction?

I am struggling to adjust the positioning of my divs using relative and absolute properties. Any advice on how to resolve this issue would be greatly appreciated. Thank you. Example Code: <div id="game"><img src="gta-game.jpg" height="100" width ...

csscss-position

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

javascripthtmlcssreactjsweb-frontend

Exploring the power of Django Haystack search within your HTML pages

Just had a thought: is it possible to search directly in an HTML file, ignoring the tags if desired? I couldn't find a quick answer on Google. To explain further, we have a crawler that returns the HTML of a page. If I want to search the content of t ...

htmldjangosearchelasticsearchdjango-haystack

Adjust padding of radio button labels in Qualtrics for a cleaner, more streamlined appearance

As I delve into the world of CSS, my goal is to customize the existing survey theme known as "Minimal 2014". Specifically, my focus is on minimizing the spacing in various areas to create a more compact design. So far, I've successfully reduced the g ...

cssqualtrics

Leveraging JavaScript and HTML to extract a single data point from a JSON response

As a complete beginner, I want to clarify that I may not be using the correct terminology in my question. I am embarking on creating an HTML5/Javascript application with Intel XDK to retrieve barcode information for video games from an online API. Specifi ...

javascriptjqueryjsonhtml

Scroll within the inner container

I am currently working on creating panels, each with a header and content. My goal is to allow scrolling only within the content area. Here is the CSS I have been using: .content-div{ float:left; height: 400px; overflow-x:hidden; overflow-y:hidden; ...

htmlcss

The presentation of an HTML table varies between Gmail and web browsers

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" height="131" border="0" cellspacing="0" cellpadding="0"> <tr> <td wid ...

htmlcss

Move the page to the beginning of the vertical stepper upon clicking the "next" button

I am currently working on optimizing a lengthy form to enhance user experience. To illustrate my point, I have come across a simplified example of the code I am dealing with which can be found here. My primary goal is to ensure that when a user proceeds t ...

javascripthtmlangularmat-stepper

The variable $ has not been defined in Jquery framework

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="deployJava.js"></script> <script type="text/javascr ...

javascriptjqueryhtmljquery-uiweb

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

cssangulartypescript

Display duplicated options with Bootstrap selectpicker and organize them into optgroups

I have encountered an issue while trying to create a selectpicker using Bootstrap 5 with optgroups. The problem is that all option elements under each optgroup are identical and do not match the HTML structure I have defined in my file. This inconsistency ...

htmltwitter-bootstrapselectbootstrap-5

A guide to customizing the appearance of Textfield labels in Material-UI using React

Can someone assist me with changing the label color in Material-UI from grey to black? I am new to Material-UI and struggling to figure it out. Below is the code snippet: import React from "react"; import ReactDOM from "react-dom"; import { TextField, Bu ...

javascripthtmlcssreactjsmaterial-ui

Adding elements to a roster

Can anyone assist me with appending data from a csv file to an unordered HTML list? The csv file I have contains both single and grouped data for the list, as seen below: Test Group Name A,Test Link Name 1,Test URL 1 Test Group Name A,Test Link Name 2,Tes ...

javascriptjqueryhtml

"Adjusting the height of a div element while considering the

I have 2 elements with different heights and I want to make them equal: var highestEl = $('#secondElement').height(); $('.element').first().height(highestEl); I understand that the second element is always taller than the first one. W ...

javascriptcsshtmlheight

What are some solutions for resolving a background image that fails to load?

HTML: `<div class="food-imagesM imagecontainer"> <!--Page info decoration etc.--> </div>` CSS: `.food-imagesM.imagecontainer{ background-image: url("/Images/Caribbean-food-Menu.jpg"); background-repeat: no-repeat; backgroun ...

javascripthtmlcss

Do we need to duplicate structured data when listing nested objects, or is it better to avoid doing so?

We are currently focused on implementing JSON structured data for a one-page website that contains extensive information about a local business, including address, pricing, reviews, and services. The JSON snippet provided below represents the structured da ...

htmljsonschemagoogle-rich-snippetsstructured-data

Diverse Values within the Inner Border

Is it possible to create an inner border with unique values for each side? For instance: Top: 20px Right: 80px Bottom: 40px Left: 10px Can you provide an example of how this can be achieved? Thank you! :) ...

css

React App anchor tag's external links fail to function properly on subsequent clicks when accessed through mobile devices

I have encountered an unusual issue with <a> anchors for external links in my React App on mobile viewports. Initially, clicking an external link opens a new tab just fine on mobile. However, subsequent link clicks on the same or other <a> elem ...

javascripthtmlreactjs