Menu
Hello everyone,
I’m new in the business of programming a website.
So I downloaded a template that I changed it for my own needs.
But unfortunately I’m having some problems with the Drop Down Menu that I’m trying to create.
I’m just in the beginning of my work and it’s really frustrating…?
I’ll just copy the relevant part from the index.html and from the Style.html files.
I just need to create the drop down menu like the header..
I’ll really appreciate if someone can tell me what I’m doing wrong…
Thank you in advanced,
It goes like this:
index.html:
[code=html]
<header>
<div class=”row-1″>
<div class=”main”>
<div class=”container_12″>
<div class=”grid_12″>
<nav>
<ul class=”menu”>
<li><a class=”active” href=”index.html”>About Us</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”catalogue.html”>Gallery</a></li>
<li><a href=”pricing.html”>Pricing</a>
<ul class=”sub1″>
<li><a href=”Pricing.html”>Louvers</a></li>
<li><a href=”Frames.html”>Frames/Strips</a></li>
<li><a href=”Stiles.html”>Stiles/Rails</a></li>
<li><a href=”SpareParts.html”>Spare Parts</a>
<ul class=”sub2″>
<li><a href=”SpareParts1.html”>Spare Parts1</a></li>
<li><a href=”SpareParts1.html”>Spare Parts2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”contacts.html”>Contacts</a></li>
</ul>
</nav>
</div>
</div>
<div class=”clear”></div>
</div>
</div>
Then the part of the Style.html:
[code]
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Global properties ======================================================== */
html {width:100%}
body {font-family:Arial, Helvetica, sans-serif;font-size:100%;color:#262626;min-width:980px;background:#fff}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.bg-top-shadow {width:100%; background:url(../images/bg-top-shadow.png) center bottom repeat-x; padding:40px 0 52px}
#page3 .bg-top-shadow {padding:40px 0 35px}
#page4 .bg-top-shadow {padding:40px 0 60px}
#page5 .bg-top-shadow {padding:40px 0 62px}
.bg-top {width:100%; background:url(../images/bg-top-tail.jpg) center top repeat-x}
.bg-top-2 {width:100%; background:url(../images/bg-top-tail2.jpg) center top repeat-y}
.bg {width:100%; background:url(../images/bg-top.jpg) center top no-repeat}
.bg-bot {width:100%; background:url(../images/bg-bot-tail.gif) center top repeat-x #fff; padding:30px 0 55px}
#page3 .bg-bot, #page4 .bg-bot {padding:30px 0 49px}
.main {width:980px;padding:0;margin:0 auto;font-size:0.8125em;line-height:1.6153em}
a {color:#ff9601; outline:none}
a:hover {text-decoration:none}
.col-1, .col-2 {float:left}
.wrapper {width:100%; overflow:hidden; position:relative}
.extra-wrap {overflow:hidden}
p {margin-bottom:18px}
.p0 {margin-bottom:0px}
.p1 {margin-bottom:8px}
.p2 {margin-bottom:15px}
.p3 {margin-bottom:30px}
.p4 {margin-bottom:40px}
.p5 {margin-bottom:50px}
.reg {text-transform:uppercase}
.fleft {float:left}
.fright {float:right}
.alignright {text-align:right}
.aligncenter {text-align:center}
.it {font-style:italic}
.letter {letter-spacing:-1px}
.color-1 {color:#fff}
.color-2 {color:#000}
.color-3 {color:#262626}
.color-4 {color:#ff9601}
.frame {padding:10px;background:#fff;box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 3px 5px 8px rgba(0,0,0,0.70)}
.frame2 {padding:9px;background:#fff;border:1px solid #e5e5e5}
/*********************************boxes**********************************/
.margin-bot {margin-bottom:35px}
.spacing {margin-right:35px}
.indent-top {padding-top:13px}
.indent-top2 {padding-top:4px}
.indent-right {padding-right:30px}
.indent-right2 {padding-right:10px}
.indent-left {padding-left:30px}
.indent {padding:0 10px 0 30px}
.indent2 {padding-left:50px}
.indent3 {padding:0 15px}
.indent-bot {margin-bottom:20px}
.indent-bot2 {margin-bottom:30px}
.indent-bot3 {margin-bottom:45px}
.inner {padding:0 55px 0 28px}
.inner-2 {padding:0 45px 0 42px}
.img-indent-bot {margin-bottom:25px}
.img-indent {float:left; margin:0 22px 8px 0}
.img-indent2 {float:left; margin:0 30px 0px 0}
.img-indent3 {float:left; margin:0 23px 0px 0}
.img-indent-r {float:right; margin:0 0px 0px 40px}
.prev-indent-bot {margin-bottom:10px}
.prev-indent-bot2 {margin-bottom:5px}
.buttons a:hover {cursor:pointer}
[B].menu li a, .sub1 li a, .sub2 li a, [/B].list-1 li a, .list-2 li a, .link, .button, .logo {text-decoration:none}
/*********************************header*************************************/
header {width:100%;position:relative;z-index:2}
.row-1 {width:100%;height:71px;background:url(../images/row1-top-tail.gif) left top repeat-x}
.row-2 {width:100%;min-height:101px;background:url(../images/row2-tail.gif) left top repeat-x #fff}
h1 {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif}
h1 span {display:inline-block; font-size:28px; line-height:1.2em; color:#949494; letter-spacing:-1px; padding:29px 0 0 4px}
.logo {display:inline-block;font-size:60px;line-height:1.2em;;color:#262626;cursor:pointer;letter-spacing:-3px}
.logo strong {color:#ff9601; font-weight:normal}
[B]/***** menu *****/
.menu {padding:0;width:100%}
.menu li {float:left;position:relative}
.menu li:first-child {background:url(../images/menu-a-tail.gif) 0 -71px no-repeat}
.menu li a {font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;display:block;width:188px;font-size:21px;line-height:1.238em;padding:21px 0 24px 0;color:#262626;text-align:center;text-transform:uppercase;background:url(../images/menu-a-tail.gif) right -71px no-repeat;letter-spacing:-1px}
.menu li a:hover,
.menu li a.active {color:#fff;background-position:left top;background-repeat:repeat-x;background-color:#000}
/*
nav ul li ul {display:none; position: absolute; top:100; background:url(../images/menu-a-tail.gif) 0 -71px no-repeat}
nav ul li ul:hover > ul {display:block;}
*/
nav ul ul{display:none; position: absolute; top:100; background:url(../images/menu-a-tail.gif) 0 -71px no-repeat}
nav ul li:hover > ul {display:block;}
/*
.sub1 {padding:0;width:100%}
.sub1 li {float:left;position:relative}
.sub1 li :first-child {background:url(../images/menu-a-tail.gif) 0 -71px no-repeat}
.sub1 li a{font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;display:block;width:188px;font-size:21px;line-height:1.238em;padding:21px 0 24px 0;color:#262626;text-align:center;text-transform:uppercase;background:url(../images/menu-a-tail.gif) right -71px no-repeat;letter-spacing:-1px}
.sub1 li a:hover,
.sub1 li a.active {display: block;color:#fff;background-position:left top;background-repeat:repeat-x;background-color:#000;}
.sub2 {padding:0 62px;width:100%}
.sub2 li{float:right;position:relative}
.sub2 li a:first-child {background:url(../images/menu-a-tail.gif) 0 -71px no-repeat}
.sub2 li a{font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;display:block;width:188px;font-size:21px;line-height:1.238em;padding:21px 0 24px 0;color:#262626;text-align:center;text-transform:uppercase;background:url(../images/menu-a-tail.gif) right -71px no-repeat;letter-spacing:-1px}
/*.sub2 li{text-decoration: none; display: block; width:188px;font-size:21px;line-height:1.238em;padding:0.5px 0 24px 0;color:#262626;text-align:center;text-transform:uppercase;background:url(../images/menu-a-tail.gif) right -71px no-repeat;letter-spacing:-1px}*/
/*.sub2 li a:hover,
.sub2 li a.active {display: block;color:#fff;background-position:left top;background-repeat:repeat-x;background-color:#000;}
*/[/B]