IT

Create submenu using html and CSS

create submenu using html and css

HTML and CSS are the father of all website language. It’s impossible to create a website without this. We are not going to say more than about this because all of the developers knows about it very well. This post is basically for those who is just in beginning stage of HTML and CSS. Now see, how to create submenu using  HTML and CSS.

Create submenu using HTML and CSS

Very first we have to open a new HTML file where we will basically link the CSS files. You are now can copy and Paste to create your own submenu.

Codes

CSS

#navigation{ width:750px; height:45px; margin:auto;}
#navigation ul{ margin:0px; padding:0px; list-style:none;}
#navigation ul li{ float:left; width:150px; position:relative;}
#navigation ul li a{ text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:14px; display:block; background:#0f6581; color:#ffffff; line-height:45px; text-align:center;}
#navigation ul li a:hover{ background:#3bbdcd; color:#000000;}
#navigation ul ul { position:absolute; visibility:hidden;}
#navigation ul li:hover ul{ visibility:visible;}
#navigation ul li:hover ul li{ float:left;}

HTML

<div id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about-us.html”>About Us</a></li>
<li><a href=”location.html”>Location</a></li>
<li><a href=”services.html”>Services</a>
<ul>
<li><a href=”staff-careers.html”>Careers</a></li>
<li><a href=”contact-us.html”>Contact us</a></li>
<li><a href=”click-here.html”>Click Here to View</a></li>
<li><a href=”Lifeline–Emergency.html”>Lifeline</a></li>
</ul>
</li>
<li><a href=”childrens-programs.html”>Programs</a></li>
</ul>
</div>

Now try it yourself. Just keep in mind that how many ornaments you provide that makes that kind of awesome.

Leave a Reply

%d bloggers like this: