Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Create Sub Menu

  1. #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">&nbsp;</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:"]:after, a[href^="#"]:after { content: ""; }  
      pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
      thead { display: table-header-group; } 
      tr, img { page-break-inside: avoid; }
      @page { margin: 0.5cm; }
      p, h2, h3 { orphans: 3; widows: 3; }
      h2, h3{ page-break-after: avoid; }
    }

    Any help is appreciated.

    Regards

    Noaptus

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #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

  • #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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by noaptus View Post
    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 01:31 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
    	     			&copy; 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">&nbsp;</div> 
    	    </footer> 
    		</div>  
    		
    		<div class="clear">&nbsp;</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>

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by noaptus View Post
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •