Member Avatar for teshi

please how can I create menu and submenus using html code

  • 5 Contributors
  • 5 Replies
  • 425 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

A compact, practical follow-up to what's already here: ’s “google it” and ’s link are fine starting points, and ’s UL/CSS pattern is the common baseline. Below are focused, modern improvements and debugging checks that are often missing from basic examples.

Keep the markup semantic and progressive: wrap links in a nav with ul/li/a so assistive tech sees a navigation block. For interactivity, prefer progressive enhancement — CSS for simple hover/focus behavior and a small JS toggle only where touch or complex keyboard handling is required. Add aria-haspopup="true" on parents and toggle aria-expanded="false" → "true" when submenus open so screen readers get the state change. Use the :focus-within pseudo-class to show submenus on keyboard focus without JavaScript.

Common problems and quick fixes: clipped submenus usually come from an ancestor with overflow: hidden or from missing position: relative on the parent when the submenu is absolutely positioned; check computed styles in devtools. Z-index issues are solved by setting a higher stacking context on the menu and avoiding unexpected transforms on ancestors. Hover-only menus break on touch — implement a click/touch toggle or a lightweight JS handler that prevents the default link navigation on first tap. Large submenu widths can push layout on small screens; convert to an accordion or a stacked list below a breakpoint.

Accessibility and testing: ensure all menu items are reachable with Tab, support arrow keys or at least Esc to close, and verify with a keyboard-only pass and a screen reader. Keep touch targets comfortably large and keep the DOM shallow for faster rendering on low-end devices. Those tweaks make the simple UL/CSS solution more robust across devices and users.

Recommended Answers

All 5 Replies

Member Avatar for PsychicTide

You could use CSS or any number of javascripts to accomplish this... just google drop down menu and you'll find what you need.

Member Avatar for itsjareds

just google [...] and you'll find what you need.

+1

Is that not the answer to everything?

Member Avatar for PsychicTide

lol you make a persuasive argument... that's how I found Dani web =)

Member Avatar for sreein1986

we can design drop down menu(sub menus) using through css and JavaScript. It is very easy to do drop down menu in Dreamweaver.

below link have many types of drop down menu with CSS and JavaScript, please check
http://www.dynamicdrive.com/dynamicindex1/indexc.html

Member Avatar for MJ Pieterse

i think it would be easiest to create a li menu with css styling. for example your html code will be something like:

<ul id="nav">
  <li><a href="home.html">Home</a>
  <ul>
    	<li>&nbsp;</li>
    </ul>
  <li><a href="Eat/EatHome.html">Eat</a></li>
  <li><a href="Drink/DrinkHome.html">Drink</a></li>
  <li><a href="help.html">Help</a></li>
  <li><a href="../options.html">Options</a></li>
</ul>

and your css would be for example:

/*nav*/

#nav {
	position:relative;
	width:755px;
	padding:0 0 28px 15px;
	margin-left:11px;
	float:center;
	list-style:none;
	line-height:25px;
	background:#004E69;
	font-size:12px;
}
#nav LI {
	float:left;
	margin:0;
	padding:0;
	display:block;
}
#nav A {
	display:inline;
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
	background:#004E69;
	margin:0;
	padding:0px 15px;
	border:0;
}

#nav A:hover,
#nav A:active,
#nav A.here:link,
#nav A.here:visited {
	color:#FF9900;
}

#nav A.here:link,
#nav A.here:visited {
	position:relative;
	z-index:102;
}

/*subnav*/

#nav UL {
	position:absolute;
	left:0;
	top:25px;
	float:center;
	background:#EBEBEB;
	width:757px;
	margin:0;
	padding:3px 3px 8px 10px;
	list-style:none;
	height:20px;
	font-size:11px;
}
#nav UL LI {
	float:left;
	display:block;
	margin-top:1px;
}
#nav UL A {
	background:#EBEBEB;
	color:#FF3300;
	display:inline;
	margin:0;
	padding:0 10px;
	border:0
}

#nav UL A:hover,
#nav UL A:active,
#nav UL A.here:link,
#nav UL A.here:visited {
	color:#024e85;
}

just add your own style to it, and your own headings. the second ul li is your sub menu

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.