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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    I need help with creating a sub menu on my Navigation Menu

    Hi all,

    I am learning HTML and CSS, and new to this forum so I hope I am posting correctly. I am stuck on creating a drop down menu on my navigation menu can any one help me please the HTML is

    Code:
    <div class="clear"></div>    
            <nav class="box-shadow">
                <div>
                    <ul class="menu">
                        <li class="home-page current"><a href="index.html"><span></span></a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="projects.html">Projects</a></li>
                        <li><a href="clients.html">Clients</a></li>
                        <li><a href="contacts.html">Contacts</a></li>
                    </ul>
                    <div class="social-icons">
                        <span>Follow us:</span>
                        <a href="#" class="icon-3"></a>
                        <a href="#" class="icon-2"></a>
                        <a href="#" class="icon-1"></a>
                    </div>
                    <div class="clear"></div>
                </div>
            </nav>
    And the CSS is

    Code:
    *+html{overflow:auto;}
    nav, nav>div, ul.menu li.home-page, #slide, .box-shadow, .form-search, .img-border, a.button, #form input, #form textarea {behavior:url(js/PIE.htc); position:relative;}
    .pagination {behavior:url(js/PIE.htc);}
    If any one can help i would really appreciate it.

    Thank you in advance

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello lukeclarke,
    Once you correctly form your ul menu, all you need to do is hide the dropped ul until a :hover action brings it into view.

    Look at an example of a simple CSS only dropdown menu.
    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

  • Users who have thanked Excavator for this post:

    lukeclarke (01-23-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    I am stuck on creating a drop down menu on my navigation menu can any one help me please
    That question used to be asked so many times, I wrote a tutorial about it. It is linked from my signature page, and it is a tut for dummies -- very easy. Let me know.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    lukeclarke (01-23-2013)

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi guys and thanks to both of you for your support, I changed the code but when I did a test, the sub-menu had just dropped down and not allowed me to hover over it and then drop down, so when I tested it live,it looked like I had another menu bar underneath the main menu bar, so im unsure on what bit of the CSS i have to change or adjust so I can have it drop down when hovered over and when not hovered it goes back up. If all that makes sense...lol. If at all possible is there anyway i can have the bits highlighted or underlined so i know where i am going wrong and what i have to change it to.

    Thank you all again so much for your time and help.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by lukeclarke View Post
    I changed the code but when I did a test, the sub-menu had just dropped down and not allowed me to hover over it and then drop down, so when I tested it live,it looked like I had another menu bar underneath the main menu bar
    It's impossible to tell what you're doing with seeing your code. The easiest way would be to give us a link to the test site and be sure to upload the most current version of your code to that site.

    Posting what you have here in the forum works too.

    Maybe just taking the entire example, copy/paste that into a new .html document and view it in your browser. You can then make edits to the code to see what makes it work and what breaks it.
    Look at the comments I've added-
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto 900px;
    	padding: 25px 0 400px;
    	background: #f63;
    }
    ul#nav {
    	margin: 0;
    	padding: 0;
    	line-height: 30px;
    	text-align:center;
    }
    	ul#nav li {
    		float: left;
    		margin: 0;
    		padding: 0;
    		position: relative;
    		list-style: none;
    		background: #c93;
    	}
    		ul#nav li a {
    			width: 198px;
    			display: block;
    			border: 1px solid #fff;
    			text-align: center;
    			text-decoration: none;
    			color: #fff;
    			text-shadow: 0.1em 0.1em 0.3em #000;
    		}
    		ul#nav li:hover {background: #cc3;}
    			ul#nav ul {
    				position: absolute;
    				margin: 0;
    				padding: 0;
    				left: 0;
    				top: 31px;
    				visibility: hidden; /*hides dropped ul*/
    			}
    				ul#nav li:hover ul {visibility: visible;} /*makes dropped ul visible when parent li is hovered*/
    ul#nav a:hover {color: #666666;}
    aside {
    	width: 200px;
    	float: left;
    	padding: 50px 0 200px 0;
    	text-align: center;
    	background: #960;
    }
    section {
    	margin: 0 0 0 200px;
    	padding: 20px;
    	background: #663;
    }
    
    </style>
    </head>
    <body>     
        <div id="container">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li> 
                <li><a href="#">Products</a>
                        <ul>
                            <li><a href="#">Linky</a></li>
                            <li><a href="#">Linky</a></li>
                            <li><a href="#">Linky</a></li>
                            <li><a href="#">Linky</a></li>
                            <li><a href="#">Linky</a></li>
                            <li><a href="#">Linky</a></li>
                        </ul> 
                    </li> 
                <li><a href="#">Contact</a></li> 
            </ul> 	
        <aside>
        	<p>left column stuff here</p>
        </aside>
        	<section>
            	<p>Some text here because we need to verify the dropdown menu works when there is content directly below it</p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </section>
        <!--container--></div>  
    </body>
    </html>
    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
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Excavator, im testing it here and you will see where im making mistakes hopefully.

    Again any help gratefully received

    yas.clearcarbontrading.com

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    When I viewed the page I saw the menu and drop down appear/disappear as it should.

    BTW, kudos on having no HTML errors!
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #8
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi, im still stuck the codes are these

    HTML
    Code:
    <div class="clear"></div>    
            <nav class="box-shadow">
                <div>
                    <ul class="menu">
                        <li class="home-page current"><a href="index.html"><span></span></a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="projects.html">Projects</a></li>
                        <li><a href="clients.html">Clients</a></li>
                        <li><a href="contacts.html">Contacts</a></li>
                    </ul>
                    <div class="social-icons">
                        <span>Follow us:</span>
                        <a href="#" class="icon-3"></a>
                        <a href="#" class="icon-2"></a>
                        <a href="#" class="icon-1"></a>
                    </div>
                    <div class="clear"></div>
                </div>
            </nav>
    and the CSS is

    Code:
    .social-icons {overflow:hidden; text-align:right; padding:20px 30px 13px 0}
    .social-icons span {display:inline-block; font-size:13px; line-height:17px; color:#fff; font-weight:bold; margin:3px 14px 0 0}
    .social-icons a {display:inline-block; width:23px; height:23px; float:right}
    .icon-1 {background:url(../images/icon-1.png) 0 0 no-repeat}
    .icon-2 {background:url(../images/icon-2.png) 0 0 no-repeat; margin-left:7px}
    .icon-3 {background:url(../images/icon-3.png) 0 0 no-repeat; margin-left:7px}
    .social-icons a:hover {background-color:#000}
    
    nav {z-index:100; border-radius:12px; background:#ebebec; margin:22px 6px 0 6px; padding:4px}
    nav>div {background:url(../images/nav.jpg) 0 0 repeat-x #55b7c8; border-radius:12px 8px 8px 12px}
    ul.menu {margin:0 1px 0 0;  border-right:#7acad7 1px solid; display:inline-block; float:left}
    ul.menu li {float:left; line-height:17px; margin:0 0 0 0; background:url(../images/transp.png) 0 0 repeat; border-right:#53b2c3 1px solid; border-left:#82ceda 1px solid}
    ul.menu li a {font-size:13px; line-height:17px; color:#fff; font-weight:bold; display:block; padding:23px 28px 24px 28px}
    ul.menu li.home-page {display:inline-block; background:url(../images/transp.png) 0 0 repeat; border-radius:8px 0 0 8px; border:none !important}
    ul.menu li:hover , ul.menu li.current {background:url(../images/current.jpg) 0 0 repeat-x #000000; border-right:#000000 1px solid; border-left:#000000 1px solid}
    ul.menu li.home-page a {padding:21px 22px 24px 23px !important}
    ul.menu li.home-page span {background:url(../images/home-page-img.png) 0 0 no-repeat; width:19px; height:19px; display:block}
    I don't know where I change the CSS. I am soooooooo new at this if this makes sense to any one im sure its such a small stupid thing but if shown im sure i can do it in the future.

    Thanks again everyone

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try just copy/pasting this entire snippet into a new .html document and look at these changes highlighted in red do for you -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <base href="http://yas.clearcarbontrading.com/" />
    <title>Untitled Document</title>
    <style type="text/css">
    a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}
    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;}
    input, textarea {border:0; padding:0; margin:0; outline: 0;}
    iframe {border:0; margin:0; padding:0;}
    input, textarea, select {margin:0; padding:0px;}
    html, body {
    	width: 100%;
    	padding: 0;
    	margin: 0
    }
    body {
    	font: 14px/25px Arial, Helvetica, sans-serif;
    	color: #000000;
    	min-width: 960px;
    	background: #000000
    }
    .ic {
    	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
    }
    .main {
    	width: 100%;
    	background: url(../images/main.jpg) center 0 repeat;
    	border-top: #000000 5px solid
    }
    .social-icons {
    	overflow: hidden;
    	text-align: right;
    	padding: 20px 30px 13px 0
    }
    .social-icons span {
    	display: inline-block;
    	font-size: 13px;
    	line-height: 17px;
    	color: #fff;
    	font-weight: bold;
    	margin: 3px 14px 0 0
    }
    .social-icons a {
    	display: inline-block;
    	width: 23px;
    	height: 23px;
    	float: right
    }
    .icon-1 { background: url(../images/icon-1.png) 0 0 no-repeat }
    .icon-2 {
    	background: url(../images/icon-2.png) 0 0 no-repeat;
    	margin-left: 7px
    }
    .icon-3 {
    	background: url(../images/icon-3.png) 0 0 no-repeat;
    	margin-left: 7px
    }
    .social-icons a:hover { background-color: #000 }
    nav {
    	z-index: 100;
    	border-radius: 12px;
    	background: #ebebec;
    	margin: 22px 6px 0 6px;
    	padding: 4px
    }
    nav>div {
    	background: url(../images/nav.jpg) 0 0 repeat-x #55b7c8;
    	border-radius: 12px 8px 8px 12px
    }
    ul.menu {
    	margin: 0 1px 0 0;
    	border-right: #7acad7 1px solid;
    	display: inline-block;
    	float: left
    }
    ul.menu li {
    	float: left;
    	line-height: 17px;
    	margin: 0 0 0 0;
    	background: url(../images/transp.png) 0 0 repeat;
    	border-right: #53b2c3 1px solid;
    	border-left: #82ceda 1px solid
    }
    ul.menu li a {
    	font-size: 13px;
    	line-height: 17px;
    	color: #fff;
    	font-weight: bold;
    	display: block;
    	padding: 23px 28px 24px 28px
    }
    ul.menu li.home-page {
    	display: inline-block;
    	background: url(../images/transp.png) 0 0 repeat;
    	border-radius: 8px 0 0 8px;
    	border: none !important
    }
    ul.menu li:hover, ul.menu li.current {
    	background: url(../images/current.jpg) 0 0 repeat-x #000000;
    	border-right: #000000 1px solid;
    	border-left: #000000 1px solid
    }
    ul.menu li.home-page a { padding: 21px 22px 24px 23px !important }
    ul.menu li.home-page span {
    	background: url(../images/home-page-img.png) 0 0 no-repeat;
    	width: 19px;
    	height: 19px;
    	display: block
    }
    ul.menu li {position: relative;}
    ul.menu ul {
    	position: absolute;
    	top: 0;
    	left: -1200px;
    }
    ul.menu li:hover ul {left: 0;}
    </style>
    </head>
    <body>
    	<div class="main"> 
            <nav class="box-shadow">
                <div>
                    <ul class="menu">
                        <li class="home-page current"><a href="index.html"><span></span></a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="projects.html">Projects</a></li>
                        <li><a href="clients.html">Clients</a>
                        	<ul>
                            	<li><a href="#">Client 1</a></li>
                            	<li><a href="#">Client 2</a></li>
                            	<li><a href="#">Client 3</a></li>
                            	<li><a href="#">Client 4</a></li>
                            </ul>
                        </li>                    <li><a href="contacts.html">Contacts</a></li>
                    </ul>
                    <div class="social-icons">
                        <span>Follow us:</span>
                        <a href="#" class="icon-3"></a>
                        <a href="#" class="icon-2"></a>
                        <a href="#" class="icon-1"></a>
                    </div>
                    <div class="clear"></div>
                </div>
            </nav>
        <!--end .main--></div>
    </body>
    </html>
    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

  • Users who have thanked Excavator for this post:

    lukeclarke (01-24-2013)

  • #10
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    That is exactly how i want it. Ill keep practising, thank you for your help


  •  

    Posting Permissions

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