Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New to the CF scene
Join Date: Jun 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Create Sub Menu
Hi.
I have been trying to learn simple html and css.
Is seems that i don't get it. Is there someone who can assist me on this.
I am really noob on coding, so please be gentle with me.
This is the html for my menu.
Code:
<div class="grid_12">
<div id="nav">
<ul>
<li><a class="active first" href="index.html">Home</a></li>
<li><a href="menu.html">About</a></li>
<ul class="sub">
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
</li>
<li><a href="menu.html">Main menu</a></li>
<li><a href="menu.html">Main menu</a></li>
<li><a href="menu.html">Main menu</a></li>
<li><a href="menu.html">Main menu</a></li>
<li id="order"><a href="menu.html">Main Menu</a></li>
</ul>
</div>
</div>
<div class="clear"> </div>
And this is my CSS file
Code:
/* HTML5 ✰ Boilerplate */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
button { width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
body, select, input, textarea { color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }
/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/
body{min-width:960px}.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_3{width:220px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_6{width:460px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_9{width:700px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_12 .grid_12{width:940px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_3{padding-left:240px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_6{padding-left:480px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_9{padding-left:720px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_3{padding-right:240px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_6{padding-right:480px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_9{padding-right:720px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_3{left:240px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_6{left:480px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_9{left:720px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_3{left:-240px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_6{left:-480px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_9{left:-720px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}
/**
* Primary styles
*
* Author:
*/
body{
background:#dadada url(../img/bg.jpg) repeat-x;
}
.container_12 {
margin-top:15px;
background:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:1px 1px 10px #333333;
-webkit-box-shadow:1px 1px 10px #333333;
box-shadow:1px 1px 10px #333333;
}
header{
padding:10px;
}
#logo {
background:url(../img/logo.jpg) no-repeat;
height:52px;
width:500px;
float:left;
}
#liveSupport {
float:left;
}
.phone {
font-size:22px;
float:right;
}
#nav {
margin-top:20px;
margin-bottom:20px;
height:50px;
}
#nav ul {
margin:0;
background:url(../img/nav_bg.jpg) repeat-x;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
height:50px;
}
#nav li {
float:left;
list-style:none;
height:50px;
margin:0;
padding:0;
}
#nav li a {
margin-top:10px;
padding:17px 25px;
text-decoration:none;
font-size:14px;
font-weight:700;
color:#fff;
line-height:50px;
}
#nav li a:hover.first, #nav li a.active.first {
-moz-border-radius-top-left:10px;
-moz-border-radius-bottom-left:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
#nav li a:hover, #nav li a.active {
background:url(../img/nav_hover.jpg) repeat-x;
}
#order {
float:right !important;
}
.order {
background:url(../img/order_bg.jpg) repeat-x;
-moz-border-radius-top-right:10px;
-moz-border-radius-bottom-right:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
a.order:hover {
background:url(../img/order_hover.jpg) repeat-x !important;
}
#banner {
margin-bottom:20px;
}
.slideshow {
margin:0;
height:171px;
overflow:hidden;
}
.slideshow li{
list-style:none;
}
.pitch {
position:absolute;
top:30px;
left:430px;
}
.pitch span.orange {
font-size:40px;
font-weight:100;
padding-bottom:30px;
}
.pitch p {
font-size:16px;
margin-top:50px;
margin-left:100px;
}
.pitch .button {
font-size:13px;
margin-left:20px;
}
.plans {
background:url(../img/box_small.jpg) no-repeat;
height:125px;
margin-bottom:15px;
}
.plans_orange {
background:url(../img/box_orange.jpg) no-repeat;
height:268px;
margin-bottom:10px;
}
.plans h3 {
color:#fff;
font-size:16px;
padding-top:7px;
padding-bottom:10px;
margin-left:35px;
font-weight:normal;
}
.plans_orange h3 {
color:#fff;
font-size:16px;
padding-top:10px;
padding-bottom:20px;
margin-left:35px;
font-weight:normal;
}
.plans ul, .plans_orange ul {
margin-left:10px;
float:left;
}
.plans_orange ul {
padding-top:10px;
}
.plans li, .plans_orange li {
list-style:none;
line-height:1.8em;
}
.price {
float:left;
margin-left:30px;
text-align:center;
}
.price h4 {
font-size:24px;
margin-bottom:10px;
}
.button {
padding:8px 15px;
background:url(../img/button.jpg) repeat-x;
color:#fff;
text-decoration:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.button2 {
padding:8px 15px;
position:absolute;
top:210px;
left:180px;
background:url(../img/button.jpg) repeat-x;
color:#fff;
text-decoration:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.button:hover, .button2:hover {
background:url(../img/button_hover.jpg) repeat-x;
color:#fff;
}
.dedicatedPrice {
font-size:30px;
font-weight:700;
padding:20px 10px;
}
.server {
position:absolute;
left:100px;
top:75px;
}
.orange {
color:#c57713;
}
footer {
margin-top:15px;
border-top:1px solid #999;
padding-top:15px;
}
footer p{
padding-bottom:10px;
font-size:14px;
}
footer a {
color:#333;
text-decoration:none;
}
footer a:hover {
color:#333;
text-decoration:underline;
}
/* About Page */
.about h3 {
font-size:20px;
margin-bottom:3px;
}
.about p {
margin-bottom:15px;
}
.sidebar {
background:url(../img/gray_sidebar.jpg) no-repeat;
height:444px;
margin-bottom:15px;
}
.sidebar h3 {
color:#fff;
margin-left:35px;
padding-top:7px;
}
.sidebar p {
padding:10px 10px 0;
}
.sidebar ul {
margin-left:10px;
}
.sidebar ul li {
list-style:none;
}
/* Shared Hosting */
#plans {
padding-left:10px;
padding-top:10px;
height:300px;
position:relative;
text-align:center;
margin-top:20px;
margin-bottom:20px;
}
#plans h2 {
font-size:24px;
margin-bottom:5px;
}
#plans ul {
margin-bottom:15px;
margin-left:0;
display:block;
}
#plans ul li {
font-size:14px;
line-height:20px;
list-style: none;
}
#plans span.price1 {
font-size:28px;
font-weight:700;
display:block;
}
#plans span.price2 {
font-size:32px;
font-weight:700;
padding: 5px 20px;
display:block;
}
.order_gray {
padding:15px 80px;
height:52px;
margin-bottom:15px
font-size:18px;
text-decoration: none;
color: #fff;
background: url(../img/big_button_gray.jpg) repeat-x;
-moz-border-radius: 10px;
border-radius:10px;
}
.order_orange {
padding:15px 80px;
height:52px;
margin-bottom:15px
font-size:18px;
text-decoration: none;
color: #fff;
font-weight: 700;
background: url(../img/big_button_orange.jpg) repeat-x;
-moz-border-radius: 10px;
border-radius:10px;
}
.order_gray:hover, .order_orange:hover {
color:#fff;
-webkit-box-shadow:inset 1px 1px 15px #666;
-moz-box-shadow:inset 1px 1px 15px #666;
box-shadow:inset 1px 1px 15px #666;
}
#one,#two,#three {
border:1px solid #ccc;
background:#eee;
padding-bottom: 10px;
-moz-border-radius: 10px;
border-radius:10px;
}
#two {
position:absolute;
padding:10px;
margin-top:-15px;
margin-left:-12px;
z-index:10;
left:322px;
-webkit-box-shadow:1px 1px 20px #999;
-mox-box-shadow:1px 1px 20px #999;
box-shadow:1px 1px 20px #999;
}
.inner-plans {
padding:15px;
}
table.features {
width: 920px;
margin-bottom:20px;
}
.features th.first, .features td.first {
width:25%;
padding:10px 5px;
text-align: left;
}
table.features th{
background:#666;
color:#fff;
text-align: left;
padding:15px 5px;
font-size:16px;
width:25%;
text-align: center;
}
.features td {
width:25%;
padding:10px 5px;
text-align: center;
}
.features tr td {
background: #dadada;
}
.features tr.even td {
background: #eee;
}
.features tr.bottom td {
padding-top: 15px;
padding-bottom: 15px;
}
/* Dedicated Servers */
.tabTable {
width:100%;
border:10px solid #999;
}
.tabTable tr{
width:100%;
background:#999;
padding:10px;
}
.tabTable tr td{
vertical-align: middle;
padding:5px;
background:#eee;
border-top:10px solid #999;
border-right:10px solid #999;
border-bottom:10px solid #999;
text-align: center;
font-size:14px;
}
.tabTable tr td.dedFirst {
width:70px;
border-right:none;
}
.tabTable tr td .config {
background:#cb7403;
display:block;
line-height:50px;
color:#fff;
font-size:16px;
text-decoration:none;
padding:none;
}
.tabTable tr td .config:hover {
background:#b46806;
}
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.right {float:rigth; text-align:right;}
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
}
@media screen and (max-device-width: 480px) {
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript
Any help is appreciated.
Regards
Noaptus
PM User | 2
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Hello noaptus,
As gently as possible since you are a "newby":
Is your .grid_12 really necessary? It looks to me more like a remnant from some copy/pasted grid layout.
Your ul menu is not formed correctly. For a dropdown to work, the li must contain the dropped ul. You close your li ahead of the dropped .sub
Your .clear containing the nonbreaking space is not needed either.
For starters, check out the links in my signature line about validating code. It's a great way to learn how to code.
For some dropped menu examples, you're welcome to have a look at
my code hints page .
PM User | 3
New to the CF scene
Join Date: Jun 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Thanks, i wil take a look at this
PM User | 4
New to the CF scene
Join Date: Jun 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Yes the .grid_12 is really necessary it sets the potision on the nav bar.
This is not my design i bought this form
http://hostrea.com/
http://hostrea.com/templatesale/sleek40/
The thing is the designer is not answering my tickets, so i have to learn it my self,
how to create sub nav.
Regards
Noaptus
PM User | 5
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Quote:
Originally Posted by
noaptus
Yes the .grid_12 is really necessary it sets the potision on the nav bar.
It's really not. This is based on the old 960 grid layout which was crap 10 years ago. It's a shame you paid money for it and can't get any support out of the author.
There are much more modern ways of creating menus now. Did you look at any of the drop down menus on that page I linked you to?
Also, have a look at the links in my signature line about validation. You'll notice the ul menu is invalid since the list item containing your dropped ul is closed too soon. -http://nopeople.com/CSS%20tips/new_empty-menu18_dropdown-flyout/index.html#css
I'm not sure how to recommend you fix this since it's a little more than a novice coder is going to be able to do. The link you give us for the sleek40 template doesn't show the original code... did the dropdown work when you bought it?
Last edited by Excavator; 10-08-2012 at 12:31 AM ..
PM User | 6
New to the CF scene
Join Date: Jun 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
I apologize if i have not been clear. I did set the sub links in the nav my self, this is my fault, i am trying to learn how to create the sub nav. Yes i am looking at the links you told me to take a look.
The thing is there is no sub nav in the code.
Her is the full code of my index.html
Code:
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<div class="container_12">
<header>
<a href="index.html" id="logo" class="ir">
<h1>Sleek40 Web Hosting</h1>
</a>
<a href="#" id="liveSupport"><img src="img/online.jpg" alt="online now!" /></a>
<span class="phone">1-(800)-888-8888 toll free</span>
</header>
<div class="clear"> </div>
<div class="grid_12">
<div id="nav">
<ul>
<li><a class="active first" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="hosting.html">Shared Hosting</a></li>
<li><a href="hosting.html">Reseller Hosting</a></li>
<li><a href="hosting.html">VPS</a></li>
<li><a href="dedicated.html">Dedicated</a></li>
<li id="order"><a class="order" href="http://hostrea.com/client/?systpl=sleek40">Order now!</a></li>
</ul>
</div>
</div>
<div class="clear"> </div>
<div id="banner" class="grid_12">
<ul class="slideshow">
<li>
<img src="img/banner.jpg" alt="" />
<div class="pitch">
<span class="orange">We Rack it... You Run it</span>
<p>Servers starting at $99
<a href="#" class="button">More Info</a>
</p>
</div>
</li>
<li>
<img src="img/banner2.jpg" alt="" />
<div class="pitch">
<span class="orange">sleek40... Reseller Plans</span>
<p>Starting at $20
<a href="#" class="button">More Info</a>
</p>
</div>
</li>
<li>
<img src="img/banner3.jpg" alt="" />
<div class="pitch">
<span class="orange">Join the Black Cloud</span>
<p>Starting at $50
<a href="#" class="button">More Info</a>
</p>
</div>
</li>
</ul>
</div>
<div id="main" role="main">
<div class="grid_4">
<div class="plans">
<h3>Shared Hosting +</h3>
<ul>
<li><span class="orange">>></span> All the space you need</li>
<li><span class="orange">>></span> Plenty of bandwidth</li>
<li><span class="orange">>></span> Fast reliable support</li>
</ul>
<div class="price">
<span class="start">Starting at</span>
<h4>$5</h4>
<a href="#" class="button">More Info</a>
</div>
</div>
<div class="plans">
<h3>Cloud Hosting +</h3>
<ul>
<li><span class="orange">>></span> All the space you need</li>
<li><span class="orange">>></span> Plenty of bandwidth</li>
<li><span class="orange">>></span> Fast reliable support</li>
</ul>
<div class="price">
<span class="start">Starting at</span>
<h4>$5</h4>
<a href="#" class="button">More Info</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="plans">
<h3>Reseller Hosting +</h3>
<ul>
<li><span class="orange">>></span> All the space you need</li>
<li><span class="orange">>></span> Plenty of bandwidth</li>
<li><span class="orange">>></span> Fast reliable support</li>
</ul>
<div class="price">
<span class="start">Starting at</span>
<h4>$5</h4>
<a href="#" class="button">More Info</a>
</div>
</div>
<div class="plans">
<h3>VPS Hosting +</h3>
<ul>
<li><span class="orange">>></span> All the space you need</li>
<li><span class="orange">>></span> Plenty of bandwidth</li>
<li><span class="orange">>></span> Fast reliable support</li>
</ul>
<div class="price">
<span class="start">Starting at</span>
<h4>$5</h4>
<a href="#" class="button">More Info</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="plans_orange">
<h3>Dedicated +</h3>
<span class="dedicatedPrice">$99</span>
<img class="server" src="img/server.png" alt="" />
<div>
<ul>
<li>Xeon x3470</li>
<li>8GB RAM</li>
<li>2 x 500GB HDD</li>
<li>5 IPv4/256IPv6</li>
<li>2500GB Bandwidth</li>
<li>100Mbps port</li>
<li>Dedicated IPKVM</li>
</ul>
<a href="#" class="button2">More Info</a>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<div class="grid_12">
<footer>
<div class="grid_6 alpha">
<p>
1-(800)-888-8888<br />
<a href="#">support@sleek40.com</a><br />
<a href="#">Forum</a><br />
<a href="#">Support Ticket System</a>
</p>
</div>
<div class="grid_6 omega">
<div class="right">
<p>
© Sleek40 web Hosting - All Rights Reserved<br />
<a href="#">TOS</a> | <a href="#">AUP</a> | <a href="#">Privacy</a>
</p>
<img src="img/logos_foot.jpg" alt="" />
</div>
</div>
<div class="clear"> </div>
</footer>
</div>
<div class="clear"> </div>
</div> <!-- eo #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");</script>
<![endif]-->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>
PM User | 7
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Quote:
Originally Posted by
noaptus
I apologize if i have not been clear. I did set the sub links in the nav my self,
Your dropped ul needs to be contained in the parent li.
Remove this bit highlighted in red
And ADD the one highlighted in green -
Code:
<ul>
<li><a class="active first" href="index.html">Home</a></li>
<li><a href="menu.html">About</a></li>
<ul class="sub">
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
</li>
<li><a href="menu.html">Main menu</a></li>
<li><a href="menu.html">Main menu</a></li>
<li><a href="menu.html">Main menu</a></li>
<li><a href="menu.html">Main menu</a></li>
<li id="order"><a href="menu.html">Main Menu</a></li>
</ul>
You will need to add styling for .sub to your CSS for this to work.
In that example I linked you to, the dropped menu has no id or class. It's refered to as
ul#menu ul
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 06:11 AM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
