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

Adjusting the properties of a <span> tag when hovering over a different element

Query: I am trying to dynamically change the color of the span element with classes glyphicon and glyphicon-play when the user hovers over the entire element. How can I achieve this? Recommendation: .whole:hover > span.glyphicon.glyphicon-play { c ...

csshover

Steps to turn off a Material UI CSS class for an element universally

Utilizing the Material UI Typography element with the css class MuiTypography-h1, I am seeking to globally disable its usage throughout the entire codebase. <Typography variant="h1" sx={{ width: '100px', height: '55px ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to adjust the width of my editor file in vscode to prevent the need for horizontal scrolling when reading a paragraph to the end?

My lorem ipsum text in vscode is displaying as one long line, forcing me to scroll horizontally instead of seeing it formatted into paragraphs. https://i.stack.imgur.com/LIja8.png Is there a way to adjust the width of the editor box to prevent the need f ...

htmlvisual-studiovisual-studio-codecode-editor

The alignment of Div elements is off in IE8

I have been struggling to align two divs side by side without any empty spaces on IE 8. Everything looks perfect on Chrome Version 35.0.1916.153 m and Firefox 30.0, but IE 8 seems to be causing some issues. All I want is a main div with two child divs ali ...

htmlcssgoogle-chromefirefoxinternet-explorer-8

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

javascriptphpjqueryhtmlcss

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

javascripthtmlcssfocus

Comparison of HTML's equivalent to LaTeX's label and ef functionality

I have a Frequently Asked Questions page coded in HTML (example) where the questions often refer to one another. This results in the numbering changing whenever we add, delete, or rearrange the questions. LaTeX provides an elegant solution to this problem ...

htmldocumentationlatexdocumentation-generation

Unveiling the Mystery: Why YUI-3 Grids & Google Chrome Cause Overlapping Texts

Although I'm not well-versed in UI design, I find myself having to work on some CSS for a side project. Currently, I am utilizing YUI-3 files such as grids, reset, and fonts, all version 3.9.1. The main issue I am encountering is that the text inside ...

cssgoogle-chromeyui

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

javascriptjqueryhtmlcss

Loading a specific number of rows in Datatables upon page loading: How to do it?

Recently, I came across a code snippet that uses AJAX to retrieve data from a specific URL and then displays the information in a table. However, I have a requirement to only load and display the first 10 rows of data during the initial page load process. ...

javascriptjqueryhtmldatatables

Is there a way to shift a button within a div to the right while maintaining alignment?

After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered. Can someone please assist me with this? Also, if there are multiple sol ...

css

"Learn the process of converting HTML content into a string in an Android application and then displaying

I utilized this/this to Print Receipts in part of POS(Point of Sale) from EPSON Printer Obtaining data Json from URL (within the Json Object is html print template): { "response": { "status": "<table>.... </table>" } } Hence, ...

androidhtmlurlprintingplaintext

"What is the best way to use jQuery to create a toggle effect where one button controls the state

I'm looking to improve the efficiency of my code, but I'm not sure where to start in terms of making it more concise and organized. Any suggestions on how to streamline this code and keep it neat would be greatly appreciated. $(document).ready(fu ...

javascripthtmljquery

How can one guide a glTF model in the direction it is pointed using A-frame?

I have a 3D model of my customized robot loaded in an A-frame scene using version 1.0.4. Currently, I am able to rotate the robot along its x, y, z axes, but I am facing an issue where it continues to move in its original direction rather than the one it i ...

javascripthtmlaframe

What is the best way to retrieve the current value of an *ngFor loop upon button click?

I have been attempting to retrieve the data.login value of the data item that the user has clicked on the avatar image. Despite my efforts, I have not been able to successfully achieve this through various methods found online. How can I access the current ...

htmlnode.jsangularngfor

Responsive Font Sizing in React Native

Does React Native automatically adjust font size based on screen size? If I set the fontSize to 10 for a Text component, will it resize according to different phone sizes? If not, what is the best way to make fonts responsive in React Native? ...

cssreact-nativeresponsive-design

Creating a Rectangular Trapezoid Shape with CSS - Eliminating Unnecessary Spacing

I'm trying to create a trapezoid button using CSS. Here is the intended look: However, my current implementation looks like this: The button appears fine but there seems to be some excess space below it. It's almost like an unwanted margin, ev ...

cssvue.jsuser-interfacesass

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

html

Selecting and Uploading Multiple Files in Internet Explorer (less than version 9)

I have been struggling with selecting and uploading multiple files at once to the server. Here is the code I am currently using: <html> <body> <form action="upload.php" method="post" enctype="multipart/form-data" name="myForm"> <l ...

phpjavascripthtmlfile-upload

Having trouble importing Google Fonts using Styled Components and Next.js?

I encountered an issue while attempting to load Google Fonts. I came across a solution that suggests adding the following code snippet in _document.js to import it within a head tag: import React from 'react'; import Document, { Html, Head, Main, ...

cssreactjsnext.jsserver-side-renderingstyled-components