How To Create Simple Menu Using CSS ?


By using CSS codes we can create websites menus more easily with very simple and small number of codes. So uses of CSS menus on websites makes your website lighter and faster, also runs on almost all of the browsers. Here I have given some useful steps and codes for creating simple menu using CSS. It may help you to make simple, attractive and awesome menu for your own website by using the following steps and codes.



To Create Simple Menu Using CSS


# At first create the following HTML codes on your webpage.

Replace the "#" with your link URL included in the HTML code below.

<div id="navigation">
 <ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Item1</a>
  <ul>
   <li><a href="#">SubItem1</a></li>   
   <li><a href="#">SubItem2</a></li>
   <li><a href="#">SubItem3</a></li>
   <li><a href="#">SubItem4</a></li>
  </ul>
 </li>
    
 <li><a href="#">Item2</a></li>
 <li><a href="#">Item3</a></li>
 </ul>
</div>

# Create a CSS file with the following codes.

Replace the 'back.jpg' with your image file included in the css code below.

#navigation{
  width:auto;
  height:30px;
  float:left;
  background-image: url('back.jpg');  
  border:none;
  margin-top:20px;
  margin-left:0px;
 }

#nav{
 list-style: none;
 padding:0px;
 display:block;
 margin-top:2px;

}

#nav li{
 font-size:20px;
 float:left;
 position:relative;
 width:180px;
 hight:50px;
 display:block;
 align:center;
 padding-left:10px;
 
}

#nav ul{
 list-style:none;
 margin:0;
 padding:0;
 width: auto;
 display:none;

}

#nav li:hover{
 background-image:url('back.jpg');
 background-repeat:no-repeat;
 background-size:cover;
}

#nav li:hover>ul{
 display:block;
 position:absolute;
 
}


#nav li ul{
 left:0px;
 margin-top:0px;
 padding-top:0px;
}

#nav li ul li{
 background-image:url('back.jpg');
 background-repeat:no-repeat;
 background-size:cover;
 border:1px solid #e3e3e3;
 padding-left:10px;
 width:178px;
}


#nav a:link, #nav a:active, #nav a:visited{
 display:block;
 color:#ff00aa;
 text-decoration:none;
}


# Link CSS file to the web page.

Add the following code to link CSS file to the web page between <head> tags. 

<head>

<link rel="Stylesheet" type="text/css" href="style.css">

</head>

Preview of  CSS Menu











Related Posts:

Popular posts from this blog

MCQ of Structured Query Language(SQL) With Answer Set -2

1. Which of the following query is correct for using comparison operators in SQL ? A) SELECT sname, coursename FROM studentinfo WHERE age>50 and <80; B) SELECT sname, coursename FROM studentinfo WHERE age>50 and age <80; C) SELECT sname, coursename FROM studentinfo WHERE age>50 and WHERE age<80; D) None of the above 2.How to select all data from studentinfo table starting the name from letter 'r'? A) SELECT * FROM studentinfo WHERE sname LIKE 'r%'; B) SELECT * FROM studentinfo WHERE sname LIKE '%r%'; C) SELECT * FROM studentinfo WHERE sname LIKE '%r'; D) SELECT * FROM studentinfo WHERE sname LIKE '_r%'; 3. Which of the following SQL query is correct for selecting the name of staffs from 'tblstaff' table where salary is 15,000 or 25,000? A) SELECT sname from tblstaff WHERE salary IN (15000, 25000); B) SELECT sname from tblstaff WHERE salary BETWEEN 15000 AND 25000; C) Both A and B D) None of the above 4. The SELECT
Read more

Easy Methods to Increase Your Website Speed

Website speed is the most important factor for SEO. It also affects the popularity of your site, about every 25% of the visitors of the site left that even if it is useful for them for slow loading sites. Google also decided to include website loading speed for website ranking.  You can increase your website by performing testing or analyzing your site by using different such tools and performing the actions suggested by them. The main tasks to be performed to achieve such goals are setting an expiry date or maximum age in the HTTP headers, minimizing the HTTP redirects, minimizing the amount of JavaScript need while loading the page, minimizing unnecessary JavaScript, CSS Scripts and HTML, Optimizing images and long running scripts etc.  Why Website Speed is Most Important For SEO?  Only the fast loading websites can achieve better user experience and can have the minimum exit ratio. They can only achieve their goals in their online business and marketing. Search engine crawlers also
Read more

Solved MCQ on Stack and Queue in Data Structure set-1

1) ......... form of access is used to add and remove nodes from a queue. A. LIFO, Last In First Out B. FIFO, First In First Out C. Both a and b D. None of these 2) In liked representation of stack ....... holds the elements of the stack. A. INFO fields B. TOP fields C. LINK fields D. NULL fields 3) ........ form of access is used to add remove nodes from a stack. A. LIFO B. FIFO C. Both A and B D. None of these 4) In the linked representation of the stack ......... behaves as the top pointer variable of stack. A. Stop pointer B. Begin pointer C. Start pointer D. Avail pointer 5) New nodes are added to the ......... of the queue. A. Front B. Back C. Middle D. Both A and B 6) In linked representation of stack the null pointer of the last node in the list signals .......... A. Beginning of the stack B. Bottom of the stack C. Middle of the stack D. In between some value 7) What happens when you push a new node onto a stack? A. The new node is placed at the front of the linked list B. The
Read more