...

View Full Version : I need help with creating a sub menu on my Navigation Menu



lukeclarke
01-23-2013, 04:29 PM
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


<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


*+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 :thumbsup:

Excavator
01-23-2013, 04:35 PM
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 (http://nopeople.com/CSS%20tips/CSS_dropDownMenu-noImages/index.html).

Frankie
01-23-2013, 05:33 PM
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.

lukeclarke
01-23-2013, 06:37 PM
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.:D

Excavator
01-23-2013, 07:48 PM
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-
<!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>

lukeclarke
01-24-2013, 11:52 AM
Hi Excavator, im testing it here and you will see where im making mistakes hopefully.

Again any help gratefully received

yas.clearcarbontrading.com

jerry62704
01-24-2013, 02:14 PM
When I viewed the page I saw the menu and drop down appear/disappear as it should.

BTW, kudos on having no HTML errors!

lukeclarke
01-24-2013, 05:17 PM
Hi, im still stuck the codes are these

HTML


<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



.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:o

Excavator
01-24-2013, 05:56 PM
Try just copy/pasting this entire snippet into a new .html document and look at these changes highlighted in red do for you -
<!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,c ode,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,fo rm,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>

lukeclarke
01-24-2013, 07:12 PM
Hi Excavator,

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum