New Thread
Advanced Reply
All websites have on top a menu that users use to access different parts of the site but how to create one?
Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.
How to create website menu?
0
16
You need to use some good "CSS menu builder" just Google for it!
In mean time you can use this one simply save this code and menu.html
In mean time you can use this one simply save this code and menu.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
#cssmenu {
border: 1px solid;
border-radius: 5px;
display: block;
height: 37px;
margin: 0;
}
#cssmenu > ul {
list-style: inside none none;
margin: 0;
padding: 0;
}
#cssmenu > ul > li {
display: block;
float: left;
list-style: inside none none;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul > li > a {
display: block;
font: bold 13px/100% Arial,Helvetica,sans-serif;
outline: medium none;
padding: 12px 20px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li > a:after {
border-right: 1px solid;
bottom: -1px;
content: "";
position: absolute;
right: -2px;
top: -1px;
z-index: 99;
}
#cssmenu ul li.has-sub:hover > a:after {
bottom: 0;
top: 0;
}
#cssmenu > ul > li.has-sub > a:before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #fff transparent transparent;
border-image: none;
border-right: 5px solid transparent;
border-style: solid;
border-width: 5px;
content: "";
position: absolute;
right: 6px;
top: 18px;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 19px;
}
#cssmenu ul li.has-sub:hover > a {
background: none repeat scroll 0 0 #3f3f3f;
border-color: #3f3f3f;
padding-bottom: 13px;
padding-top: 13px;
top: -1px;
z-index: 999;
}
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
background: none repeat scroll 0 0 #3f3f3f;
border-color: #3f3f3f;
}
#cssmenu ul li > ul, #cssmenu ul li > div {
background: none repeat scroll 0 0 #3f3f3f;
border-radius: 0 0 5px 5px;
display: none;
padding: 10px 0;
position: absolute;
top: 38px;
width: auto;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none none;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu ul li > ul li a {
color: #fff;
display: block;
font: 10pt Arial,Helvetica,sans-serif;
margin: 0;
outline: medium none;
padding: 8px 20px;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
#cssmenu, #cssmenu > ul > li > ul > li a:hover {
background: -moz-linear-gradient(center top , #333333 0%, #222222 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
#cssmenu {
border-color: #000;
}
#cssmenu > ul > li > a {
border-right: 1px solid #000;
color: #fff;
}
#cssmenu > ul > li > a:after {
border-color: #444;
}
#cssmenu > ul > li > a:hover {
background: none repeat scroll 0 0 #111;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li><a href=""><span>Replace me</span></a></li>
<li><a href=""><span>Replace me</span></a></li>
<li class="has-sub"><a href="#"><span>Replace me</span></a>
<ul>
<li><a href=""><span>Replace me</span></a></li>
<li class="last"><a href=""><span>Replace me</span></a></li>
</ul>
</li>
<li><a href=""><span>Replace me</span></a></li>
<li><a href=""><span>Replace me</span></a></li>
<li><a href=""><span>Replace me</span></a></li>
<li class="has-sub"><a href="#"><span>Replace me</span></a>
<ul>
<li><a href=""><span>Replace me</span></a></li>
<li class="last"><a href="Replace me"><span>Replace me</span></a></li>
</ul>
</li>
<li><a href=""><span></span>Replace me</a></li>
<li class="has-sub last"><a href="#"><span>Replace me</span></a>
<ul>
<li><a href="l"><span>Replace me</span></a></li>
<li class="last"><a href=""><span>Replace me</span></a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
0
To make our HTML code, we'll be utilizing the <nav> component with a progression of stay wrapped <div> components inside. Since the <nav> tag is new in HTML5, you'll need to have <!DOCTYPE html> at the highest point of your record.
Find xamarin Developers | Car Rental System | Xamarin Cross Platform Application Development| | custom software development houston
Similar Topics:
- How To Create a Wordpress Website
- Can anybody help me in Creating a website?
- How to become a website designer?
- How I can get traffic a website?
- How to create a website
- Which is the best CMS for Business Website
- website
- How to create a fixed background image on a web page?
- Website online booking widget!
- Webmaster tools needed for graphics, website design and development?
User(s) browsing this thread: 1 Guest(s)
