...

View Full Version : Drop Down Menu Coding



JeannetteK
02-25-2009, 02:38 AM
I do not have a host site. I have my domain mapped to the wp blog. I've been working for 2 days on overhauling my site http://www.jenaphotography.com At this point I have just changed things on the current theme (connections). I do not know how to write CSS. If anyone can me of some help it would be greatly appreciated.

At the top is my navigation menu bar. I'd like to add sub menus to 2 of the tabs (portfolio and pricing). I've been searching for hours online for CSS coding to do this. But it's all greek to me. On the portfolio tab I'd like to add 12 sub menus and the pricing tab I'd like to add 6 sub menus.

Thank you!

I've corrected my post per Rowsdower's request. I didn't realize it was all smashed together and not readable. I have a top navigation bar which is a menu where it says the following ..... Home, Contact Photographer, Portfolio and Pricing. I want to add 12 sub menus to the Portfolio heading and 6 sub menus to the Pricing heading. The original CSS does not have a drop down menu coding. I have NO clue how to write CSS. I only know how to somewhat change what is already there.


#topnav
{
list-style:none;
font-size:0.9em;
margin:0 auto;
padding:12px 20px 0 0;
text-align:right;
font-family:Verdana, Arial, Sans-Serif;
}

#topnav li
{
list-style:none;
display:inline;
margin:0 0 0 0;
padding:0 6px 0 5px;
font-weight:bold;
border-right: 2px solid #BBC4A3;
}

#topnav li a:link, #topnav li a:visited
{
text-decoration:none;
color:#BBC4A3;
}

#topnav li a:hover, #topnav li a:active
{
color:#F7F3ED;
}

Rowsdower!
02-25-2009, 04:31 PM
Hello and welcome to the forums! First off, please edit your post to use the
tags to make your thread much easier for us to read.

Second, try looking at the menu here for starters:
http://www.cssplay.co.uk/menus/dd_valid.html

Save a backup copy of what you have now and try some experimentation.

Dissect the CSS and you can easily apply this method to your page. There are plenty of other possibilities available on that site. Once you have given it the old "college try" let us see what you've been able to accomplish. We are much more likely to respond to specific issues rather than a blanket request to do the work for you entirely. :thumbsup:

JeannetteK
02-25-2009, 05:30 PM
Hello and welcome to the forums! First off, please edit your post to use the
tags to make your thread much easier for us to read.

Second, try looking at the menu here for starters:
http://www.cssplay.co.uk/menus/dd_valid.html

Save a backup copy of what you have now and try some experimentation.

Dissect the CSS and you can easily apply this method to your page. There are plenty of other possibilities available on that site. Once you have given it the old "college try" let us see what you've been able to accomplish. We are much more likely to respond to specific issues rather than a blanket request to do the work for you entirely. :thumbsup:

Thank you. I didn't realize the code was all smashed. Also, Thanks for your assurance but I did NOT attend college well except 2 years for Early Childhood Education. I understand some of the CSS but the thing is what I want is NOT in the CSS now. I need to write it and add it in. Well, I know nothing about writing CSS or programming.

I'm off to read the link that you provided above. Thank you for your reply.

JeannetteK
02-25-2009, 05:39 PM
Thanks Rowsdower I corrected my original post.

Rowsdower!
02-25-2009, 06:00 PM
Thank you. I didn't realize the code was all smashed. Also, Thanks for your assurance but I did NOT attend college well except 2 years for Early Childhood Education. I understand some of the CSS but the thing is what I want is NOT in the CSS now. I need to write it and add it in. Well, I know nothing about writing CSS or programming.

I'm off to read the link that you provided above. Thank you for your reply.

Well, the saying "give it the old college try" is a turn of phrase meaning roughly "give it a good solid effort." I meant no offense and it certainly doesn't take a college degree to work out HTML/CSS. It only takes patience, experimentation, and a willingness to learn. :)

Anyway, visiting the link I gave you and looking at that CSS is what will help you to fix your own menu's CSS to use dropdowns.

What I would recommend is that you download the HTML and CSS files that Stu provides on that site and then open up the css file in Notepad (or any other simple text editor, but NOT MSWord) and then tweak his menu until it looks like what you want. Once you have his menu looking consistent with your page design you can just copy and paste the code into your webpage.

I forgot to mention that if the programming languages for HTML and CSS are unfamiliar you should definitely start out by visitng the FREE and easy-to-follow tutorials from w3schools.com (see the link in my sig below). This will take you step-by-step through the very basics of HTML and CSS so that you will know what it is you are looking at when you view the code from other sites and when you try to update your own code.

JeannetteK
02-25-2009, 06:57 PM
Well, the saying "give it the old college try" is a turn of phrase meaning roughly "give it a good solid effort." I meant no offense and it certainly doesn't take a college degree to work out HTML/CSS. It only takes patience, experimentation, and a willingness to learn. :)

Anyway, visiting the link I gave you and looking at that CSS is what will help you to fix your own menu's CSS to use dropdowns.

What I would recommend is that you download the HTML and CSS files that Stu provides on that site and then open up the css file in Notepad (or any other simple text editor, but NOT MSWord) and then tweak his menu until it looks like what you want. Once you have his menu looking consistent with your page design you can just copy and paste the code into your webpage.

I forgot to mention that if the programming languages for HTML and CSS are unfamiliar you should definitely start out by visitng the FREE and easy-to-follow tutorials from w3schools.com (see the link in my sig below). This will take you step-by-step through the very basics of HTML and CSS so that you will know what it is you are looking at when you view the code from other sites and when you try to update your own code.


No offense taken. I was born in Germany and came to the US when I was 5 and didn't learn English til I was 6. I am hands on learner. Comprehending the written language is not a strong point for me. Especially CSS and computer programming. I have changed allot on the original theme. But have not added anything as that's a whole other ballpark. I'm off to Stu's website to see which codes to download and give it another try. I've done some changes then preview with my blog so that is a nice feature. Don't suppose their is some sort of program to tell it waht you want and it write CSS for you? Wishful thinking huh. LOL

JeannetteK
02-25-2009, 07:52 PM
Ok I tried the coding from Stu. I'm missing something as I've added it to CSS and it does nothing.

Rowsdower!
02-25-2009, 08:14 PM
I'm poking around your page right now but I don't see where the stylesheets have been updated. Which file did you update with the CSS from Stu's menu?

JeannetteK
02-25-2009, 08:49 PM
I'm poking around your page right now but I don't see where the stylesheets have been updated. Which file did you update with the CSS from Stu's menu?

I tried 2 different codes. And once I inserted it and then previewed it. I saw no change in the preview. In wordpress when you make a change to the style sheet you can preview it before you save it.

I tried these 2.

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}


/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

Rowsdower!
02-25-2009, 09:26 PM
Before you do anything to the CSS you need to update the HTML so to use a <div> to contain your menu. The <div> should have a class of "menu". You will then need to add a few generic sub-menu items to test the functionality of the menu. Overall you should do something like the parts in red below:
<div class="menu"> <!-- add this to open the .menu div -->
<ul id="topnav">
<li><a href="http://jenaphotography.com" id="navHome" title="Posted Recently" accesskey="h">Home</a></li>
<li class="page_item page-item-149"><a href="http://jenaphotography.com/contact-photographer/" title="Contact&nbsp;Photographer">Contact&nbsp;Photographer</a></li>
<li class="page_item page-item-143"><a href="http://jenaphotography.com/portfolio/" title="Portfolio">Portfolio</a>
<ul>
<li><a href="#nogo">something</a></li>
<li><a href="#nogo">another thing</a></li>
</ul>
</li> <!-- notice that the list item is closed AFTER the sub-menu list is inserted -->
<li class="page_item page-item-147"><a href="http://jenaphotography.com/pricing/" title="Pricing">Pricing</a></li>
<li class="page_item page-item-139"><a href="http://jenaphotography.com/meet-the-photographer/" title="The&nbsp;Photographer">The&nbsp;Photographer</a></li>
</ul>
</div> <!-- add this to close the .menu div -->

After altering your HTML file as noted above you should start to see signs of life with your new menu CSS and your portfolio link should have a sub-menu appear when you put your mouse over it. Let me know if you get lost with any of this.

JeannetteK
02-25-2009, 09:30 PM
Uhm Yea this is WAY over my head. I'll have to have a yard sale to get some money to pay someone to do it for me. Thanks!

Rowsdower!
02-25-2009, 09:45 PM
Uhm Yea this is WAY over my head. I'll have to have a yard sale to get some money to pay someone to do it for me. Thanks!

I hate to see anyone give up. I know this can seem intimidating at first but if you take your time with it (and take a breather for a day or two when things get frustrating) I promise you can do this.

I tought myself how to code HTML and CSS using www.w3schools.com by taking it step-by-step. What you are trying to do is somewhat intermediate and if you're a beginner you'll get lost.

Start small by coding a very simple plain text HTML page. Then you step up with things like link tags, lists (and sub-lists), and so on. Take everything a piece at a time and you will learn how each piece works on its own.

What you're trying now is kind of like learning to ride a motorcycle without ever having learned to ride a bicycle. It's not impossible to learn this way, but it's a much steeper learning curve.

Anyway, that's my advice - take it or leave it. :D

Good luck!

JeannetteK
02-25-2009, 10:10 PM
I hate to see anyone give up. I know this can seem intimidating at first but if you take your time with it (and take a breather for a day or two when things get frustrating) I promise you can do this.

I tought myself how to code HTML and CSS using www.w3schools.com by taking it step-by-step. What you are trying to do is somewhat intermediate and if you're a beginner you'll get lost.

Start small by coding a very simple plain text HTML page. Then you step up with things like link tags, lists (and sub-lists), and so on. Take everything a piece at a time and you will learn how each piece works on its own.

What you're trying now is kind of like learning to ride a motorcycle without ever having learned to ride a bicycle. It's not impossible to learn this way, but it's a much steeper learning curve.

Anyway, that's my advice - take it or leave it. :D

Good luck!


Thanks! I've been working on just this drop down section for 2 days then stopped for a week and now back at it. It's very frustrating when I look at coding sites and they say CSS is easy to learn.

I guess it is for those who are book learners and not us hands on learners. I can do things fine and dandy after seeing someone do it or someone actually going through it with me step by step. But I know NOTHING about CSS and computer programming.

Interesting analogy about the motorcycle. I was one of those who never had a trike or 3 wheeler. I learned to ride a bike with no training wheels or 3 wheel. I'm also one of those that just jumps in and learn as I go. But this is beyond me with CSS.

JeannetteK
02-26-2009, 12:47 AM
OK I've got more questions. I was doing some searching online.
I found a CSS Menu Generator. Basically I just named the menus and sub menus.
And the program did the rest of the CSS coding for me.
Where do I put this coding in my CSS stylesheet?
And do I need to delete the previous top nav bar coding?


font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #000000; border-left:solid 1px #000000;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #000000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}
.pd_menu_01 ul li:hover a {background-color:#000000; text-decoration:none; color:#800000;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #000000; border-bottom: solid 1px #000000; background-color:#000000; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#800000;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#000000; text-decoration:none;color:#800000;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#000000; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #000000; border-bottom: solid 1px #000000; background-color:#000000; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#000000; text-decoration:none;color:#800000;} /*Color subcells hovering mode*/
</style>



<div class="pd_menu_01 ">
<ul><li><a href="#">{Home}</a>
</li></ul>

<ul><li><a href="#">{Contact Photographer}</a>
</li></ul>

<ul><li><a href="#">{Portfolio}</a>
<ul>
<li><a href="#" >Maternity</a></li>
<li><a href="#" >Newborn</a></li>
<li><a href="#" >Children</a></li>
<li><a href="#" >Seniors</a></li>
<li><a href="#" >Engagements</a></li>
<li><a href="#" >Family's</a></li>
<li><a href="#" >TTD</a></li>
<li><a href="#" >Nature</a></li>
<li><a href="#" >Artsy</a></li>
<li><a href="#" >Macro</a></li>
<li><a href="#" >Eliana</a></li>
<li><a href="#" >Misc.</a></li>
</ul>
</li></ul>

<ul><li><a href="#">{Pricing}</a>
<ul>
<li><a href="#" >Welcome</a></li>
<li><a href="#" >What to Wear</a></li>
<li><a href="#" >Business Stuff</a></li>
<li><a href="#" >Custom Portraiture</a></li>
<li><a href="#" >Collections</a></li>
<li><a href="#" >Referral Program</a></li>
</ul>
</li></ul>

</div>

Avril
02-26-2009, 06:29 AM
Put all the stuff between the 'style' tags in the head section of your .html page (or separately in what is called a stylesheet, if you prefer).

The rest of it goes in the navbar div.

Make a duplicate of the page and try it out until you get it exactly as you want it. Most of all, have fun playing around with it!

abduraooft
02-26-2009, 07:53 AM
First off, please edit your post to use the
tags to make your thread much easier for us to read.
I second! You may edit your posts.

Rowsdower!
02-26-2009, 01:24 PM
OK I've got more questions. I was doing some searching online.
I found a CSS Menu Generator...


Well, why don't you try this instead first...

Your HTML, updated for the menu I linked to earlier:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jena Photography</title>
<meta name="generator" content="WordPress.com" /> <!-- leave this for stats please -->
<style type="text/css" media="screen">
@import url( http://s3.wordpress.com/wp-content/themes/pub/connections/style.css?m=1232564056b );
</style>
<link rel='stylesheet' href='http://s.wordpress.com/wp-content/themes/h4/global.css?m=1222918273b' type='text/css' />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://jenaphotography.com/?css=css&amp;rev=0" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://jenaphotography.com/feed/" />
<link rel="pingback" href="http://jenaphotography.com/xmlrpc.php" />
<script src='http://wordpress.com/remote-login.php?action=js&amp;host=jenaphotography.com&amp;id=4453392&amp;back=jenaphotography.com%2F' type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() { oldonload(); func(); }
}
}
/* ]]> */
</script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jenaphotography.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jenaphotography.com/wp-includes/wlwmanifest.xml" />
<script type="text/javascript">
window.google_analytics_uacct = "UA-52447-2";
</script>
<link rel="introspection" type="application/atomserv+xml" title="Atom API" href="http://jenaphotography.com/wp-app.php" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.gravatar.com/blavatar/36c35784341e6d6c59ff6a3c77d2897e?s=16&amp;d=http://s.wordpress.com/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://www.gravatar.com/blavatar/36c35784341e6d6c59ff6a3c77d2897e?s=16&amp;d=http://s.wordpress.com/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.gravatar.com/blavatar/331b57cd1a8e65d60fe72bfb56c32361?s=158&amp;d=http://s.wordpress.com/wp-content/themes/h4/i/webclip.png" />
<link rel='openid.server' href='http://jenaphotography.wordpress.com/?openidserver=1' />
<link rel='openid.delegate' href='http://jenaphotography.wordpress.com/' />

<script type='text/javascript'>/*<![CDATA[*/if(typeof(addLoadEvent)!='undefined'){addLoadEvent(function(){if(top==self){i=document.createElement ('img');i.src='http://botd.wordpress.com/botd.gif?blogid=4453392&postid=0&lang=1&date=1235292089&ip=129.137.245.43&url=http://jenaphotography.com/&loc='+document.location;i.style.width='0px';i.style.height='0px';i.style.overflow='hidden';document. body.appendChild(i);}});}/*]]>*/</script>

<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=0&amp;si=1&amp;sb=1&amp;key=e5a3c1e6dff5de35b1c6e7c470411886&amp;domain=&amp;fl=wordpress&amp;pu b=pub-2311827-www.wordpress.com&amp;es=all&amp;lang=en"></script>
</head>

<body>
<div id="rap">
<div id="header">
<div class="menu">
<ul id="topnav">
<li><a href="http://jenaphotography.com" id="navHome" title="Posted Recently" accesskey="h">Home</a></li>
<li class="page_item page-item-149"><a href="http://jenaphotography.com/contact-photographer/" title="Contact&nbsp;Photographer">Contact&nbsp;Photographer</a></li>
<li class="page_item page-item-143"><a href="http://jenaphotography.com/portfolio/" title="Portfolio">Portfolio</a>
<ul>
<li><a href="#nogo" >Maternity</a></li>
<li><a href="#nogo" >Newborn</a></li>
<li><a href="#nogo" >Children</a></li>
<li><a href="#nogo" >Seniors</a></li>
<li><a href="#nogo" >Engagements</a></li>
<li><a href="#nogo" >Family's</a></li>
<li><a href="#nogo" >TTD</a></li>
<li><a href="#nogo" >Nature</a></li>
<li><a href="#nogo" >Artsy</a></li>
<li><a href="#nogo" >Macro</a></li>
<li><a href="#nogo" >Eliana</a></li>
<li><a href="#nogo" >Misc.</a></li>
</ul></li>
<li class="page_item page-item-147"><a href="http://jenaphotography.com/pricing/" title="Pricing">Pricing</a>
<ul>
<li><a href="#" >Welcome</a></li>
<li><a href="#" >What to Wear</a></li>
<li><a href="#" >Business Stuff</a></li>
<li><a href="#" >Custom Portraiture</a></li>
<li><a href="#" >Collections</a></li>
<li><a href="#" >Referral Program</a></li>
</ul></li>
<li class="page_item page-item-139"><a href="http://jenaphotography.com/meet-the-photographer/" title="The&nbsp;Photographer">The&nbsp;Photographer</a></li>
</ul>
</div>
<div id="headimg">
<h1><a href="http://jenaphotography.com" title=""></a></h1>
<div id="desc"></div>
</div>
</div>

<div id="main">
<div id="content">
<div class="post hentry category-hello">
<p class="post-date">February 22, 2009</p>
<div class="post-info"><h2 class="post-title"><a href="http://jenaphotography.com/2009/02/22/check-back-soon/" rel="bookmark" title="Permanent Link: Updating&nbsp;Site">Updating&nbsp;Site</a></h2>
Posted by Jeannette Kaufmann under <a href="http://en.wordpress.com/tag/hello/" title="View all posts in Hello" rel="category tag">Hello</a> <br/><a href="http://jenaphotography.com/2009/02/22/check-back-soon/#respond" title="Comment on Updating&nbsp;Site">No Comments</a>&nbsp;</div>
<div class="post-content">
<div class='snap_preview'><ul>
<li>I’m working on updating the site.* Check back soon.</li>
</ul>
<p>*</p>
<ul>
<li>Jeannette</li>
</ul>
</div> <div class="post-info">

</div>
<div class="post-footer">&nbsp;</div>
</div>
</div>
<div class="post hentry category-seniors-2010">
<p class="post-date">February 20, 2009</p>
<div class="post-info"><h2 class="post-title"><a href="http://jenaphotography.com/2009/02/20/seniors-class-of-2010/" rel="bookmark" title="Permanent Link: Seniors ~ Class of&nbsp;2010">Seniors ~ Class of&nbsp;2010</a></h2>
Posted by Jeannette Kaufmann under <a href="http://en.wordpress.com/tag/seniors-2010/" title="View all posts in Seniors 2010" rel="category tag">Seniors 2010</a> <br/><a href="http://jenaphotography.com/2009/02/20/seniors-class-of-2010/#respond" title="Comment on Seniors ~ Class of&nbsp;2010">No Comments</a>&nbsp;</div>
<div class="post-content">
<div class='snap_preview'><table class="profileTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="label">*</td>
<td class="data">
<ul>
<li>
<div class="datawrap">Looking for new faces. Being a Representative for Jena Photography comes with several benefits. You will receive a session for $100 which includes a free 11◊14 {mounted}, 24 referral cards plus 25% off prints. Your session will include 30 minutes indoors and 1.5 hours outdoors.</div>
</li>
</ul>
<ul>
<li>
<div class="datawrap">Love your Jena Photography experience?* Tell your friends!* When someone you refer books and pays for a session, you will receive a free 8◊10 print or a set of wallets.</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div> <div class="post-info">

</div>
<div class="post-footer">&nbsp;</div>
</div>
</div>
<p align="center"></p>
</div>
<div id="sidebar">
<ul>
<li id="linkcat-50255" class="widget snap_preview widget_links"><h2 class="widgettitle">Arkansas</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://tarastatonblog.com/">Tara Staton</a></li>

</ul>
</li>

<li id="linkcat-230029" class="widget snap_preview widget_links"><h2 class="widgettitle">Atlanta Georgia</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.nataliehowell.blogspot.com/">Natalie Howell</a></li>

</ul>
</li>

<li id="linkcat-2171538" class="widget snap_preview widget_links"><h2 class="widgettitle">Bellingham Washington</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://jewelsharrell.blogspot.com/">Jewels</a></li>

</ul>
</li>

<li id="linkcat-1356" class="widget snap_preview widget_links"><h2 class="widgettitle">Blogroll</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://JenaPhotography2009.blogspot.com">2009 Photo of the Day</a></li>
<li><a href="http://www.JenaPhotography.blogspot.com">a 2008 Photo of the Day</a></li>
<li><a href="http://www.infantrefluxdisease.com">Infant Reflux Disease</a></li>
<li><a href="http://www.littlestheroesproject.org/">Littlest Heroes Project</a></li>
<li><a href="http://www.shaklee.com">Shaklee ID# WF01997</a></li>

</ul>
</li>

<li id="linkcat-112929" class="widget snap_preview widget_links"><h2 class="widgettitle">Boston Massachusetts</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.GraceNotesPhotography.com/">Aurora</a></li>

</ul>
</li>

<li id="linkcat-5892403" class="widget snap_preview widget_links"><h2 class="widgettitle">Broken Arrow Oklahoma</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.morganstreetpics.blogspot.com">Morgan Street Pics</a></li>

</ul>
</li>

<li id="linkcat-1337" class="widget snap_preview widget_links"><h2 class="widgettitle">California</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.jessicaclaire.net/">Jessica Claire</a></li>

</ul>
</li>

<li id="linkcat-6179177" class="widget snap_preview widget_links"><h2 class="widgettitle">Colorado Springs Colorado</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.heatherbauers.typepad.com/">Peekaboo</a></li>

</ul>
</li>

<li id="linkcat-148" class="widget snap_preview widget_links"><h2 class="widgettitle">Design</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.candyapplestudios.com/">Candy Apple Studios</a></li>
<li><a href="http://portraitsbychrista.com/designs/">Designs by Christa</a></li>
<li><a href="http://www.lisareichmandesign.com/blog/">Lisa Reichman</a></li>
<li><a href="http://www.orangegeckodesigns.blogspot.com/">Orange Gecko</a></li>
<li><a href="http://viberesources.com/blog/">Vibe</a></li>

</ul>
</li>

<li id="linkcat-1123772" class="widget snap_preview widget_links"><h2 class="widgettitle">Evansville Indiana</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.thesiekmantriplets.blogspot.com/">Farm House Kids</a></li>

</ul>
</li>

<li id="linkcat-4504525" class="widget snap_preview widget_links"><h2 class="widgettitle">Helsinki Finland</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.ajatonjoki.com/wordpress/">Andrea Joki</a></li>

</ul>
</li>

<li id="linkcat-3267289" class="widget snap_preview widget_links"><h2 class="widgettitle">Highland California</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://turtledovephotographynet.blogspot.com/">Turtle Dove</a></li>

</ul>
</li>

<li id="linkcat-13050401" class="widget snap_preview widget_links"><h2 class="widgettitle">Jasper Indiana</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://jessicabellphotography.com/blog/">Jess</a></li>

</ul>
</li>

<li id="linkcat-13049913" class="widget snap_preview widget_links"><h2 class="widgettitle">Johnstown Ohio</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://blueberrylanephotography.typepad.com/">Blueberry Lane</a></li>

</ul>
</li>

<li id="linkcat-8338665" class="widget snap_preview widget_links"><h2 class="widgettitle">Mansfield Texas</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://selahstudios.blogspot.com/">Selah Studios</a></li>

</ul>
</li>

<li id="linkcat-6084" class="widget snap_preview widget_links"><h2 class="widgettitle">Oklahoma</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://indiejanephotography.blogspot.com/">ripe.</a></li>

</ul>
</li>

<li id="linkcat-5639492" class="widget snap_preview widget_links"><h2 class="widgettitle">Owego New York</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.alexajanae.com/">Alexa Studios</a></li>

</ul>
</li>

<li id="linkcat-9118548" class="widget snap_preview widget_links"><h2 class="widgettitle">Owensboro Kentucky</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://capturingeverydaylife.blogspot.com/">Joanne</a></li>

</ul>
</li>

<li id="linkcat-436" class="widget snap_preview widget_links"><h2 class="widgettitle">Photography</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://dailypleasures.blogspot.com/">Daily Pleasures</a></li>
<li><a href="http://meganmilbradt.typepad.com">everyday art photography</a></li>
<li><a href="http://www.patspixpotd.blogspot.com/">Pat</a></li>

</ul>
</li>

<li id="linkcat-6550600" class="widget snap_preview widget_links"><h2 class="widgettitle">Plano Texas</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.mattnicolosiblog.com/">Matt Nicolosi</a></li>

</ul>
</li>

<li id="linkcat-3837384" class="widget snap_preview widget_links"><h2 class="widgettitle">Salt Lake City Utah</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://photosbyangie.blogspot.com/">Simplicity</a></li>

</ul>
</li>

<li id="linkcat-13050092" class="widget snap_preview widget_links"><h2 class="widgettitle">Shawnee Oklahoma</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.dejahquinnphotography.blogspot.com/">Dejah Quinn</a></li>

</ul>
</li>

<li id="linkcat-1508" class="widget snap_preview widget_links"><h2 class="widgettitle">Shopping</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.actionsbyjess.blogspot.com/">Designs by Jess</a></li>
<li><a href="http://www.etsy.com/shop.php?user_id=96446">PixelbyPixel</a></li>
<li><a href="http://thepolishedphotographer.com/">The Polished Photographer</a></li>
<li><a href="http://yayapapayatutus.blogspot.com">Yaya Papaya Tutus</a></li>

</ul>
</li>

<li id="linkcat-13050839" class="widget snap_preview widget_links"><h2 class="widgettitle">Thibodaux Louisiana</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://deedeeleblanc.blogsome.com/">LeBlanc Photography</a></li>

</ul>
</li>

<li id="linkcat-1379234" class="widget snap_preview widget_links"><h2 class="widgettitle">Twin Cities Minnesota</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.karilaylandphotography.blogspot.com/">Kari Layland</a></li>

</ul>
</li>

<li id="linkcat-59361" class="widget snap_preview widget_links"><h2 class="widgettitle">Utah</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.indieart-blog.blogspot.com/">India Art</a></li>
<li><a href="http://slurpee4bys1grl.blogspot.com/">whatever</a></li>

</ul>
</li>

<li id="linkcat-5952354" class="widget snap_preview widget_links"><h2 class="widgettitle">Wilmington North Carolina</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://katiemathewsphotography.blogspot.com/">Katie Mathews</a></li>

</ul>
</li>

<li id="archives" class="widget widget_archive"><h2 class="widgettitle">Archives</h2>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value="">Select Month</option> <option value='http://jenaphotography.com/2009/02/'> February 2009 &nbsp;(2)</option>
</select>
</li>
<li id="blog-stats" class="widget widget_statscounter"> <h2 class="widgettitle">Blog Stats</h2>
<ul>
<li>3,554 hits</li>
</ul>
</li>
</ul> </div>

<p id="footer"><a href='http://wordpress.com/' rel='generator'>Blog at WordPress.com</a>. — Theme: Connections by <a href="http://www.vanillamist.com" rel="designer">www.vanillamist.com</a></p>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var wpcomPageTracker = _gat._getTracker("UA-52447-2");
wpcomPageTracker._setDomainName("none");
wpcomPageTracker._setAllowLinker(true);
wpcomPageTracker._initData();
wpcomPageTracker._trackPageview();
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<script type="text/javascript">_qoptions = { labels:"adt.0,language.en" };_qacct="p-18-mFEk4J448M";quantserve();</script>
<noscript><p><img src="http://pixel.quantserve.com/pixel/p-18-mFEk4J448M.gif" style="display: none" height="1" width="1" alt="" /></p></noscript>
<script src="http://s.stats.wordpress.com/w.js?18" type="text/javascript"></script>
<script type="text/javascript">
st_go({'blog':'4453392','v':'wpcom','user_id':'0','post':'0','subd':'jenaphotography'});
ex_go({'crypt':'D6%7C%2CY1mqC.%7Csw%26t.UFrVlEOvOXCT-%26m9-O5-JREQd%5BmBp4t-elbmgvY7%7C_7gC.edmcW5%2FiEVG8%3D3mG%2Big%7CQwQH5BFYb%5D0p%2C9%2CuY7JW9hsZ9xouUrFY%7C%5Bg2sazFKCTsW-t%5DIB%26NE.8r%2CLVgdp%5DK%5D8yhf%25aDtBn%3Dok%2F%3Fo-f%5B%3D%2FujDGE95%2F%7E'});
addLoadEvent(function(){linktracker_init('4453392',0);});
</script>
</div>
</div>
</body>
</html>

And this separate CSS file, which you should save as "style.css" in the SAME folder as your home page:
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {width:900px; height:34px; background-color:#000; position:relative; z-index:100;}
.menu ul {float:right;height:21px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; height:20px; text-align:center; color:#fff; margin-top:1px; line-height:21px;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li ul li {width:100%;}

/* specific to non IE browsers */
.menu ul li:hover a {color:red;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:146px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background: #6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background: #ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}


These two together will give you a functional menu system that blends with your current style. The only part you will need to update is the style of the drop-downs, as they appear in a teal color that does not fit your current theme...

JeannetteK
02-26-2009, 02:42 PM
Put all the stuff between the 'style' tags in the head section of your .html page (or separately in what is called a stylesheet, if you prefer).

The rest of it goes in the navbar div.

Make a duplicate of the page and try it out until you get it exactly as you want it. Most of all, have fun playing around with it!

OK speak to me like I'm 5 years olds. Stuff meaning the first group of codes? What do you mean by style tags? All I have is a stylesheet. OK back to being confused and trying to figure this out. Thank you for your help.

JeannetteK
02-26-2009, 02:43 PM
I second! You may edit your posts.


I did edit my original post which Rowsdower first mentioned. Thanks

JeannetteK
02-26-2009, 02:50 PM
Well, why don't you try this instead first...

Your HTML, updated for the menu I linked to earlier:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jena Photography</title>
<meta name="generator" content="WordPress.com" /> <!-- leave this for stats please -->
<style type="text/css" media="screen">
@import url( http://s3.wordpress.com/wp-content/themes/pub/connections/style.css?m=1232564056b );
</style>
<link rel='stylesheet' href='http://s.wordpress.com/wp-content/themes/h4/global.css?m=1222918273b' type='text/css' />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://jenaphotography.com/?css=css&amp;rev=0" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://jenaphotography.com/feed/" />
<link rel="pingback" href="http://jenaphotography.com/xmlrpc.php" />
<script src='http://wordpress.com/remote-login.php?action=js&amp;host=jenaphotography.com&amp;id=4453392&amp;back=jenaphotography.com%2F' type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() { oldonload(); func(); }
}
}
/* ]]> */
</script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jenaphotography.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jenaphotography.com/wp-includes/wlwmanifest.xml" />
<script type="text/javascript">
window.google_analytics_uacct = "UA-52447-2";
</script>
<link rel="introspection" type="application/atomserv+xml" title="Atom API" href="http://jenaphotography.com/wp-app.php" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.gravatar.com/blavatar/36c35784341e6d6c59ff6a3c77d2897e?s=16&amp;d=http://s.wordpress.com/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://www.gravatar.com/blavatar/36c35784341e6d6c59ff6a3c77d2897e?s=16&amp;d=http://s.wordpress.com/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.gravatar.com/blavatar/331b57cd1a8e65d60fe72bfb56c32361?s=158&amp;d=http://s.wordpress.com/wp-content/themes/h4/i/webclip.png" />
<link rel='openid.server' href='http://jenaphotography.wordpress.com/?openidserver=1' />
<link rel='openid.delegate' href='http://jenaphotography.wordpress.com/' />

<script type='text/javascript'>/*<![CDATA[*/if(typeof(addLoadEvent)!='undefined'){addLoadEvent(function(){if(top==self){i=document.createElement ('img');i.src='http://botd.wordpress.com/botd.gif?blogid=4453392&postid=0&lang=1&date=1235292089&ip=129.137.245.43&url=http://jenaphotography.com/&loc='+document.location;i.style.width='0px';i.style.height='0px';i.style.overflow='hidden';document. body.appendChild(i);}});}/*]]>*/</script>

<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=0&amp;si=1&amp;sb=1&amp;key=e5a3c1e6dff5de35b1c6e7c470411886&amp;domain=&amp;fl=wordpress&amp;pu b=pub-2311827-www.wordpress.com&amp;es=all&amp;lang=en"></script>
</head>

<body>
<div id="rap">
<div id="header">
<div class="menu">
<ul id="topnav">
<li><a href="http://jenaphotography.com" id="navHome" title="Posted Recently" accesskey="h">Home</a></li>
<li class="page_item page-item-149"><a href="http://jenaphotography.com/contact-photographer/" title="Contact&nbsp;Photographer">Contact&nbsp;Photographer</a></li>
<li class="page_item page-item-143"><a href="http://jenaphotography.com/portfolio/" title="Portfolio">Portfolio</a>
<ul>
<li><a href="#nogo" >Maternity</a></li>
<li><a href="#nogo" >Newborn</a></li>
<li><a href="#nogo" >Children</a></li>
<li><a href="#nogo" >Seniors</a></li>
<li><a href="#nogo" >Engagements</a></li>
<li><a href="#nogo" >Family's</a></li>
<li><a href="#nogo" >TTD</a></li>
<li><a href="#nogo" >Nature</a></li>
<li><a href="#nogo" >Artsy</a></li>
<li><a href="#nogo" >Macro</a></li>
<li><a href="#nogo" >Eliana</a></li>
<li><a href="#nogo" >Misc.</a></li>
</ul></li>
<li class="page_item page-item-147"><a href="http://jenaphotography.com/pricing/" title="Pricing">Pricing</a>
<ul>
<li><a href="#" >Welcome</a></li>
<li><a href="#" >What to Wear</a></li>
<li><a href="#" >Business Stuff</a></li>
<li><a href="#" >Custom Portraiture</a></li>
<li><a href="#" >Collections</a></li>
<li><a href="#" >Referral Program</a></li>
</ul></li>
<li class="page_item page-item-139"><a href="http://jenaphotography.com/meet-the-photographer/" title="The&nbsp;Photographer">The&nbsp;Photographer</a></li>
</ul>
</div>
<div id="headimg">
<h1><a href="http://jenaphotography.com" title=""></a></h1>
<div id="desc"></div>
</div>
</div>

<div id="main">
<div id="content">
<div class="post hentry category-hello">
<p class="post-date">February 22, 2009</p>
<div class="post-info"><h2 class="post-title"><a href="http://jenaphotography.com/2009/02/22/check-back-soon/" rel="bookmark" title="Permanent Link: Updating&nbsp;Site">Updating&nbsp;Site</a></h2>
Posted by Jeannette Kaufmann under <a href="http://en.wordpress.com/tag/hello/" title="View all posts in Hello" rel="category tag">Hello</a> <br/><a href="http://jenaphotography.com/2009/02/22/check-back-soon/#respond" title="Comment on Updating&nbsp;Site">No Comments</a>&nbsp;</div>
<div class="post-content">
<div class='snap_preview'><ul>
<li>Iím working on updating the site.* Check back soon.</li>
</ul>
<p>*</p>
<ul>
<li>Jeannette</li>
</ul>
</div> <div class="post-info">

</div>
<div class="post-footer">&nbsp;</div>
</div>
</div>
<div class="post hentry category-seniors-2010">
<p class="post-date">February 20, 2009</p>
<div class="post-info"><h2 class="post-title"><a href="http://jenaphotography.com/2009/02/20/seniors-class-of-2010/" rel="bookmark" title="Permanent Link: Seniors ~ Class of&nbsp;2010">Seniors ~ Class of&nbsp;2010</a></h2>
Posted by Jeannette Kaufmann under <a href="http://en.wordpress.com/tag/seniors-2010/" title="View all posts in Seniors 2010" rel="category tag">Seniors 2010</a> <br/><a href="http://jenaphotography.com/2009/02/20/seniors-class-of-2010/#respond" title="Comment on Seniors ~ Class of&nbsp;2010">No Comments</a>&nbsp;</div>
<div class="post-content">
<div class='snap_preview'><table class="profileTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="label">*</td>
<td class="data">
<ul>
<li>
<div class="datawrap">Looking for new faces. Being a Representative for Jena Photography comes with several benefits. You will receive a session for $100 which includes a free 11◊14 {mounted}, 24 referral cards plus 25% off prints. Your session will include 30 minutes indoors and 1.5 hours outdoors.</div>
</li>
</ul>
<ul>
<li>
<div class="datawrap">Love your Jena Photography experience?* Tell your friends!* When someone you refer books and pays for a session, you will receive a free 8◊10 print or a set of wallets.</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div> <div class="post-info">

</div>
<div class="post-footer">&nbsp;</div>
</div>
</div>
<p align="center"></p>
</div>
<div id="sidebar">
<ul>
<li id="linkcat-50255" class="widget snap_preview widget_links"><h2 class="widgettitle">Arkansas</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://tarastatonblog.com/">Tara Staton</a></li>

</ul>
</li>

<li id="linkcat-230029" class="widget snap_preview widget_links"><h2 class="widgettitle">Atlanta Georgia</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.nataliehowell.blogspot.com/">Natalie Howell</a></li>

</ul>
</li>

<li id="linkcat-2171538" class="widget snap_preview widget_links"><h2 class="widgettitle">Bellingham Washington</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://jewelsharrell.blogspot.com/">Jewels</a></li>

</ul>
</li>

<li id="linkcat-1356" class="widget snap_preview widget_links"><h2 class="widgettitle">Blogroll</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://JenaPhotography2009.blogspot.com">2009 Photo of the Day</a></li>
<li><a href="http://www.JenaPhotography.blogspot.com">a 2008 Photo of the Day</a></li>
<li><a href="http://www.infantrefluxdisease.com">Infant Reflux Disease</a></li>
<li><a href="http://www.littlestheroesproject.org/">Littlest Heroes Project</a></li>
<li><a href="http://www.shaklee.com">Shaklee ID# WF01997</a></li>

</ul>
</li>

<li id="linkcat-112929" class="widget snap_preview widget_links"><h2 class="widgettitle">Boston Massachusetts</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.GraceNotesPhotography.com/">Aurora</a></li>

</ul>
</li>

<li id="linkcat-5892403" class="widget snap_preview widget_links"><h2 class="widgettitle">Broken Arrow Oklahoma</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.morganstreetpics.blogspot.com">Morgan Street Pics</a></li>

</ul>
</li>

<li id="linkcat-1337" class="widget snap_preview widget_links"><h2 class="widgettitle">California</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.jessicaclaire.net/">Jessica Claire</a></li>

</ul>
</li>

<li id="linkcat-6179177" class="widget snap_preview widget_links"><h2 class="widgettitle">Colorado Springs Colorado</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.heatherbauers.typepad.com/">Peekaboo</a></li>

</ul>
</li>

<li id="linkcat-148" class="widget snap_preview widget_links"><h2 class="widgettitle">Design</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.candyapplestudios.com/">Candy Apple Studios</a></li>
<li><a href="http://portraitsbychrista.com/designs/">Designs by Christa</a></li>
<li><a href="http://www.lisareichmandesign.com/blog/">Lisa Reichman</a></li>
<li><a href="http://www.orangegeckodesigns.blogspot.com/">Orange Gecko</a></li>
<li><a href="http://viberesources.com/blog/">Vibe</a></li>

</ul>
</li>

<li id="linkcat-1123772" class="widget snap_preview widget_links"><h2 class="widgettitle">Evansville Indiana</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.thesiekmantriplets.blogspot.com/">Farm House Kids</a></li>

</ul>
</li>

<li id="linkcat-4504525" class="widget snap_preview widget_links"><h2 class="widgettitle">Helsinki Finland</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.ajatonjoki.com/wordpress/">Andrea Joki</a></li>

</ul>
</li>

<li id="linkcat-3267289" class="widget snap_preview widget_links"><h2 class="widgettitle">Highland California</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://turtledovephotographynet.blogspot.com/">Turtle Dove</a></li>

</ul>
</li>

<li id="linkcat-13050401" class="widget snap_preview widget_links"><h2 class="widgettitle">Jasper Indiana</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://jessicabellphotography.com/blog/">Jess</a></li>

</ul>
</li>

<li id="linkcat-13049913" class="widget snap_preview widget_links"><h2 class="widgettitle">Johnstown Ohio</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://blueberrylanephotography.typepad.com/">Blueberry Lane</a></li>

</ul>
</li>

<li id="linkcat-8338665" class="widget snap_preview widget_links"><h2 class="widgettitle">Mansfield Texas</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://selahstudios.blogspot.com/">Selah Studios</a></li>

</ul>
</li>

<li id="linkcat-6084" class="widget snap_preview widget_links"><h2 class="widgettitle">Oklahoma</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://indiejanephotography.blogspot.com/">ripe.</a></li>

</ul>
</li>

<li id="linkcat-5639492" class="widget snap_preview widget_links"><h2 class="widgettitle">Owego New York</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.alexajanae.com/">Alexa Studios</a></li>

</ul>
</li>

<li id="linkcat-9118548" class="widget snap_preview widget_links"><h2 class="widgettitle">Owensboro Kentucky</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://capturingeverydaylife.blogspot.com/">Joanne</a></li>

</ul>
</li>

<li id="linkcat-436" class="widget snap_preview widget_links"><h2 class="widgettitle">Photography</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://dailypleasures.blogspot.com/">Daily Pleasures</a></li>
<li><a href="http://meganmilbradt.typepad.com">everyday art photography</a></li>
<li><a href="http://www.patspixpotd.blogspot.com/">Pat</a></li>

</ul>
</li>

<li id="linkcat-6550600" class="widget snap_preview widget_links"><h2 class="widgettitle">Plano Texas</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.mattnicolosiblog.com/">Matt Nicolosi</a></li>

</ul>
</li>

<li id="linkcat-3837384" class="widget snap_preview widget_links"><h2 class="widgettitle">Salt Lake City Utah</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://photosbyangie.blogspot.com/">Simplicity</a></li>

</ul>
</li>

<li id="linkcat-13050092" class="widget snap_preview widget_links"><h2 class="widgettitle">Shawnee Oklahoma</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.dejahquinnphotography.blogspot.com/">Dejah Quinn</a></li>

</ul>
</li>

<li id="linkcat-1508" class="widget snap_preview widget_links"><h2 class="widgettitle">Shopping</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.actionsbyjess.blogspot.com/">Designs by Jess</a></li>
<li><a href="http://www.etsy.com/shop.php?user_id=96446">PixelbyPixel</a></li>
<li><a href="http://thepolishedphotographer.com/">The Polished Photographer</a></li>
<li><a href="http://yayapapayatutus.blogspot.com">Yaya Papaya Tutus</a></li>

</ul>
</li>

<li id="linkcat-13050839" class="widget snap_preview widget_links"><h2 class="widgettitle">Thibodaux Louisiana</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://deedeeleblanc.blogsome.com/">LeBlanc Photography</a></li>

</ul>
</li>

<li id="linkcat-1379234" class="widget snap_preview widget_links"><h2 class="widgettitle">Twin Cities Minnesota</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.karilaylandphotography.blogspot.com/">Kari Layland</a></li>

</ul>
</li>

<li id="linkcat-59361" class="widget snap_preview widget_links"><h2 class="widgettitle">Utah</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://www.indieart-blog.blogspot.com/">India Art</a></li>
<li><a href="http://slurpee4bys1grl.blogspot.com/">whatever</a></li>

</ul>
</li>

<li id="linkcat-5952354" class="widget snap_preview widget_links"><h2 class="widgettitle">Wilmington North Carolina</h2>

<ul class='snap_preview xoxo blogroll'>
<li><a href="http://katiemathewsphotography.blogspot.com/">Katie Mathews</a></li>

</ul>
</li>

<li id="archives" class="widget widget_archive"><h2 class="widgettitle">Archives</h2>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value="">Select Month</option> <option value='http://jenaphotography.com/2009/02/'> February 2009 &nbsp;(2)</option>
</select>
</li>
<li id="blog-stats" class="widget widget_statscounter"> <h2 class="widgettitle">Blog Stats</h2>
<ul>
<li>3,554 hits</li>
</ul>
</li>
</ul> </div>

<p id="footer"><a href='http://wordpress.com/' rel='generator'>Blog at WordPress.com</a>. ó Theme: Connections by <a href="http://www.vanillamist.com" rel="designer">www.vanillamist.com</a></p>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var wpcomPageTracker = _gat._getTracker("UA-52447-2");
wpcomPageTracker._setDomainName("none");
wpcomPageTracker._setAllowLinker(true);
wpcomPageTracker._initData();
wpcomPageTracker._trackPageview();
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<script type="text/javascript">_qoptions = { labels:"adt.0,language.en" };_qacct="p-18-mFEk4J448M";quantserve();</script>
<noscript><p><img src="http://pixel.quantserve.com/pixel/p-18-mFEk4J448M.gif" style="display: none" height="1" width="1" alt="" /></p></noscript>
<script src="http://s.stats.wordpress.com/w.js?18" type="text/javascript"></script>
<script type="text/javascript">
st_go({'blog':'4453392','v':'wpcom','user_id':'0','post':'0','subd':'jenaphotography'});
ex_go({'crypt':'D6%7C%2CY1mqC.%7Csw%26t.UFrVlEOvOXCT-%26m9-O5-JREQd%5BmBp4t-elbmgvY7%7C_7gC.edmcW5%2FiEVG8%3D3mG%2Big%7CQwQH5BFYb%5D0p%2C9%2CuY7JW9hsZ9xouUrFY%7C%5Bg2sazFKCTsW-t%5DIB%26NE.8r%2CLVgdp%5DK%5D8yhf%25aDtBn%3Dok%2F%3Fo-f%5B%3D%2FujDGE95%2F%7E'});
addLoadEvent(function(){linktracker_init('4453392',0);});
</script>
</div>
</div>
</body>
</html>

And this separate CSS file, which you should save as "style.css" in the SAME folder as your home page:
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {width:900px; height:34px; background-color:#000; position:relative; z-index:100;}
.menu ul {float:right;height:21px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; height:20px; text-align:center; color:#fff; margin-top:1px; line-height:21px;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li ul li {width:100%;}

/* specific to non IE browsers */
.menu ul li:hover a {color:red;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:146px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background: #6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background: #ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}


These two together will give you a functional menu system that blends with your current style. The only part you will need to update is the style of the drop-downs, as they appear in a teal color that does not fit your current theme...

I have no issue changing the teal color. My issue is that all I have is a wordpress blog and it has a style sheet. So, I'm lost when you refer to HTML and putting the CSS in the same folder as the homepage.

Thanks again for your help.

jerry62704
02-26-2009, 04:03 PM
JeannetteK: Try this. Download FireFox (http://www.mozilla.com/en-US/firefox/) and use it for your development browser. Then while you are in FireFox, download FireBug (https://addons.mozilla.org/en-US/firefox/addon/1843).

Once you have this installed, click the little bug on the right side of the status bar. A half window will open below your web page. Start clickingon the outline on the left until you see mysterious boxes appear around parts of your web page. Note that when you click the outline (html), the css for that part will appear on the right. You can change that to try things out. Won't stick to the original, but it is pretty cool.

Learn to use that tool and you are 1/2 the way home.

Rowsdower!
02-26-2009, 04:20 PM
That's a good tip from Jerry. It makes debugging MUCH easier.

It seems also that there is some confusion on the OP's part about how to access and change the PHP files in wordpress so that her HTML can use the menu she wants (i.e. she needs to add a <div class="menu"> to the code generated by the PHP).

I have no idea what wordpress software even looks like, much less how to use it.

Any wordpress users with some advice here?

abduraooft
02-26-2009, 04:27 PM
Any wordpress users with some advice here? I had dome this before on version 2.6.1. What's the OP's version of wordpress?

JeannetteK
02-26-2009, 04:44 PM
Jerry - I'll give that a try.

Rowsdower - Yes that's me VERY confused LOL Of course if you were talking to me I'd only be 1/2 as confused. Comprehending the written english language is NOT my strong point. I didn't learn to speak english til I was 6.

abduraooft - I'm in wordpress now. And for the life of me can't find which version. Maybe cuz I've been looking at it all week. I did sign up for the wordpress blog on 8/8/08 if that helps tell you what version it might be.

JeannetteK
02-26-2009, 05:07 PM
JeannetteK: Try this. Download FireFox (http://www.mozilla.com/en-US/firefox/) and use it for your development browser. Then while you are in FireFox, download FireBug (https://addons.mozilla.org/en-US/firefox/addon/1843).

Once you have this installed, click the little bug on the right side of the status bar. A half window will open below your web page. Start clickingon the outline on the left until you see mysterious boxes appear around parts of your web page. Note that when you click the outline (html), the css for that part will appear on the right. You can change that to try things out. Won't stick to the original, but it is pretty cool.

Learn to use that tool and you are 1/2 the way home.

I've done this. It's pretty cool to look at it. Now just to figure out how to get the coding I have into the right place.

abduraooft
02-27-2009, 07:00 AM
I'm in wordpress now. And for the life of me can't find which version. Maybe cuz I've been looking at it all week. I did sign up for the wordpress blog on 8/8/08 if that helps tell you what version it might be. It must be in the readme.html file in your wordpress root folder.

JeannetteK
02-27-2009, 02:20 PM
It must be in the readme.html file in your wordpress root folder.

Thank you. Although I do not have a root folder. I don't have a folder at all. This is a stand alone blog, no hosting no extra wordpress programs. It's just straight CSS stylesheet in my dashbaord.

billvasko
03-02-2009, 02:32 AM
ok, i too want to add a single drop down menu to a tab........

here is my site: www.fastpitchelite.com

Under the NCAA SCHOOLS tab, I want it to drop down to say Division I Schools and Division II Schools. I do not want the NCAA schools to be clickable, just the drop downs. I read thru this thread and it has confused the hell outta me. I successfully added drop down menus on my site, so I'm thinking I'm not too far from doing it to a tab as well.......

Avril
03-02-2009, 06:59 AM
Hi Billvasko!

Tabbed pages are not dropdown menus. However, took a look at your site and what you need is a horizontal dropdown menu. Here's the code for a simple dropdown menu. The width of the links are uniform, and you would have to adjust size, backgrounds, etc. to correspond to your navbar.

Have fun!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
<title>Horizontal Dropdown Menu</title>

<style type="text/css">

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%;}
* html ul li a { height: 1%; }
/* End */

body {margin: 0px; border: 0px;}

#wrap {width: 601px; margin-left: auto; margin-right: auto; margin-top: 30px;border-top: 1px solid #757575;}

ul {
margin: 0;
padding: 0;
list-style: none;
display: inline;
clear: right;
width: 150px; height: 30px;
}

ul li {
float: left; clear: right;
width: 150px; height: 30px;
}

li ul {
position: relative;
left: 0px;
top: 30;
display: none;
}

ul li a {
display: block;
text-decoration: none; text-align: center;
color: #777;
background: #d4f7fd;
padding: 5px;
border-left: 1px solid #757575;
border-bottom: 1px solid #757575;
border-right: 1px solid #757575;
}

li a {
margin: 0;
padding: 0;
list-style: none;
width: 139px;
}

li:hover ul, li.over ul { display: block;}



</style>

<script type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replaceĽ
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

</head>

<body>
<div id="wrap">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Service
</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

billvasko
03-02-2009, 11:38 PM
thanks Avril, i'll give it a try......

JeannetteK
03-03-2009, 08:01 PM
Thanks everyone! Just wanted to let you know I still have not been able to do this. I'm going to have a yard sale and end up paying someone to do this for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum