Simple CSS Menu with Multiple Sub Menu

Developer
Max
Size
2,728 Kb
Views
16,192
  1. Simple CSS Menu with Multiple Sub Menu Previews
  2. Simple CSS Menu with Multiple Sub Menu HTML Codes
  3. Simple CSS Menu with Multiple Sub Menu CSS Codes
  4. Simple CSS Menu with Multiple Sub Menu JS Codes

How do I make an simple css menu with multiple sub menu?

CSS menu to style multiple sub-menu and add or remove active class from the clicked menu using jQuery.. What is a simple css menu with multiple sub menu? How do you make a simple css menu with multiple sub menu? This script and codes were developed by Max on 21 November 2022, Monday.

Simple CSS Menu with Multiple Sub Menu Previews
IQ Test

Simple CSS Menu with Multiple Sub Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS Menu with Multiple Sub Menu</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ div.nav{ padding: 20px;
}
div.nav > ul, div.nav > ul > li, div.nav > ul > li > a{ margin: 0; padding: 0;
}
div.nav ul > li{ display: inline-block; list-style-type: none; position: relative;
}
div.nav ul > li > a{ text-decoration: none; background: #de1d8a; border: 1px solid #de1d8a; border-right: 5px solid #1d8ade; color: #fff; font-size: 18px; font-family: "Trebuchet Ms", sans-serif; padding: 10px; display: block;
}
div.nav ul > li > a:hover, div.nav ul > li.active > a{ background: #fff; color: #de1d8a;
}
div.nav ul > li > div{ position: absolute; left: 0px; display:none; width: 600px; overflow: hidden;
}
div.nav ul > li:hover > div{ display:block;
}
div.nav ul > li > div > ul{ float: left; margin: 0; padding: 0;
}
div.nav ul > li > div > ul > li{ display: inline;
}
div.nav ul > li > div > ul > li > a{ background: #1d8ade;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="nav">
<ul> <li> <a href="#">Lorem</a> <div> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Aliquam</a></li> <li><a href="#">Vestibulum auctor</a></li> </ul> <ul> <li><a href="#">Consectetuer adipiscing elit.</a></li> <li><a href="#">Mauris eu risus.</a></li> <li><a href="#">Dapibus neque.</a></li> </ul> <ul> <li><a href="#">Dolor sit amet</a></li> <li><a href="#">Tincidunt</a></li> <li><a href="#">Dapibus neque.</a></li> </ul> </div> </li> <li><a href="#">Ipsum</a></li> <li> <a href="#">Doler</a> <div> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Aliquam</a></li> <li><a href="#">Vestibulum auctor</a></li> </ul> <ul> <li><a href="#">Consectetuer adipiscing elit.</a></li> <li><a href="#">Mauris eu risus.</a></li> <li><a href="#">Dapibus neque.</a></li> </ul> </div> </li> <li><a href="#">Sit</a></li> <li> <a href="#">Amet</a> <div> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Aliquam</a></li> <li><a href="#">Vestibulum auctor</a></li> </ul> </div> </li>
</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple CSS Menu with Multiple Sub Menu - Script Codes CSS Codes

div.nav{ padding: 20px;
}
div.nav > ul, div.nav > ul > li, div.nav > ul > li > a{ margin: 0; padding: 0;
}
div.nav ul > li{ display: inline-block; list-style-type: none; position: relative;
}
div.nav ul > li > a{ text-decoration: none; background: #de1d8a; border: 1px solid #de1d8a; border-right: 5px solid #1d8ade; color: #fff; font-size: 18px; font-family: "Trebuchet Ms", sans-serif; padding: 10px; display: block;
}
div.nav ul > li > a:hover, div.nav ul > li.active > a{ background: #fff; color: #de1d8a;
}
div.nav ul > li > div{ position: absolute; left: 0px; display:none; width: 600px; overflow: hidden;
}
div.nav ul > li:hover > div{ display:block;
}
div.nav ul > li > div > ul{ float: left; margin: 0; padding: 0;
}
div.nav ul > li > div > ul > li{ display: inline;
}
div.nav ul > li > div > ul > li > a{ background: #1d8ade;
}

Simple CSS Menu with Multiple Sub Menu - Script Codes JS Codes

$(function(){ $("div.nav ul > li > a").click(function(evt){ evt.preventDefault(); var obj = $(this), objParent = obj.parent(), allLi = objParent.parent().find("li"); $("div.nav li").removeClass("active"); allLi.removeClass("active"); objParent.addClass("active"); }); $("div.nav ul > li > div > ul > li > a").click(function(evt){ var obj = $(this), objParent = obj.parent();
//Add the "active" class to parent nav objParent.parent().parent().parent().addClass("active"); });
});
Simple CSS Menu with Multiple Sub Menu - Script Codes
Simple CSS Menu with Multiple Sub Menu - Script Codes
Home Page Home
Developer Max
Username maxds
Uploaded November 21, 2022
Rating 3
Size 2,728 Kb
Views 16,192
Do you need developer help for Simple CSS Menu with Multiple Sub Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Max (maxds) Script Codes
Name
Table border-collapse property
JQuery Social Sharer
Image Magnifier Using jQuery
A Pen by Max
CSS3 Word Wrapping
JqProgressBar
Highlight a DIV and fade others using CSS
GetUrlParameters
JQuery Data Filter
Encode image to Base64
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!