NEED BASIC HELP!

[Anonymous]

This is the link to my website: http://www.365motivators.com

I just want to have the RESOURCES link to be a vertical drop-down menu. I’ll also be adding other links in the future that will be vertical drop-down as well.

Anyway, I’ve generated my CSS code in the Multi-Level Navigation CSS Generator.
Here it is:

#suckerfishnav {
    background:##9ACD32 repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:20px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:99px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:13px;
    color:#fff;
    }
#suckerfishnav li ul ul {
    margin:-22px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:##BF6C06;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#fff;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#fff;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#fff;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#bbb;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:##BF6C06;
    }

I’m not exactly sure where to put the following code:
<?php if (function_exists(‘suckerfish’)) {suckerfish();} ?>

I know it goes in the header.php, but everywhere I put it, my site looks weird.

Do I need to delete my current menu bar with those 3 links: HOME, RESOURCES & CONTACT?

Also, I’m not sure what to do with the MENU CONTENTS and the ADVANCED features of the plugin.

Thanks a gazillion for anyone who can walk me through this!!!

Cheers,
Wes

I can be reached by phone as well, if walking me through this would be easier.
(904) 434-5827

[imported_Ryan]

Yes, you probably need to remove the existing menu. You currently have something like this:
[code:a8yhpf2a]<div id="menu">
<ul>
<li class="emphasis"></li>
<?php suckerfish(); ?>
</li>
</ul>
</div>[/code:a8yhpf2a]

Try changing it to this:
[code:a8yhpf2a]
<?php suckerfish(); ?>
[/code:a8yhpf2a]

[Anonymous]

Hey Ryan!

Okay, I’m getting it slowly but surely.

Check out my site now: http://www.365motivators.com

One problem I’m having is that the link ‘Life Coach’ is supposed to have 4 dropdown links, which are:

1. Meet Yvette
2. FAQs
3. Testimonials
4. Fees

When you’re on these pages, ‘Home’, ‘Resources’ & ‘Contact’ and you hover over the link ‘Life Coach’, the only dropdown menu that appears is ‘Meet Yvette’.

However, when you’re on the page ‘Meet Yvette’ and you hover over the ‘Life Coach’ link, you can see that it’s trying to display all four dropdown links, but two are missing.

Can you walk me through this?

Cheers,
Wes

[365motivators]

Hey Ryan,

I couldn’t get my 4 sub-menus in the link ‘Life Coach’ to drop straight down.  The only sub-menu that would appear was ‘Meet Yvette’.

So until I figure it out (I need help!), I went ahead and made the sub-menus "children" of each other.

Cheers,
Wes

[imported_Ryan]

[quote:3fhsrze3]However, when you’re on the page ‘Meet Yvette’ and you hover over the ‘Life Coach’ link, you can see that it’s trying to display all four dropdown links, but two are missing.[/quote:3fhsrze3]

It seems to be working fine for me in Firefox 3.0.

[imported_Ryan]

[quote:26x8sylh]I couldn’t get my 4 sub-menus in the link ‘Life Coach’ to drop straight down.  The only sub-menu that would appear was ‘Meet Yvette’.

So until I figure it out (I need help!), I went ahead and made the sub-menus "children" of each other.[/quote:26x8sylh]

If you provide me with a link to the problem in action then I’ll take a look.

[365motivators]

I think I’m getting close!  I just don’t know code as well as you do!!!  I’m learning though.

For example, here’s the code for my header.php:

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

<head profile="http://gmpg.org/xfn/11"&gt;
<meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />

<title><?php wp_title(”); ?><?php if(wp_title(”, false)) { echo ‘ |’; } ?> <?php bloginfo(‘name’); ?></title>

<meta name="generator" content="WordPress <?php bloginfo(‘version’); ?>" /> <!– leave this for stats –>

<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(‘name’); ?> RSS Feed" href="<?php bloginfo(‘rss2_url’); ?>" />
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />

<!–we need this for plugins–>
<?php wp_head(); ?>
</head>
<body>

<div id="container">

<div id="header">

<h2><a href="<?php echo get_settings(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h2>
<h3><?php bloginfo(‘description’); ?></h3>

</div>
<?php if (function_exists(‘suckerfish’)) {suckerfish();} ?>

<!–header.php end–>

Where the code, <?php if (function_exists(‘suckerfish’)) {suckerfish();} ?>, is at right now, I still have the problem with only 1 of the 4 dropdowns appearing.

BUT, if I move the code up and put it between these two bits of code,

<div id="container">
(right here)
<div id="header">

THEN, all 4 dropdowns appear, but the menu bar is now in the middle of my header graphic.

I’m getting close!

Cheers,
Wes

[365motivators]

I fixed it in an unorthodox way…

In the style.css, I took this code:

#content {
display: block;
background: #ffffff;
width: 550px;
margin-top: 90px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 30px;
float: left;
position:relative;
padding: 0px;
}

…and changed the margin-top from 20px to 90px, so I basically dropped the content down.

Is there a reason why the dropdown menus wouldn’t just appear OVER the content?

Cheers,
Wes

[imported_Ryan]

It’s probably a z-index issue. Without seeing the code in action it is awkward to tell.

[365motivators]

Is there something you could tell me to look for?

[imported_Ryan]

Not really. The content which is laying on top of the dropdown probably has a z-index issue. That’s just a guess though. Without seeing the problem it is difficult to bug-fix.

These problems only take me a couple of minutes to correct usually, but they take a lot longer without seeing the code in action. If you want a quick solution then just post a link to a page demonstrating the problem.

I often get requests for tutorials on how to fix a lot of these issues. But the problem is that almost every problem is unique. It’s difficult to provide instructions on how to fix generic problems like this as I’d effectively be writing instructions on how to do basic CSS coding, but there are a bazillion other lessons out there on that topic. Google is a better tutor than I am.

[Author]

Posts