https://codetones.com
  • How To Remove UnTab Extension on Web Browser? >> UnTabs extension could be a malicious browser helper which specifically... << Read More >>
  • How to Speed Up Your WordPress | Top Tips to Optimize Your WordPress Website >> WordPress is the world's fastest CMS (Content Management System) name... << Read More >>
  • How Web Designers Will Start Freelancing >> Working with Web Designing is a good option to start... << Read More >>
  • How the E-mail Server System Works >> The short form of electronic mail is email which is... << Read More >>
  • What is the Domain Authority or the Page Authority? How do I check the Domain Authority account? >> Google's rating is ranked 200 by checking whether to show... << Read More >>
  • SEO Friendly Image For Your Website Blog >> If you do not have a web search for traffic... << Read More >>
  • How To Change Your Wi-Fi Router Password - How To Change Router Password >> I am telling today is almost the same in almost... << Read More >>
Facebook Twitter Google Plus Linkedin RSS Youtube

Codetones

Only for Creative mind

  • Home
     
  • PC Helpers
     
  • Technews
     
  • Tutorials
     
    • HTML
    • CSS
    • PHP
    • WordPress
  • Code FAQ
     
  • Users
     
    • Login
    • Create An Account
  • About Us
     
  • Contact Us
     
Home Page > Tutorials > HTML > How to create Menu and Submenu with HTML and CSS?

How to create Menu and Submenu with HTML and CSS?

author Author: alexmorgan

icon-calendar Date: 3 years ago

view Views: 3719

icon-comment Comments: 0

Share on

Facebook Twitter Google Plus Linkedin
Create Menu and Submenu

Menu and submenu is the integrated part of a website. It can be easily done with html and css. In this article you will know how to easily make Menu and Submenu option for you website. Easy hoverable dropdown menu with CSS and HTML. Here is the full script which you can make Dropdown menu option for your webpage.

menu-submenu.png

CSS Style Sheet:

*{margin:0; padding: 0;}
body { background:#ffffff;}
#navcont { margin-top:20px;width: 100%;}
#nav { 
font-family: Verdana;
position:relative;
width:910px;
height:36px;
font-size:14px;
color:#000;
margin: 0 auto;
font-weight:bold}
 
#nav ul {list-style-type:none; }
 
#nav ul li {float:left;position: relative;}
#nav ul li a {
padding:10px; display:block;
text-decoration:none;
text-align:center;
color:#000;}
 
#nav ul li a:hover {background: #12aeef; color: #ffffff;}
#nav ul li ul {display: none;}
#nav ul li:hover ul {
display: block;
position: absolute;
top:35px;
min-width:190px;
left:0;}
 
#nav ul li:hover ul li a {
display:block;
background: #6CC ;
color:#000;
width: 160px;
text-align: center;
border-bottom: 1px solid #f2f2f2; border-right: none;
border:1px solid #333}
 
#nav ul li:hover ul li a:hover { 
background:#6dc7ec;
color:#000; margin:1px auto 1px 15px;
transition: margin 2s linear 1s; 
border:1px solid #000}

HTML Code:

<html lang="en">
<head>
<title>Drop Down Menu</title>
</head>
<body>
 
<div id="navcont">
<div id="nav">
<ul>
<li class="borderleft"><a href="#">HOME</a></li>
<li class="borderleft"><a href="#">TUTORIAL</a>
<ul>
<li class="top"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP/Mysql</a></li>
</ul>
</li>
<li class="borderleft"><a href="#">ELECTRONICS</a>
<ul>
<li><a href="#">BASIC</a></li>
<li class="top"><a href="#">ANALOG </a></li>
<li><a href="#">DIGITAL</a></li>
<li><a href="#">MICROCONTROLLER</a></li>
<li><a href="#">PROJECT</a></li>
</ul>
</li>
 
<li class="borderleft"><a href="#">TEMPLATE</a>
<ul>
 
<li class="top"><a href="#">WORDPRESS</a></li>
<li><a href="#">JOOMLA</a></li>
<li><a href="#">HTML</a></li>
 
<li><a href="#">BLOGGER</a></li>
<li><a href="#">DRUPAL</a></li>
</ul>
</li>
 
<li class="borderleft"><a href="#">TECHNOLOGY</a></li>
<li class="borderleft"><a href="#">EDUCATION</a></li>
<li class="borderleft"><a href="#">NEWS</a></li>
<li class="borderleft"><a href="#">ABOUT US</a></li>
<li class="borderleft"><a href="#">CONTACT</a></li>
</ul>
 
</div>
</div>
</body>
 
</html>

For further query comment below. Don't forget to subscribe in this website for up coming dynamic menu and submenu option of a website.

Related Posts

New Feature in HTML5

New Feature in HTML5

Top 10 HTML5 Interview Question

Top 10 HTML5 Interview Question

New Input Types In HTML5

New Input Types In HTML5

New Form Attributes Of HTML5

New Form Attributes Of HTML5

Leave a Reply

Codetones Adblocker Notice

AdBlocker Detected

Please disable your adblocker
This site is supported by the advertisement
Please disable your adblocker to support us !

Online Tools

  • Image Convertor
  • File Convertor
  • Watermark On Image
  • Hash Password
  • Secure Password Generator
  • Color to Black & White Image
  • Black & White to Color Image

Popular Posts

How to Speed Up Your WordPress | Top Tips to Optimize Your WordPress Website
How to Speed Up Your WordPress | Top Tips to Optimize Your WordPres...
How To Increase The Battery Life Of The Laptop
How To Increase The Battery Life Of The Laptop
The Importance Tips To Start a Professional Web Pages Designing
The Importance Tips To Start a Professional Web Pages Designing
How to reset forgotten windows password?
How to reset forgotten windows password?
Blogger.com A to Z Important Setting
Blogger.com A to Z Important Setting
Large-Skycraper

Categories

  • HTML
  • CSS
  • PHP
  • WordPress

Join Codetones

Facebook Twitter Google Plus Linkedin RSS Youtube

Codetones

Codetones is the Web Solution Base Website. Here You Can Find Beginner to Advanced Level Tutorials.

Support

  • About Us
  • Contact Us
  • Codetones Mobile Apps

Accessibility

  • Terms of Use
  • Privacy Policy
  • Site Map
© Copyright 2019 Codetones. All Right Reserved

Powered by Codetones