How to do popups/dropdowns in double column?

HTML & CSS
1

Hi - on this page, if you click on the dropdown at the top headed “Books” you’ll see the books are in 2 columns:

Is there a way to do this 2-col for my pop-ups on this page, scroll down to “Fun to Read” -

http://www.greensmoothie.com/1gs/blend/green.html

I would like two options:

(1) a popup that pops across into a second column, like I have already for “Recipes” under that “Fun to Read”

(2) a popup that pops up into 2 columns like the one under “Books” at rawpower.com

rawpower is using tables but ideally I’d like it in the css if possible.

thank you! - Val

2

Hi Paul - oh that’s simple, thank you! I saw that line:

#btmnav .navdrop {position:relative; z-index:999}

but I didn’t know what it was :slight_smile:

Thanks million, everything’s working perfectly now! - Val

3

Hi - I know Paul’s busy! Does anyone know the best way to stop the first-level links under “Fun to Read” viz

How to Eat Raw | Sprout | Blend | Juice | Dehydrate | Recipes | Water

from changing color when it’s visited? So it stays blue all the time in just that one single line?

The problem is there’s a lot of dropdowns under each one that have not been visited, so I’d rather keep that first level blue and unvisited.

http://www.greensmoothie.com/test/blend/1mst.php

thank you - Val

4

This works:
#btmnav .navbox li li a:visited, #btmnav .navbox li li a:active {color:#f00251!important}

That should do what you want.

Don’t remove anything that says li:hover or li.over as that makes the submneu appear (although you can change colours etc. in those rules).

The li.over is the dynamic class that the script adds to list element on hover so that you can imitate the CSS hover effect of li:hover. That’s why all li:hover rules are duplicated for IE6 using li.over {}

5

Hi Paul - one small problem. I need all the dropdown links to change color when they’re active and visited. This is the format:

#btmnav a {font-weight:normal}
#btmnav a:link {color:blue; text-decoration:none}
#btmnav a:visited, #btmnav a:active {color:#f00251; text-decoration:none}
#btmnav a:hover {background:yellow; color:red; text-decoration:none}

This works:

#btmnav .navbox li li a:visited, #btmnav .navbox li li a:active {color:#f00251!important}

Is that all I need? Can I ignore the other 2 hovers in your dropdown? Or do I also need something like:

#btmnav .navbox ul li:visited a,
#btmnav .navbox ul li:active a {color:#f00251}

#btmnav .navbox ul li:visited li a,
#btmnav .navbox ul li:active li a {color:#f00251}

I get confused because those other 2 hovers also have an .over

thank you! - Val

6

yes it looks lovely thank you! They say happiness is a quality of soul and not an attribute of matter but this material css makes me so happy :):):slight_smile: Everything’s working perfectly…

thank you so much for finalizing it :slight_smile:

7

Hi Paul - thanks, no rush! I can wait while you catch up on your critical work first. It’ll take me months to sandwich every old file into the new header + footer! So it’s months before btmnav goes live :slight_smile:

For my pop-ups on this page, scroll down to “Fun to Read” -

http://www.greensmoothie.com/test/blend/1mst.php

you switched it to multiple dropdown columns for me (search Paul in the css). Now I need:

(1) the dropdown columns to look the same as yours at:

http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm

So all dropdown columns fit within a specific holding box size. You’ll see that my dropdowns under “Water” extend outside of window on right.

if that requires the same number of 1st-level links as dropdown columns (you have 4 1st-level + 4 columns whereas I have 7 1st-level + 3 columns. I don’t know if your 4-match is intentional - the only way the css will work - or accidental) then maybe I can add a navbox and move some links into the next box?

(2) Also need to clear that border on the top row of my current dropdowns, e.g. you can see it under “Eating Raw.” I’d like to apply it only when there’s a <strong> link in that row, e.g. as under “Recipes.” Perhaps just move it to the html?

e.g. <strong class=“red2bord”>text</strong>

or is it <a class=“red2bord” href=“…”><strong>text</strong></a>

.red2bord {border:1px solid #f00251}

thank you! - Val

8

Hi Val,

Just back from holiday today so if you are still having problems then post the details here again and I’ll take a look when I can.

9

I just thought the child elements looked neater without borders as you will have uneven looking columns inside otherwise. It’s just the way that these mega type menus are usually done.:slight_smile:

10

Hi Paul - this is lovely thank you! It does the essence of what I need and as you say I can play with colors and borders. It’s interesting you decided to leave out the borders, hoping there’s no technical reason for that…

I believe this completes my css! phew, 2 years since July 2008. Thanks million for hanging in there with me :slight_smile:

all the best, Val

11

HI Val.

You should be able to style the top level visitedlinks using this:


#btmnav .navbox ul li a:visited{color:blue}

Then the subnav links would be addressed like:


#btmnav .navbox ul li li a:visited{color:red}

But you seem to have something in place for the subnavs anyway from the previous post.

12

Hi Paul -

>style the top level visited links

problem is that restyles all of them + I need just that one row restyled :slight_smile:

I tried this logic, based on your <ul class=“row”>. Created a class for ul li

#btmnav .navbox ul li.funrow a:visited {color:blue}

and then the html:

<li class=“funrow”><a href=“…”>How to Eat Raw</a>

But it don’t work - I can’t understand why logic doesn’t work in css, and then I come running for you :slight_smile:

Interesting that the .over is just for IE6 so can remove in future when stop supporting 6 (like you told me you no longer write for 5)

thanks million, Val

13

Hi,

I didn’t realise you had used the same class (navbox) for all your other items but you already have a unique class on that drop down anyway so use that to style the links in that section only.

e.g.


#btmnav .[B]navdrop[/B] ul li a:visited {
    color:blue
}
14

Here’s the whole page in case I missed any changes.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Raw</title>
<meta name="Description" content="Raw">
<meta name="KeyWords" content="raw">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Author" content="Val Archer">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<link rel="stylesheet" type="text/css" href="../1cde/page.css">
<style>
/*--RESETS--*/
img, a img {
    border:none
} /*images get border by default*/
/*--BODY--*/
body {
    background:#e5ffbf;
    margin:2.5&#37; auto
}
table {/*here in body .9 reduces all child font-sizes, in main.php it's in p not body*/
    font: 0.95em "Lucida Sans Unicode", Verdana, sans-serif;
    color:black;
    line-height:1.5;
    text-align:left
}
#wrapper {
    width:97%; /*Do NOT increase to 98%, wrecks tag in ie6*/
    min-width:770px; /*Reducing this width will cause floats to fall @ min-width: Do Not Disturb*/
    max-width:1150px;
    margin:0 auto;
}
a:link {
    color:blue;
    text-decoration:underline
}
a:visited, a:active {
    color:#f00251;
    text-decoration:underline
}
a:hover {
    background:#f2ffdf;
    color:#f00251;
    text-decoration:none
}
.clear {
    clear:both
}
.clearfix:after { /*used to contain floats within a parent, 
            if parent is floated then clearfix not needed because floats enclose their floated children*/
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
/*mac hide \\*/
* html .clearfix {
    height:1%;
}
.clearfix {
    display:block;
}
/*End hide*/
/*--FONTS + SPACING--*/
em, i, cite {
    font-family: "Lucida Sans", Verdana, sans-serif
}
blockquote {
    font-family:"Lucida Sans", Verdana, sans-serif;
    font-style:italic
}
h1 {
    padding:40px 7px 40px;
    margin:0;
    font:bold 2.1em Helvetica, sans-serif;
    color:#f00251;
    text-align: center;
}
h2 {
    font:bold 1.5em Helvetica, sans-serif;
    color:#f00251;
    text-align:center;
    line-height:1.3;
    display:inline;
}
h2.lft {
    font:bold 1.22em Helvetica, sans-serif;
    color:#f00251;
    text-align:left;
    display:block;
}
h2.lft.bl {
    font:bold 1.22em Helvetica, sans-serif;
    color:blue;
    text-align:left;
    display:block;
}
.bl {
    color:blue
}
.red {
    color:red
}
.red2 {
    color:#f00251
}
.high {
    background:yellow
}
.cnt {
    text-align:center
}
.prgt10 {
    padding-right:10px
} /*head*/
/*--ROUNDCORNERS--*/
.rc15 { /*ebk*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -op-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
}
.rc20 { /*endnav*/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -op-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}
/*--HEAD--
    --CAREFUL in head floats - enlarging widths/margins/padding may cause floats to fall - check in 800x600--*/
#head {
    width:100%;
    margin-bottom:15px; /*keep MB here*/
}
.toprgt {
    float:right;
    display:inline; /*for ie6*/
    margin-right:15px;
}
/*--GOOGLE--*/
.se-btm {
    margin:0;
    padding:0
}
/*zoom:1 in google but omit 'cause wrecks ie6*/
.se-btm:after {
    clear:both;
    content: ".";
    display:block;
    height:0;
    visibility:hidden;
}
.se-txt {
    font:10px Arial;
    color:green
}
.se-form form {
    margin-bottom:0;
    padding-bottom:0
}
/*google img at bottom*/
.se-btm .se-logo, .se-btm .se-txt {
    float:left;
    display:block
}
.se-btm .se-form {
    margin-bottom:3px;
}
.se-btm .se-logo {
    padding:0
}
.se-btm .se-txt {
    padding-top:4px
}
/*--END GOOGLE--*/
.logosm {
    float:left;
    display:inline;
    margin: 0 10px 0 5px;
}
.logo {
}
.ebk {
    clear:left;
    float:left;
    background: #f2ffdf;
    display:inline;
    width:322px;
    margin:18px 0 0 20px; /*MB in hdr*/
    padding-bottom:5px;
}
.ebk h2 {
    display:block;
    padding:0; /*keep*/
    margin: 5px 0;
    font: bold 1.1em "Comic Sans MS", sans-serif;
    color: #f00251;
    text-align:center;
}
.ebk p {
    padding: 0 6px 6px;
    margin: 3px 0;
    font: 0.9em Arial, sans-serif;
    color: green;
    text-align:left;
}
.ebk .recip {
    float:left;
    display:inline;
    margin:10px 15px 10px 10px;
}
form {
    margin:0
}
.ebk .submit {
    width:170px
}
.tel {
    clear:right;
    float:right;
    display:inline;
    width:250px;
    margin:20px 50px 10px 0;
}
.tel h3 {
    padding:0;
    font: bold 1.2em Georgia, serif;
    color:green;
    text-align:center;
    line-height: 1.3;
}
.tel a:link, .tel a:visited, .tel a:active {
    font: bold 0.9em Georgia, serif;
    color:green;
    text-decoration: none
}
/*--TOP LEAF--*/
#leaftop {
    clear:both; /*head floats*/
    padding:0 40px; /*position leaf lft + rgt*/
}
.leaftoplft {
    background: url(http://www.greensmoothie.com/test/imgpg/leaftoplft.gif) no-repeat;
    float:left;
}
.leaftoprgt {
    background: url(http://www.greensmoothie.com/test/imgpg/leaftoprgt.gif) no-repeat;
    float:right;
}
.leaftoplft, .leaftoprgt {
    width:200px;
    height:63px;
    margin:0
}
.tweet { /*background:url(imgpg/tweetme.gif) no-repeat 50% 0;*/
    width:200px;
    height:63px;
    margin:0 auto;
    text-align:center;
}
/*--BOTTOM LEAF--*/
#leafup {
    clear:both; /*leftcol + rightcol*/
    position:relative;
    min-height:177px;
    margin:15px 0 10px 0; /* keeps txtnav 15px away */
}
* html #leafup {
    height:177px;
}
.leafuplft, .leafuprgt {
    position:absolute;
    width:53px;
    height:177px;
    bottom: -10px; /*aligns leaf with mrgn-btm of leafup*/
}
.leafuplft {
    left:0;
    background: url(http://www.greensmoothie.com/test/imgpg/leafuplft.gif)
}
.leafuprgt {
    right:0;
    background: url(http://www.greensmoothie.com/test/imgpg/leafuprgt.gif)
}
#leafbtm {
    height:63px;
    padding:0 40px; /*position images lft + rgt*/
}
.leafbtmlft, .leafbtmrgt {
    width:200px;
    height:63px;
    margin:0;
}
.leafbtmlft {
    float:left;
    background: url(http://www.greensmoothie.com/test/imgpg/leafbtmlft.gif)
}
.leafbtmrgt {
    float:right;
    background: url(http://www.greensmoothie.com/test/imgpg/leafbtmrgt.gif);
    clear:right; /*buynow*/
}
.pagetop {
    width:25px;
    height:31px; /*need w+h*/
    padding-top:5px;
    margin:0 auto;
}
/*--TXTNAV--*/
#txtnav {
    background:#f2ffdf;
    zoom:1.0;
    padding:10px 5px 15px 10px;
    margin:0 110px;
}
.buynow {
    float:right;
    padding:0 20px 10px 10px; /*positions img*/
}
#txtnav h3 {
    font:bold 1.2em "Comic Sans MS", sans-serif;
    color:#a1b37f;
    text-align:center;
    padding:8px 0 0 30px;
    margin: -2px 0 12px;
}
#txtnav ul { /*position of links within box*/
    padding:0 35px;
    list-style:none;
    margin:0;
}
#txtnav li {
    display:inline;
    position:relative;
    font:0.8em Arial, sans-serif;
    line-height:1.9;
}
#txtnav li span {
    position:relative;
    color:green;
    font-size:1em;
    padding:0 3px 0 6px; /*gives space each side of pipe*/
    top: -2px;
}
#txtnav li a:link {
    color:blue;
    text-decoration:none
}
#txtnav li a:visited, #txtnav li a:active {
    color:#f00251;
    text-decoration:none
}
#txtnav li a:hover {
    background:white;
    color:red;
    text-decoration:none
}
/*--BTMNAV--*/
#btmnav {
    clear:both; /*leafbtm-lft/rgt*/
    width:100%;
    zoom:1.0;
}
.ebk-sm {
    width:500px;
    text-align:center;
    margin:5px auto 40px;
}
.ebk-sm form {
    text-align:center;
    margin-top:10px
}/*submit width 4 IE6/7 does not work here*/
#btmnav h2 { /*for ebk*/
    padding-bottom: 10px;
    font: bold 1.25em "Comic Sans MS", sans-serif;
    color: #f00251;
    text-align:center;
}
#btmnav h3 { /*for navs*/
    font:bold 1.2em "Comic Sans MS", sans-serif;
    color: #a1b37f;
    padding:8px 0 0 30px;
    margin: -2px 0 11px;
}
#btmnav h3 span {
    font:bold 0.8em Arial, sans-serif;
    color:green;
}
#btmnav h3 a {
    font:0.7em Arial
}
#btmnav h3 a:link {
    color:blue;
    text-decoration:none
}
#btmnav h3 a:visited, #btmnav h3 a:active {
    color:#f00251;
    text-decoration:none
}
#btmnav h3 a:hover {
    background:white;
    color:red;
    text-decoration:none
}
#btmnav ul { /*position of links within boxes*/
    padding:0 30px;
    list-style:none;
    margin:0;
    zoom:1.0;
    position:relative;
}
#btmnav li {
    float:left; /*don't clear in .shop*/
    display:inline;
    /*position:relative;*/
    font: 0.8em Arial, sans-serif;
    line-height: 1.9em;
}
#btmnav li a {
    white-space:nowrap
}
#btmnav li span {
    position:relative;
    padding:0 6px; /*gives space each side of pipe*/
    top: -2px;
    font-size:0.9em;
    color:green;
}
#btmnav a {
    font-weight:normal
}
#btmnav a:link {
    color:blue;
    text-decoration:none
}
#btmnav a:visited, #btmnav a:active {
    color:#f00251;
    text-decoration:none
}
#btmnav a:hover {
    background:white;
    color:red;
    text-decoration:none
}
.navimg {
    width:24px;
    height:24px;
    float:left
}
.navbox, .truebox {
    background:#f2ffdf;
    zoom:1.0;
    padding:10px 20px 15px 10px;
    margin:0 120px; /*position of box*/
    margin-bottom:20px !important;
}
.truebox p {
    padding:0 10px;
    font:0.9em "Trebuchet MS", sans-serif;
    color: #f00251;
}
.truebox blockquote {
    padding:0
}
.truebox blockquote p {
    padding:0;
    margin:0 0 10px;
    font:italic 0.8em Georgia, serif;
    color:#2e2eff;
    line-height:1.8;
}
/*--DROPDOWNS - code from Paul @ http://www.pmob.co.uk*/
#btmnav .navbox ul li:hover ul, #btmnav .navbox ul li.over ul {
    left:0
}
#btmnav .navdrop {
    position:relative;
    z-index:999
}
#btmnav .navbox ul ul {
    background:white;
    position:absolute;
    top:1.6em; /*not too far away or you lose focus*/
    left:-999em;
    padding:0;
    border-bottom:none;
    text-align:left;
    z-index:99;
}
#btmnav .navbox li li {
    clear:left;
    float:left;
    font-size:100%;
    padding:0;
    position:static;
}
#btmnav .navbox ul li:hover a, #btmnav .navbox ul li.over a {
    background:#e8e8ff;
    color:#f00
}
#btmnav .navbox ul li:hover li a, #btmnav .navbox ul li.over li a {
    background:#fff;
    color:blue
}
#btmnav .navbox li li a {
    clear:left;
    float:left;
    position:relative;
    width:207px; /*max menu charactrs 28 for 1-line*/
    padding:2px 5px; /*2px is height of each line in popup*/
    white-space:normal;
    line-height:normal;
}
#btmnav .navbox li li a:hover {
    background:red!important;
    font-weight:bold;
    color:white!important;
}
#btmnav .navbox ul li ul.row {
    width:680px;
    background:#fff;
    border:1px solid #ccc;
    border-top:5px solid #f00;
    border-bottom:5px solid #f00;
    padding:5px 0;
}
#btmnav .navbox ul li ul.row li {
    float:left;
    position:static;
    clear:none;
    background:white;
    border:none;
    width:218px;
    padding:0;
    margin:0 0 0 7px;
    display:inline
}
#btmnav .navbox ul li ul.row li li {
    margin:0
}
#btmnav .navbox ul li h4, #btmnav .navbox ul li h4 a {
    background:#e8e8ff!important;
    color:red;
    text-align:center;
    display:block;
    margin:0;
    font-size:100%;
}
#btmnav .navbox ul li h4 a {
    border:1px solid #f00;
    padding:2px 4px
}
* html #btmnav .navbox ul h4 a {
    height:1%
}
#btmnav .navbox ul li ul.row li li {
    clear:left;
    border:none
}
#btmnav .navbox ul li ul.row li ul {
    position:static;
    clear:left;
    left:0;
    top:0;
    z-index:99;
    width:auto;
}
/*--FOOD4WEALTH--*/
.f4w-pic {
    width:100%;
    background:#e5ffbf;
    text-align:center
}
.f4w-txt {
    width:707px;
    background:white;
    padding:15px 10px 5px;
    margin:0 auto;
    font: 0.9em "Lucida Sans Unicode", Verdana, sans-serif;
    color:black;
    line-height:1.5;
    text-align:center
}
.f4w-txt a:link {
    color:blue;
    text-decoration:underline !important
}
.f4w-txt a:visited, .f4w-txt a:active {
    color:#f00251;
    text-decoration:underline !important
}
.f4w-txt a:hover {
    background:#f2ffdf !important;
    color:#f00251 !important;
    text-decoration:none !important
}
/*--LOGOBTM--*/
.logobtm {
    clear:both; /*navs*/
    background: url(http://www.greensmoothie.com/test/imgpg/logo.gif) no-repeat 50% 0;
    width:100%;
    height:75px;
    margin:30px 0;
}
/*--NEWBOX--*/
.newbox {
    background:#f2ffdf;
    zoom:1.0;
    padding:20px 10px 5px 5px;
    margin:0 100px; /*hcnt of box*/
}
.newbox h2 {
    margin:0 auto;
    padding:0;
    display:block;
    font:bold 1.6em "Comic Sans MS", sans-serif;
    color:#f00251;
    text-align:center;
}
.newbox table {
    font:0.9em "Lucida Sans Unicode", Verdana, sans-serif;
    line-height:1.5
}
/*--LEAFEND--*/
.leafend {
    clear:both; /*com+newbox*/
    background: url(http://www.greensmoothie.com/test/imgpg/leafend.gif) no-repeat 50% 0;
    width:100%;
    height:67px;
    margin:30px 0 30px;
}
/*--FOOTNAV--*/
#footnav {
    width:100%;
    zoom:1.0;
}
.footlft {
    float:left;
    display:inline;
    width:450px;
    margin:0 0 10px 20px;
}
.footlft p {
    margin:0 0 10px
}
.btmlft {/*icons*/
    float:left;
    display:inline;
    margin:0 0 30px 15px;
}
.fda {
    clear:left
}
.fda p {
    font:0.59em Arial, sans-serif;
    color:#666666;
    line-height:1.2
}
.footrgt {
    float:right;
    display:inline;
    width:250px;
    margin:0 20px 10px 0;
}
.footrgt p {
    margin:0 0 10px
}
.btmrgt {/*send*/
    float:right;
    display:inline;
    margin:0 0 25px;
    width:100%;
    height:23px;
    text-align:center;
}
.last {
    margin:0 0 10px;
    clear:right
}
.last .copy {
    font:0.7em arial, sans-serif;
    color:green;
    text-align:right
}
.last p {
    font:0.6em Arial, sans-serif;
    color:#666666;
    text-align:right
}
.last a {
    padding:2px
}
.last a:link, .last a:visited, .last a:active {
    color:#666666;
    text-decoration:none
}
.last a:hover {
    background:white;
    color:red;
    text-decoration:none
}
/*--*/
</style>
<!--js 4 dropup btmnav IE6 + b4-->
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
    var sfEls = document.getElementById("btmnav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<!--CHANGE-->
<a NAME="blenders"></a>
<div id="wrapper">
    <div id="head" class="clearfix">
        <div class="logosm"> <img  src="http://www.greensmoothie.com/test/imgpg/logosm.gif" alt="GoGreen  Automatic Sprouters" title="GoGreen Automatic Sprouters" width="133px"  height="51px" /> </div>
        <div class="toprgt prgt10"><a  href="../store/vbasket.php"> <img  src="http://www.greensmoothie.com/test/imgpg/icshop32.gif" alt="View  Cart" title="View Cart" width="32px" height="32px" /></a>  </div>
        <div class="toprgt">
            <!--begin google-->
            <div class="se-btm">
                <div class="se-form">
                    <form action="http://www.greensmoothie.com/test/google.php" id="cse-search-box">
                        <div>
                            <input type="hidden" name="cx" value="partner-pub-3903628552926468:a7c93isjhhr" />
                            <input type="hidden" name="cof" value="FORID:9" />
                            <input type="hidden" name="ie" value="UTF-8" />
                            <input type="text" name="q" size="20" />
                            <input type="submit" name="sa" value="go" />
                        </div>
                    </form>
                </div>
                <!--end se-form-->
                <div class="se-logo"><img  src="http://www.greensmoothie.com/test/imgpg/google.gif" alt="google  logo" width="56" height="20" /> </div>
                <div class="se-txt">Search this Site</div>
            </div>
            <!--end se-btm-->
            <!--end google-->
        </div>
        <div class="toprgt"><a href="../"> <img  src="http://www.greensmoothie.com/test/imgpg/ichome24.gif" alt="Site  Home" title="Site Home" width="24" height="24" /></a>  </div>
        <div class="toprgt"><a  href="http://twitter.com/valarcher" target="_blank"> <img  src="http://www.greensmoothie.com/test/imgpg/ictwit24.gif" alt="Val's  Hot Raw Tips on Twitter" title="Val's Hot Raw Tips on Twitter"  width="17" height="22" /></a> </div>
        <div class="ebk rc15">
            <h2>FREE - 100+ RAW Recipes!</h2>
            <div class="recip"> <img  src="http://www.greensmoothie.com/test/imgpg/rec05.jpg" alt="raw  recipes" title="raw recipes" width="100px" height="100px" />  </div>
            <p>Snacks, Main Meals, Salads, Desserts, Drinks,  <span class="red2">Color Photos</span>, Kitchen Tour + 
                Inspiring <span class="red2">Testimonials!</span></p>
            <form action="http://www.greensmoothie.com/cgi-bin/dada/mail.cgi">
                <input type="hidden" name="flavor" value="subscribe" />
                <input type="hidden" name="list" value="health" />
                <input type="text" name="email" value="enter email--strict privacy" size="24" />
                <p>
                    <input class="submit" type="submit" name="sub" value="Send my Free eBook =>" />
                </p>
            </form>
        </div>
        <div class="tel">
            <h3>Get Help!<br />
                Call 989-689-0005<br />
                <br />
                <a href="mailto:help@greensmoothie.com">help@greensmoothie.com</a></h3>
        </div>
    </div>
    <div id="leaftop">
        <div class="leaftoplft"></div>
        <div class="leaftoprgt"></div>
        <div class="tweet">
            <!--&nbsp; does not work-->
            <a target="_blank"  href="http://twitter.com/home?status=wow did u read  http://www.greensmoothie.com/blend/choc.php by @valarcher?"> <img  src="http://www.greensmoothie.com/test/imgpg/tweet.gif" alt="tweet"  title="click to share" width="98px" height="66px" /></a>  </div>
    </div>
    <!--leaftop-->
    <center>
        <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" >
            <tr>
                <td ALIGN=RIGHT VALIGN=TOP WIDTH="53"  BGCOLOR="#E5FFBF"><img SRC="pg-lft-dwn.gif" height=177  width=53></td>
                <td VALIGN=TOP BGCOLOR="#FFFFFF"><center>
                        <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="86%" >
                            <tr>
                                <td><h1>Raw Chocolate Recipes</h1>
                                    One day along the raw food path, you discover demon Chocolate has left
                                    you. Oh Happy Day!
                                    <p>It not longer sits on your left shoulder babbling Dark Thoughts of Gluttony.
                                        It's gone to find a weaker cooked-food shoulder to cry on.
                                    <p>In the late 80's I ate two large slabs of Cadbury's every day when I
                                        sat down to my computer. Today I  can't stand the taste of factory-made chocolate.</td>
                            </tr>
                        </table>
                    </center>
                    <br>
                    &nbsp;
                    <table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=2 WIDTH="100%" >
                        <tr>
                            <td ALIGN=CENTER  BGCOLOR="#FFFFFF"><img SRC="pg-mid-30.gif" height=25  width=30></td>
                            <td ALIGN=CENTER WIDTH="370" HEIGHT="45"  BGCOLOR="#E5FFBF"><h2> Chocolate Falls  Away!</h2></td>
                        </tr>
                    </table>
                    <img SRC="btn-space.gif" height=10 width=10>
                    <center>
                        <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="86%" >
                            <tr>
                                <td><span style="BACKGROUND-COLOR: #FFFF00"></span> <br>
                                    Susie Miller and Karen Knowledge write in <i>Feel-Good Food</i> (2000):
                                    <blockquote>"We were amazed by our effortless
                                        ability to lose our well-entrenched chocolate addictions, but in time,
                                        after eating a high raw diet, we came to find that it genuinely didn't
                                        taste good any more!"
                                        <p>"After the initial two seconds' taste explosion
                                            we both grew to really dislike the aftertaste of chocolate and how we felt
                                            for hours after eating it." 
                                    </blockquote>
                                    Yeah, right. I thought. That will never happen to me. In the first years
                                    of healing my unbearable tooth-aches (from 1992 to 1995) I ate cashew-date
                                    crunch instead of chocolate (<a href="../dhd/recipes.php">see recipe here</a>).
                                    When the toothaches ended, chocolate crept back in.
                                    <p><span style="BACKGROUND-COLOR: #FFFF00">Up to December 2005, I bought
                                        chocolate every week I went shopping.</span> Over 13 years I'd reached
                                        a steady 95% raw foods, but the other 5% was whatever I felt like. Usually
                                        pizza, chips and chocolate on a Friday evening.
                                    <p>Mainly because I could not bear to spend one minute in a kitchen preparing
                                        anything. You want a break! I never wanted pizza, I just wanted something
                                        tasting good. Where I live at the bottom of Africa, there's no wholefood
                                        take-aways.</td>
                            </tr>
                        </table>
                    </center>
                    <br>
                    &nbsp;</td>
                <td ALIGN=LEFT VALIGN=TOP WIDTH="53"  BGCOLOR="#E5FFBF"><img SRC="pg-rgt-dwn.gif" height=177  width=53></td>
            </tr>
        </table>
    </center>
    <div id="leafup">
        <div class="leafuplft"></div>
        <div class="leafuprgt"></div>
        <div id="txtnav" class="rc20 clearfix">
            <div class="buynow"> <a  href="../store/vitem-bl.php"><img  src="http://www.greensmoothie.com/test/imgpg/buynow.gif" alt="buy now"  title="Go to Order page for Blenders"
     width="60px" height="61px" /></a> </div>
            <!--end buynow-->
            <h3>Blending Links</h3>
            <ul>
                <li><a href="../vitem-gde.php">Buy Plans to  build Sprouter</a><span>|</span></li>
                <li><a href="../vitem-spr.php">Buy GoGreen  Automatic Sprouter</a><span>|</span></li>
                <li><a href="../vitem-kit.php">Buy Mist Kit  to build Sprouter</a><span>|</span></li>
                <li><a href="../index.php">Why Sprouting Is Essential</a><span>|</span></li>
                <li><a href="../feedback.php">Feedback from  Sprouter Users</a><span>|</span></li>
                <li><a href="../compare.php">Compare All  Automatic Sprouters</a><span>|</span></li>
                <li><a href="../pickit.php#mainlist">Compare  Sprouters + Mist Kits</a><span>|</span></li>
                <li><a href="../best.php">Get Sprouter, Kit or Plans?</a><span>|</span></li>
                <li><a href="../faq.php">Sprouter FAQs</a><span>|</span></li>
                <li><a href="../juice.php">How much Wheatgrass Juice?</a><span>|</span></li>
                <li><a href="../vitem-spr.php">Photos Sprouters</a><span>|</span></li>
                <li><a href="../pickit.php">Photos Mist Kits</a><span>|</span></li>
                <li><a href="../picwheatgr.php">Photos Wheatgrass</a><span>|</span></li>
                <li><a href="../picgreens.php">Photos Baby Greens</a><span>|</span></li>
                <li><a href="../picwater.php">Deciding on  Water Source</a><span>|</span></li>
                <li><a href="../commercial.php">Commercial Sprouters</a></li>
            </ul>
        </div>
    </div>
    <!--leafup-->
    <div id="leafbtm">
        <div class="leafbtmlft"></div>
        <div class="leafbtmrgt"></div>
        <div class="pagetop">
            <!--CHANGE-->
            <a href="#blenders"> <img  src="http://www.greensmoothie.com/test/imgpg/top.gif" alt="top"  title="Go to top of page" width="25px" height="31px" /></a>  </div>
    </div>
    <!--leafbtm-->
    <div id="btmnav">
        <!--ebk 2 logobtm-->
        <br />
        <div class="ebk-sm">
            <h2>FREE TODAY - RAW RECIPE eBOOK !</h2>
            <form action="http://www.greensmoothie.com/cgi-bin/dada/mail.cgi">
                <input type="hidden" name="flavor" value="subscribe" />
                <input type="hidden" name="list" value="health" />
                <input type="text" name="email" value="enter email--strict privacy" size="24" />
                <input class="submit" type="submit" name="sub" value="Send my Free eBook =>" />
            </form>
        </div>
        <div class="navbox rc20 clearfix">
            <div class="navimg"><img  src="http://www.greensmoothie.com/test/imgpg/icshop24.gif" alt="shop"  title="shop" width="24px" height="24px" /> </div>
            <h3>Shop Here</h3>
            <ul>
                <li><a  href="../store/vitem-spr.html">Automatic  Sprouters</a><span>|</span></li>
                <li><a href="../store/vitem-kit.html">Mist Kits</a><span>|</span></li>
                <li><a href="../store/vitem-gde.html">Sprouter Plans</a><span>|</span></li>
                <li><a  href="../store/vitem-xtra.html">Sprouter  Extras</a><span>|</span></li>
                <li><a  href="../store/vitem-hyd.html">Hydroponic  Units</a><span>|</span></li>
                <li><a href="../store/vitem-wf.html">Water Ionizers</a><span>|</span></li>
                <li><a href="../store/vitem-bl.html">Blenders</a><span>|</span></li>
                <li><a href="../store/vitem-jcr.html">Juicers</a><span>|</span></li>
                <li><a href="../store/vitem-dhd.html">Dehydrators</a><span>|</span></li>
                <li><a href="../store/vitem-rav.html">Rave  Diet Book + DVD</a><span>|</span></li>
                <li><a  href="mailto:help@greensmoothie.com?subject=Please Email Organic Seeds  Price List">Dan's Seeds</a></li>
            </ul>
        </div>
        <div class="navbox rc20 clearfix">
            <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icmagn24.gif" alt="focus"  title="focus" width="24px" height="24px" /> </div>
            <h3>Focus : <span>Begin Living Today the Lowcost Way...</span></h3>
            <ul>
                <li><a  href="http://www.sprouthouse.com/Organic_Sprouting_Seeds_s/1.htm&amp;Click=6102"  target="_blank">Organic Sprouting  Seeds</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/Organic_Sproutng_Seeds_Mixtures_s/24.htm&amp;Click=6102"  target="_blank">Organic Sprouting Seed  Mixes</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/Tray_Sprouters_s/2.htm&amp;Click=6102"  target="_blank">Sprout Master Tray  Sprouters</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/Jar_Sprouters_s/3.htm&amp;Click=6102"  target="_blank">Easy Sprout  Sprouter</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/category_s/34.htm&amp;Click=6102"  target="_blank">Terra Cotta  Sprouter</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/Hemp_Bag_Sprouter_s/4.htm&amp;Click=6102"  target="_blank">Hemp Bag  Sprouter</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/category_s/36.htm&amp;Click=6102"  target="_blank">Organic  Fertilizers</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/Wheat_Grass_and_Barley_Grass_Trays_and_Tray_Stands_Shelves_s/20.htm&amp;Click=6102"  target="_blank">Wheatgrass  Trays</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/category_s/30.htm&amp;Click=6102"  target="_blank">Sure To Grow  Mats</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/Easy_Green_Automatic_Sprouter_s/5.htm&amp;Click=6102"  target="_blank">EasyGreen Auto  Sprouter</a><span>|</span></li>
                <li><a  href="http://www.sprouthouse.com/Sprouts_for_Pets_s/7.htm&amp;Click=6102"  target="_blank">Sprouts for Pets</a></li>
            </ul>
        </div>
        <div class="navbox rc20 clearfix navdrop">
            <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icdocs24.gif" alt="article  icon" title="Go to Index for All Info" width="24px" height="24px" />  </div>
            <h3>Fun to Read : <span>Hover Here to Learn a Lot...</span></h3>
            <ul>
                <li><a href="../eat/index.html">Eating Raw</a><span>|</span>
                    <ul class="row">
                        <li>
                            <ul>
                                <li><a  href="../water/benefits.php">Benefits of Ionizing Your  Water</a></li>
                                <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                                <li><a  href="../water/alkaline2.php">How to Quench Free  Radicals</a></li>
                                <!--            <li><a  href="../water/pray.html">Prayer Re-Energizes  Water</a></li>-->
                                <li><a href="../water/filter.php">Filter Specs</a></li>
                                <!--            <li><a  href="../water/need.html">When Not to Buy  Ionizer</a></li>-->
                                <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                                <li><a href="../water/specs.php">Melody + Orion</a></li>
                                <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                                <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                                <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                                <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                                <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                                <li><a href="../water/reverse.php">Reverse Aging</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                                <li><a  href="../water/specs.php#coral">Benefits of Coral  Calcium</a></li>
                                <li><a href="../water/works.php">How Ionizers Work</a></li>
                                <li><a href="../water/acid.php">Acid Water</a></li>
                                <li><a href="../water/food.php">Oxidizing Food</a></li>
                                <li><a href="../water/food2.php">How ATP Is Made</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="../eat/recipes.html">Recipes</a><span>|</span>
                    <ul class="row">
                        <li>
                            <h4><a href="../eat/recipes.html#">Plant Fats</a></h4>
                            <ul>
                                <li><a href="../eat/recipes.html#">Nut + Seed Yogurts</a></li>
                                <li><a href="../eat/recipes.html#">Nut + Seed Milks</a></li>
                                <li><a href="../eat/recipes.html#">Nut Butters</a></li>
                                <li><a href="../eat/recipes.html#">Cashew Date Crunch</a></li>
                                <li><a href="../eat/recipes.html#">Hot Nachos Chips</a></li>
                                <li><a href="../eat/recipes.html#">Chocolate Recipes </a></li>
                            </ul>
                        </li>
                        <li>
                            <h4><a href="#">Carbohydrates</a></h4>
                            <ul>
                                <li><a href="#">Animal Companions</a></li>
                                <li><a href="#">How to Sprout + Grind Wheat</a></li>
                                <li><a href="#">Pie Crust + homemade SOD</a></li>
                                <li><a href="#">Sprouted Pasta Snacks</a></li>
                                <li><a href="#">Spicy Sprouted Muffins</a></li>
                                <li><a href="#">Fat-Free Desserts</a></li>
                                <li><a href="#">Carrot Cake Crackers</a></li>
                                <li><a href="#">Ginger Oat Cookies</a></li>
                            </ul>
                        </li>
                        <li>
                            <h4><a href="#">Proteins</a></h4>
                            <ul>
                                <li><a href="#">My High-Nutrient Blend</a></li>
                                <li><a href="#">Quinoa Crunch</a></li>
                                <li><a href="#">Pizza Crackers</a></li>
                                <li><a href="#">Energy Soup</a></li>
                                <li><a href="#">Green Smoothies</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="../index.html">Sprouting</a><span>|</span>
                    <ul class="row">
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                                <li><a href="../blend/">test 4</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="../blend/index.html">Blending</a><span>|</span>
                    <ul class="row">
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                                <li><a href="../blend/">test 4</a></li>
                                <li><a href="../blend/">test 5</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="../juice/index.html">Juicing</a><span>|</span>
                    <ul class="row">
                        <li>
                            <ul>
                                <li><a href="../juice/">testing 1</a></li>
                                <li><a href="../juice/">testing 2nd link</a></li>
                                <li><a href="../juice/">test 3</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="../juice/dhd/index.html">Dehydrating</a><span>|</span>
                    <ul class="row">
                        <li>
                            <ul>
                                <li><a href="../juice/dhd/">testing 1</a></li>
                                <li><a href="../juice/dhd/">testing 2nd link</a></li>
                                <li><a href="../juice/dhd/">test 3</a></li>
                                <li><a href="../blend/">test 4</a></li>
                                <li><a href="../blend/">test 5</a></li>
                                <li><a href="../blend/">test 6</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../blend/">testing 1</a></li>
                                <li><a href="../blend/">testing 2nd link</a></li>
                                <li><a href="../blend/">test 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="../water/index.html">Water</a>
                    <ul class="row">
                        <li>
                            <ul>
                                <li><a  href="../water/benefits.php">Benefits of Ionizing Your  Water</a></li>
                                <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                                <li><a  href="../water/alkaline2.php">How to Quench Free  Radicals</a></li>
                                <!--            <li><a  href="../water/pray.html">Prayer Re-Energizes  Water</a></li>-->
                                <li><a href="../water/filter.php">Filter Specs</a></li>
                                <!--            <li><a  href="../water/need.html">When Not to Buy  Ionizer</a></li>-->
                                <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                                <li><a href="../water/specs.php">Melody + Orion</a></li>
                                <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                                <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                                <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                                <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                                <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                                <li><a href="../water/reverse.php">Reverse Aging</a></li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                                <li><a  href="../water/specs.php#coral">Benefits of Coral  Calcium</a></li>
                                <li><a href="../water/works.php">How Ionizers Work</a></li>
                                <li><a href="../water/acid.php">Acid Water</a></li>
                                <li><a href="../water/food.php">Oxidizing Food</a></li>
                                <li><a href="../water/food2.php">How ATP Is Made</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbox rc20 clearfix">
            <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icinfo24.gif" alt="info"  title="info" width="24px" height="24px" /> </div>
            <h3>Info Links</h3>
            <ul>
                <li><a href="../blend/green.html">Green Smoothies</a><span>|</span></li>
                <li><a href="../hydro/indoor.html">Hydroponics</a><span>|</span></li>
                <li><a href="../ebks/loseweight.html">Lose  Weight Easily</a><span>|</span></li>
                <li><a href="../eat/lifestyle.html">End Cancer</a><span>|</span></li>
                <li><a href="../eat/teeth.html">Teeth + Gum Care</a><span>|</span></li>
                <li><a  href="http://www.1shoppingcart.com/app/?af=778047"  target="_blank">Eye  Care</a><span>|</span></li>
                <li><a  href="http://www.skinsosilky.com/?a_aid=497451e2cb6eb"  target="_blank">Skin  Care</a><span>|</span></li>
                <li><a href="../links/index.html">Rawfood Sites</a><span>|</span></li>
                <li><a href="../web/index.html">How to Build + Monetize a Website and Mail List</a></li>
            </ul>
        </div>
        <div class="navbox rc20 clearfix">
            <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/icweb24.gif" alt="web icon"  title="Go to Ann Wigmore Home Study Course" width="24px" height="24px"  /> </div>
            <h3>Web Links : <span>If a link does not work,  use Firefox! &ndash;</span> <a  href="http://www.getfirefox.com/"  target="_blank">GetFirefox.com</a></h3>
            <ul>
                <li><a  href="http://www.1shoppingcart.com/app/?Clk=3184246"  target="_blank">DVDs for Lowfat Raw  Recipes</a><span>|</span></li>
                <li><a  href="https://www.e-junkie.com/ecom/gb.php?ii=273868&amp;c=ib&amp;aff=77168&amp;cl=52844"  target="ejejcsingle">Raw Savory Veggie  Stews</a><span>|</span></li>
                <li><a  href="http://www.1shoppingcart.com/app/?af=1059558"  target="_blank">Juice  Feasting</a><span>|</span></li>
                <li><a  href="http://www.1shoppingcart.com/app/?af=675301"  target="_blank">Reverse  Diabetes</a><span>|</span></li>
                <li><a  href="https://bewellbuzz.infusionsoft.com/go/launch/gogreen/"  target="_blank">Longevity  Now</a><span>|</span></li>
                <li><a  href="http://www.1shoppingcart.com/app/?af=945189"  target="_blank">Ann Wigmore Home Study  Course</a><span>|</span></li>
                <li><a  href="http://click.linksynergy.com/fs-bin/stat?id=OaoirKdJ9Sk&amp;offerid=144043&amp;type=3&amp;subid=0">Eco-Home  + Solar Products</a></li>
            </ul>
        </div>
        <div class="truebox rc20 clearfix">
            <div class="navimg clear"><img  src="http://www.greensmoothie.com/test/imgpg/iccomp24.gif"  alt="feedback" width="24px" height="24px" /> </div>
            <h3>Sprouter Feedback</h3>
            <p>Rev. George Malkmus of Hallelujah Acres, Shelby, NC, loves his GoGreen Sprouter:</p>
            <blockquote>
                <p>"Sprouter up and running - HALLELUJAH!</p>
                <p>Dear Val, the sprouter is fantastic!</p>
                <p>Just harvested our first 5 trays, one of them  sunflower sprouts, and they all turned out great!</p>
                <p>Thanks for making it happen! Blessings!"</p>
            </blockquote>
        </div>
        <div class="f4w-pic"> <a  href="http://d4c13dpat5s77oaj7cghdp3m2q.hop.clickbank.net/"  target="_blank"> <img  src="http://www.greensmoothie.com/test/imgpg/food4w.gif" alt="eco-garden  info" width="728px" height="90px" /></a> </div>
        <div class="f4w-txt">
            <p>What's an Eco-Organic Garden? NO Digging ... REPELS Pests ... Virtually NO WEEDS<br />
                ANY soil, ANY climate ... Fresh ORGANIC Vegetables + Fruit Daily ALL YEAR ...<br />
                SAFE for You, Safe for Your Family, Safe for our Planet ... Enjoy Permaculture at its Best ...</p>
            <p><a  href="http://d4c13dpat5s77oaj7cghdp3m2q.hop.clickbank.net/"  target="_blank"> Download Your How-To Guide + Videos Here  Today</a></p>
            <p><em>"You can succeed if you know the Power  within you."</em> (Dr Normal Walker in <cite>Become  Younger</cite>)</p>
        </div>
        <div class="logobtm"></div>
    </div>
    <div class="newbox rc20">
        <h2 class="cnt">Web Specials Today !</h2>
        <table BORDER=0 CELLSPACING=0 CELLPADDING=20 COLS=2 WIDTH="100%" >
            <tr>
                <td ALIGN=CENTER WIDTH="30%"><a  href="http://www.sprouthouse.com/?Click=6102" target="_blank"><img  src="http://www.greensmoothie.com/test/imgnew/sproutmstr.jpg"  alt="Sprout Master" width="100px" height="88px" /></a>  </td>
                <td><b><a  href="http://www.sprouthouse.com/?Click=6102" target="_blank">FREE  Organic Sprout Seeds!</a></b>
                    <p>Get a Sprout Master ($13.95) or Easy Sprout  Sprouter ($13.50) Today, and you get one lb of organic Sprouting seeds  for Free! &nbsp;<a href="http://www.sprouthouse.com/?Click=6102"  target="_blank">Read more...</a></p></td>
            </tr>
            <tr>
                <td ALIGN=CENTER WIDTH="30%"><a  href="http://www.rawpower.com/cgi-bin/index.cgi?af=1070&amp;display=single&amp;item_id=0020"  target="_blank"><img  src="http://www.greensmoothie.com/test/imgnew/swing.jpg" alt="Workout  Swing" width="150px" height="128px" /></a> </td>
                <td><b><a  href="http://www.rawpower.com/cgi-bin/index.cgi?af=1070&amp;display=single&amp;item_id=0020"  target="_blank">30% Discount on Workout Swing!</a></b>
                    <p>Today's price only $139 (other websites  $199). Unique way to stretch + strengthen your muscles, joints and  spine. Safely hang upside down! Get your blood flowing...  &nbsp;<a  href="http://www.rawpower.com/cgi-bin/index.cgi?af=1070&amp;display=single&amp;item_id=0020"  target="_blank">Read more...</a></p></td>
            </tr>
            <tr>
                <td ALIGN=CENTER WIDTH="30%"><a  href="http://www.1shoppingcart.com/app/?af=1199263&u=http://www.waveshield.com/videos/WakeUpCall/Cell-Phone-Wake-Up-Call.html"><img  src="http://www.greensmoothie.com/test/imgnew/cellph.jpg"  alt="Cellphone Video" width="150px" height="136px" /></a>  </td>
                <td><b><a  href="http://www.1shoppingcart.com/app/?af=1199263"  target="_blank">Is Your BRAIN Safe?</a></b>
                    <p>Doctors report cell phones are doubling the  risk of malignant brain tumours. This is deadly if you or your children  are hooked on mobile phones (and cordless phones).
                    <p><a  href="http://www.1shoppingcart.com/app/?af=1199263"  target="_blank">Get the best wave shield I know to Protect your  Brain.</a> Proven test results. Buy 3 + Get 1 Free - only $59.85  Today. Protect your family! &nbsp;<a  href="http://www.1shoppingcart.com/app/?af=1199263"  target="_blank">Read more...</a></p></td>
            </tr>
        </table>
    </div>
    <div id="footnav">
        <div class="leafend"></div>
        <div class="footlft">
            <div class="btmlft"><a href="../"> <img  src="http://www.greensmoothie.com/test/imgpg/ichome32.gif" alt="Site  Home" title="Site Home" width="32" height="32" /></a>  </div>
            <div class="btmlft"> <img  src="http://www.greensmoothie.com/test/imgpg/cards.gif" alt="accept  Mastercard, Visa, Amex, Discover, Paypal" title="accept Mastercard,  Visa, Amex, Discover, Paypal" width="256" height="33" /> </div>
            <div class="btmlft"><a  href="../store/vbasket.php"> <img  src="http://www.greensmoothie.com/test/imgpg/icshop32.gif" alt="View  Cart" title="View Cart" width="32px" height="32px" /></a>  </div>
            <div class="fda">
                <p class="clear">Notes required by US FDA (Food +  Drug Administration) and US FTC (Federal Trade Commission): This website  is for information only. It is not intended to diagnose, treat, cure,  or prevent any specific disease. Its products are for complementing a  healthy lifestyle. Commission is earned on products sold here or linked  to from this site. Feedback on our GoGreen Sprouter reflects typical  results, substantiated by scientific evidence that seeds containing the  germ of life will germinate when given water and light.</p>
            </div>
        </div>
        <div class="footrgt">
            <div class="btmrgt"><a  href="mailto:enter_emails_of_friends_here?subject=greensmoothie.com  -super health + rawfood info"> <img  src="http://www.greensmoothie.com/test/imgpg/sendsite.gif" alt="Email  this site to a Friend" title="Email this site to a Friend" width="118"  height="23" /></a> </div>
            <div class="last">
                <p class="copy">&copy; copyright 1998-2010, Valerie K. Archer</p>
                <p>&copy; <a  href="http://twitter.com/valarcher" target="_blank">Theme by Val  Archer</a><br />
                    helped by <a  href="http://www.sitepoint.com/forums/" target="_blank">Sitepoint.com  Forums</a> and <a href="http://www.ivycat.com/"  target="_blank">IvyCat.com</a></p>
                <!--CHANGE-->
                <p><a href="#blenders">&#8657;Top&#8657;&nbsp;Blending Raw Foods + Best Blender</a></p>
            </div>
            <!--last-->
        </div>
        <!--footrgt-->
    </div>
    <!--footnav-->
</div>
<!--wrapper-->
</body>
</html>
15

p.s. also tried

#btmnav .navbox ul li.funrow a:visited {color:blue!important}

but it doesn’t hear me…

I wonder if the problem is that the 1st level link is also repeated in one of the dropdown links? e.g.

<li><a href=“<…/water/doctors.php”>Water</a>
<ul class=“row”>
<li>
<ul>
<li><a href=“<…/water/doctors.php”>Reviews of Medical Doctors</a></li>

and after it’s visited, I want it red (#f00251) in the second dropdown link (“Reviews of…”) but blue in the 1st level link (“Water”)

16

Hi Val,

I had to change the structure of the nav and used an h4 heading instead of the strong element to give you your headings. The h4 sits above the nested ul and if it’s not needed you just use the nested list structure for the links as shown in the other menus.

The list now looks like this:


<h3>Fun to Read : <span>Hover Here to Learn a Lot...</span></h3>
<ul>
    <li><a href="../eat/index.html">Eating Raw</a><span>|</span>
        <ul class="row">
            <li>
                <ul>
                    <li><a href="../water/benefits.php">Benefits of Ionizing Your Water</a></li>
                    <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                    <li><a href="../water/alkaline2.php">How to Quench Free Radicals</a></li>
                    <!--            <li><a href="../water/pray.html">Prayer Re-Energizes Water</a></li>-->
                    <li><a href="../water/filter.php">Filter Specs</a></li>
                    <!--            <li><a href="../water/need.html">When Not to Buy Ionizer</a></li>-->
                    <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                    <li><a href="../water/specs.php">Melody + Orion</a></li>
                    <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                    <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                    <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                    <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                    <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                    <li><a href="../water/reverse.php">Reverse Aging</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                    <li><a href="../water/specs.php#coral">Benefits of Coral Calcium</a></li>
                    <li><a href="../water/works.php">How Ionizers Work</a></li>
                    <li><a href="../water/acid.php">Acid Water</a></li>
                    <li><a href="../water/food.php">Oxidizing Food</a></li>
                    <li><a href="../water/food2.php">How ATP Is Made</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="../eat/recipes.html">Recipes</a><span>|</span>
        <ul class="row">
            <li>
                <h4><a href="../eat/recipes.html#">Plant Fats</a></h4>
                <ul>
                    <li><a href="../eat/recipes.html#">Nut + Seed Yogurts</a></li>
                    <li><a href="../eat/recipes.html#">Nut + Seed Milks</a></li>
                    <li><a href="../eat/recipes.html#">Nut Butters</a></li>
                    <li><a href="../eat/recipes.html#">Cashew Date Crunch</a></li>
                    <li><a href="../eat/recipes.html#">Hot Nachos Chips</a></li>
                    <li><a href="../eat/recipes.html#">Chocolate Recipes </a></li>
                </ul>
            </li>
            <li>
                <h4><a href="#">Carbohydrates</a></h4>
                <ul>
                    <li><a href="#">Animal Companions</a></li>
                    <li><a href="#">How to Sprout + Grind Wheat</a></li>
                    <li><a href="#">Pie Crust + homemade SOD</a></li>
                    <li><a href="#">Sprouted Pasta Snacks</a></li>
                    <li><a href="#">Spicy Sprouted Muffins</a></li>
                    <li><a href="#">Fat-Free Desserts</a></li>
                    <li><a href="#">Carrot Cake Crackers</a></li>
                    <li><a href="#">Ginger Oat Cookies</a></li>
                </ul>
            </li>
            <li>
                <h4><a href="#">Proteins</a></h4>
                <ul>
                    <li><a href="#">My High-Nutrient Blend</a></li>
                    <li><a href="#">Quinoa Crunch</a></li>
                    <li><a href="#">Pizza Crackers</a></li>
                    <li><a href="#">Energy Soup</a></li>
                    <li><a href="#">Green Smoothies</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="../index.html">Sprouting</a><span>|</span>
        <ul class="row">
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                    <li><a href="../blend/">test 4</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="../blend/index.html">Blending</a><span>|</span>
        <ul class="row">
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                    <li><a href="../blend/">test 4</a></li>
                    <li><a href="../blend/">test 5</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="../juice/index.html">Juicing</a><span>|</span>
        <ul class="row">
            <li>
                <ul>
                    <li><a href="../juice/">testing 1</a></li>
                    <li><a href="../juice/">testing 2nd link</a></li>
                    <li><a href="../juice/">test 3</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="../juice/dhd/index.html">Dehydrating</a><span>|</span>
        <ul class="row">
            <li>
                <ul>
                    <li><a href="../juice/dhd/">testing 1</a></li>
                    <li><a href="../juice/dhd/">testing 2nd link</a></li>
                    <li><a href="../juice/dhd/">test 3</a></li>
                    <li><a href="../blend/">test 4</a></li>
                    <li><a href="../blend/">test 5</a></li>
                    <li><a href="../blend/">test 6</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../blend/">testing 1</a></li>
                    <li><a href="../blend/">testing 2nd link</a></li>
                    <li><a href="../blend/">test 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="../water/index.html">Water</a>
        <ul class="row">
            <li>
                <ul>
                    <li><a href="../water/benefits.php">Benefits of Ionizing Your Water</a></li>
                    <li><a href="../water/alkaline.php">Why Drink Alkaline Water</a></li>
                    <li><a href="../water/alkaline2.php">How to Quench Free Radicals</a></li>
                    <!--            <li><a href="../water/pray.html">Prayer Re-Energizes Water</a></li>-->
                    <li><a href="../water/filter.php">Filter Specs</a></li>
                    <!--            <li><a href="../water/need.html">When Not to Buy Ionizer</a></li>-->
                    <li><a href="../water/specs3.php">Compare Jupiter Models</a></li>
                    <li><a href="../water/specs.php">Melody + Orion</a></li>
                    <li><a href="../water/compare.php">Compare Jupiter with Others</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../water/osteo.php">Stop Osteoporosis</a></li>
                    <li><a href="../water/heart.php#immune">Strong Immune System</a></li>
                    <li><a href="../water/heart.php#cancer">Prevent Cancer</a></li>
                    <li><a href="../water/heart.php">Reduce High Blood Pressure</a></li>
                    <li><a href="../water/reverse.php#loseweight">Lose Weight</a></li>
                    <li><a href="../water/reverse.php">Reverse Aging</a></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li><a href="../water/fir.php">Far Infrared Energy</a></li>
                    <li><a href="../water/specs.php#coral">Benefits of Coral Calcium</a></li>
                    <li><a href="../water/works.php">How Ionizers Work</a></li>
                    <li><a href="../water/acid.php">Acid Water</a></li>
                    <li><a href="../water/food.php">Oxidizing Food</a></li>
                    <li><a href="../water/food2.php">How ATP Is Made</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>
<div class="navbox rc20 clearfix">

The css is changed as follows:


/*--BTMNAV--*/
#btmnav {
    clear:both; /*leafbtm-lft/rgt*/
    width:100%;
    zoom:1.0;
}
.ebk-sm {
    width:500px;
    text-align:center;
    margin:5px auto 40px;
}
.ebk-sm form {
    text-align:center;
    margin-top:10px
}/*submit width 4 IE6/7 does not work here*/
#btmnav h2 { /*for ebk*/
    padding-bottom: 10px;
    font: bold 1.25em "Comic Sans MS", sans-serif;
    color: #f00251;
    text-align:center;
}
#btmnav h3 { /*for navs*/
    font:bold 1.2em "Comic Sans MS", sans-serif;
    color: #a1b37f;
    padding:8px 0 0 30px;
    margin: -2px 0 11px;
}
#btmnav h3 span {
    font:bold 0.8em Arial, sans-serif;
    color:green;
}
#btmnav h3 a {
    font:0.7em Arial
}
#btmnav h3 a:link {
    color:blue;
    text-decoration:none
}
#btmnav h3 a:visited, #btmnav h3 a:active {
    color:#f00251;
    text-decoration:none
}
#btmnav h3 a:hover {
    background:white;
    color:red;
    text-decoration:none
}
#btmnav ul { /*position of links within boxes*/
    padding:0 30px;
    list-style:none;
    margin:0;
    zoom:1.0;
  [B]  position:relative;[/B]
}
#btmnav li {
    float:left; /*don't clear in .shop*/
    display:inline;
 [B]   /*position:relative;*/[/B]
    font: 0.8em Arial, sans-serif;
    line-height: 1.9em;
}
#btmnav li a {
    white-space:nowrap
}
#btmnav li span {
    position:relative;
    padding:0 6px; /*gives space each side of pipe*/
    top: -2px;
    font-size:0.9em;
    color:green;
}
#btmnav a {
    font-weight:normal
}
#btmnav a:link {
    color:blue;
    text-decoration:none
}
#btmnav a:visited, #btmnav a:active {
    color:#f00251;
    text-decoration:none
}
#btmnav a:hover {
    background:white;
    color:red;
    text-decoration:none
}
.navimg {
    width:24px;
    height:24px;
    float:left
}
.navbox, .truebox {
    background:#f2ffdf;
    zoom:1.0;
    padding:10px 20px 15px 10px;
    margin:0 120px; /*position of box*/
    margin-bottom:20px !important;
}
.truebox p {
    padding:0 10px;
    font:0.9em "Trebuchet MS", sans-serif;
    color: #f00251;
}
.truebox blockquote {
    padding:0
}
.truebox blockquote p {
    padding:0;
    margin:0 0 10px;
    font:italic 0.8em Georgia, serif;
    color:#2e2eff;
    line-height:1.8;
}
/*--DROPDOWNS - code from Paul @ http://www.pmob.co.uk*/
#btmnav .navbox ul li:hover ul, #btmnav .navbox ul li.over ul {
    left:0
}
#btmnav .navdrop {
    position:relative;
    z-index:999
}
#btmnav .navbox ul ul {
 [B]   background:white;[/B]
    position:absolute;
    top:1.6em; /*not too far away or you lose focus*/
    left:-999em;
    padding:0;
   [B] border-bottom:none;[/B]
    text-align:left;
    z-index:99;
}
#btmnav .navbox li li {
    clear:left;
    float:left;
    font-size:100%;
    padding:0;
    position:static;
}
[B]#btmnav .navbox ul li:hover a, #btmnav .navbox ul li.over a {
    background:#e8e8ff;
    color:#f00
}
#btmnav .navbox ul li:hover li a, #btmnav .navbox ul li.over li a {
    background:#fff;
    color:blue
}[/B]
#btmnav .navbox li li a {
    clear:left;
    float:left;
    position:relative;
    width:207px; /*max menu charactrs 28 for 1-line*/
    padding:2px 5px; /*2px is height of each line in popup*/
    white-space:normal;
    line-height:normal;
}
#btmnav .navbox li li a:hover {
  [B]  background:red!important;
    font-weight:bold;
    color:white!important;[/B]
}
#btmnav .navbox ul li ul.row {
    width:680px;
    background:#fff;
   [B] border:1px solid #ccc;
    border-top:5px solid #f00;
    border-bottom:5px solid #f00;
    padding:5px 0;[/B]
}
#btmnav .navbox ul li ul.row li {
    float:left;
  [B]  position:static;[/B]
    clear:none;
 [B]   background:white;
    border:none;[/B]
    width:218px;
    padding:0;
 [B]   margin:0 0 0 7px;
    display:inline[/B]
}
[B]#btmnav .navbox ul li ul.row li li {
    margin:0
}[/B]
[B]#btmnav .navbox ul li h4, #btmnav .navbox ul li h4 a {
    background:#e8e8ff!important;
    color:red;
    text-align:center;
    display:block;
    margin:0;
    font-size:100%;
}[/B]
[B]#btmnav .navbox ul li h4 a {
    border:1px solid #f00;
    padding:2px 4px
}
* html #btmnav .navbox ul h4 a {
    height:1%
}[/B]
#btmnav .navbox ul li ul.row li li {
    clear:left;
    border:none
}
#btmnav .navbox ul li ul.row li ul {
[B]    position:static;[/B]
    clear:left;
    left:0;
    top:0;
    z-index:99;
    width:auto;
}

You can change the colours to suit and make the minor adjustments you need.

17

Hi Val,

If I understand you correctly you want a dropdown like this that has 3 columns for each sub menu and always starts at the left?

What will you do for the entry like “sprouting” where you only have three links. Do you want three columns but only one link in each column or do you want them in one column but starting at the left?

For the menu to work easily there needs to be some uniformity otherwise we will be coding exceptions all the time and in a dropdown that gets awkward.:slight_smile:

18

Hi Paul -

>3 columns for each sub menu and always starts at the left

Yes that’s right :slight_smile:

>the entry like “sprouting” where you only have three links

Actually they all have tons of links, with more added all the time. I just haven’t added them yet. Those 3 links are just test links from your original code.

So there’s no exceptions EXCEPT -

“Recipes” needs a sub-header (the 1st row) on each of the 3 columns and I’d like to apply this sub-header in the html, by using <strong>.

Currently the css is causing the first row in all sub-headers to display differently, whereas I need that 1st row to display the same as all the other rows in dropdown (as in your example) and only display differently if I write <strong> in the html.

thank you! - Val

19

Hi Paul - do you perhaps have time for this now?

Basically I’d like 3 drop-down columns (under each 1st level link) that drop down the same way as your drop-downs (but keeping my width for each column)

AND with the option to have a sub-header at the top of each of the 3 columns by using <strong> with css applying to strong.

thanks million - Val

20

HI Val,

Your pop ups have more levels that the example you showed above. If you hover on recipes then that popup menu has another popup menu. How would that fit into your double column scenario?

It’s quite easy to turn the popup into two columns or more as you would need to use nested lists in the popup and float them across but that would complicate the issue where you have further nested flyouts.

Dropdown/up menus are useful where you have a lot of products on offer but more often than not they are a bit of a hindrance and perhaps a sub page with listed items would be more relevant and easier for the user.:slight_smile: