Create to Responds Drop Down menu in CSS and HTML

Hello Friends!!

In this source codes we were going to teach you how to make responsive drop down menu in HTML using CSS. Here I am create two page first is index.html and second is style If you want to create drop down menu copy this code and save on your computer or download source code click on download link given below.

Style.css

<html>
 <head>
  <title>
  Html Cursor Code
  </title>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

}

.menu
{
    margin: 0 auto; width: auto;float:left;
    position:relative;
    z-index:4;
    height: 36px;
    background: #F5F5F5;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    list-style: none;
    padding: 0;
}

.menu div {
    box-sizing:content-box;
}

.menu li
{
    padding: 0;
    float: left;
    height: 34px;
    position: relative;
    z-index:5;
    border-left:1px solid;
    border-right:1px solid;
    border-top:2px solid;
    border-color:transparent;
 
}

.menu li:hover, 
.menu li.onhover
{
    border-color:#DDD;
    border-top:2px solid #B00;
    border-bottom:1px solid #DDD;
}
.menu a
{
    padding: 0 30px;
    line-height: 34px;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: #000;
    position: relative;
}


.menu li:hover a, 
.menu li.onhover a
{
    background-color: #EEE;
    color: #000;
    z-index: 9; 
}
.menu a.arrow
{
    background: url(arrow.gif) no-repeat right center;
}
 
        
    
.menu li.menuRight
{
    float: right;
    margin-right: 0px;
}
        
.menu li.separator
{
    display:none;
}
               
        
.menu .drop
{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    border-bottom:2px solid #B00;
    background: #FFF url(bg_grad.gif) repeat-x 0 0;
    text-align: left;
    padding: 20px;  
    top:31px;
}

.menu .drop a
{
    padding-left: 0px;
    padding-right: 0px;
    line-height: 24px;
    font-size: 12px;
    font-weight: normal;
    display: inline;
    text-align: left;
    
    position: static;
    z-index: 0;
}

.menu li:hover .drop, 
.menu li.onhover .drop
{
    left: -1px;
}
.menu li:hover .dropToLeft, 
.menu li.onhover .dropToLeft
{
    left: auto;
    right: -1px;
}
.menu li:hover .dropToLeft2, 
.menu li.onhover .dropToLeft2
{
    left: auto;
    right: -60px;
}

.menu div.drop div div
{
    padding: 6px 20px;
}

.menu div.drop div a
{
    line-height: 24px;  
    color: #048;
    background:none;
}
.menu div.drop div a:hover
{
    text-decoration:underline;
    cursor:pointer;
    color:Red;
}

.menu div.left {float:left;}

 
.decor2_1 
{
}


.decor2_2 
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0 0 14px #AAA;
    -webkit-box-shadow: 0 0 14px #AAA;
    box-shadow: 0 0 14px #AAA;  
}

Index.html

<html>
 <head>
  <title>
  Html Cursor Code
  </title><!DOCTYPE>
<html>
	<head>
		<title>
		www.nehrugroup.in
		</title>
		<link rel="stylesheet" href="style.css" media="all" />
	</head>   
	
<body>
	<h2>
Drop Down Menu</h2>
<br /><br />

	<ul class="menu">
<li><a href="#">Home</a></li>
<li class="separator"></li>
<li><a href="#" class="arrow">Our Services</a>
			<div class="drop" style="width: 640px;">
				<div class='left'>
					<b>Web Design</b>
					<div>
						<a href="#">Html</a><br />
						<a href="#">CSS</a><br />
						<a href="#">JavaScript</a><br />
						<a href="#">PHP & MySQL</a><br />
						<a href="#">Projects</a>
					</div>
</div>
<div class='left'>
					<b>Software</b>
					<div>
						<a href="#">C & C++</a><br />
						<a href="#">Java</a><br />
						<a href="#">VB </a><br />
						<a href="#">More Tool..</a>
					</div>
</div>
<div class='left'>
					<b>SEO Friendly</b>
					<div>
						<a href="#">Search engine friendly</a><br />
						<a href="#">css menu</a><br />
						<a href="#">Most popular SEO Tool</a><br />
						<a href="#">Best web designs</a><br />
						<a href="#">E-Commerce sites</a><br />
						<a href="#">HTML Templates with SEO</a><br />
						<a href="#">Design Templates</a><br />
						<a href="#">Clean layout</a><br />
						<a href="#">Modern and Stylish Templates</a>
					</div>
</div>
<div class='left' style="text-align:right; width:200px;">
					<img src="image/2.jpg" style="width:128px; height:128px;" /><br />
					Search Engine friendly
				</div>
<div style='clear: both;'>
</div>
</div>
</li>
<li class="separator"></li>
<li><a href="#">Programming</a></li>
<li class="separator"></li>
<li><a href="#">Image Gallary</a></li>
<li class="separator"></li>
<li><a href="#" class="arrow">Get in Touch</a>
			<div class="drop decor2_2 dropToLeft2" style="width: 500px;">
				<div class='left'>
					<b>SHOPPING TOOLS</b>
					<div>
						<a href="#">Build your script</a><br />
						<a href="#">Review current offers</a><br />
						<a href="#">See All ...</a>
					</div>
<b>RSS FEED</b>
					<div>
						<a href="#">Find a location</a><br />
						<a href="#">Request a test drive</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
<div class='left'>
					<b>Creative</b>
					<div>
						<a href="#">Build your script</a><br />
						<a href="#">Review current offers</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
<div class='left' style="text-align:right; width:160px;">
					<img src="image/1.png" style="width:128px; height:128px;" /><br />
					Contact Us
				</div>
</div>
</li>
<li class="separator"></li>
<li><a href="#" class="arrow">Web Designing</a>
			<div class="drop decor2_2 dropToLeft" style="width: 460px;">
				<img src="image/3.jpg" style="float:left; width:98px;
					height:180px;margin:10px 80px 10px 40px;" />
				<div class='left'>
					<b>Front End</b>
					<div>
						<a href="#">HTML</a><br />
						<a href="#">CSS</a><br />
						<a href="#">Javascript</a>
                   
					</div>
<b>Back End</b>
					<div>
						<a href="#">PHP & MySQL</a><br />
						<a href="#">ASP</a><br />
						<a href="#">See All ...</a>
					</div>
</div>
</div>
</li>
</ul>
</body>
</html>

Source Code

Advertisement

Wednesday, May 4, 2016

Create to Responds Drop Down menu in CSS and HTML

Create to Responds Drop Down menu in CSS and HTML

Style.css

Index.html

About Unknown -

Popular Posts

Find us on Facebook

Advertisement

Labels

Total Pageviews

Instagram posts

Category

About us