How do you expand the suckerfish borders?

I am using a suckerfish drop down menu and copied the html codes from their site. I can't figure out how to make the border go to the end of the drop down menu. I made the drop down menu wider but my border line is in the middle of the box.

Also, which code is it that changes the background color of the drop menu? I want it to be purple rather than gray.

Jul 29 '10 #1

Subscribe Post Reply

1534

JKing

1,206

Expert 1GB

Please post the code you are working with. Both the CSS and HTML in question.

Jul 29 '10 #2

Wendy Palmer

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <title>jQuery suckerFish</title>

    <link rel="stylesheet" href="style/standard1.css" type="text/css" media="all" />

    <link rel="stylesheet" href="style/standard2.css" type="text/css" media="all" />

    <link rel="stylesheet" href="style/print-norightcol.css" type="text/css" media="print" />

<script type="text/javascript" src="http://be.twixt.us/jquery/jquery.js"></script>

    <script type="text/javascript">

      $(document).ready(function(){

            $("#nav-one li").hover(

                function(){ $("ul", this).fadeIn("fast"); }, 

                function() { } 

            );

          if (document.all) {

                $("#nav-one li").hoverClass ("sfHover");

            }

      });
 
        $.fn.hoverClass = function(c) {

            return this.each(function(){

                $(this).hover( 

                    function() { $(this).addClass(c);  },

                    function() { $(this).removeClass(c); }

                );

            });

        };      

    </script>

    <style type="text/css">
 
/* Navigation */

.nav, .nav ul { 

    list-style: none;

    margin: 0;

    padding: 0;

}
 
.nav {

  font-family: Arial, Helvetica, sans-serif;

  z-index: 100;

  position: relative;

}

.nav li {

  border-left: 1px solid #000;

  float: left;

  margin: 0;

  padding: 0;

  position: relative;

}

.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {

  font: bold 1.22em/25px Arial, Helvetica, sans-serif;

  background: #565656;

  color: #959595;

  display: block;

  padding: 0 9px;

  text-transform: lowercase;

  text-decoration: none;

}
 
.nav li a:hover {

  background: #ccc;

  color: #000;    
 
}

#nav-one li:hover a, 

#nav-one li.sfHover a {

  background: #ccc;

  color: #000;

}

#nav-one li:hover ul a, 

#nav-one li.sfHover ul a {

  background: #565656;

  color: #959595;    

}

#nav-one li:hover ul a:hover, 

#nav-one li.sfHover ul a:hover {

  background: #ccc;

  color: #000;    

}
 
.nav ul {

  background: #565656;

  border-bottom: 1px solid #000;

  list-style: none;

  margin: 0;

  width: 200px;

  position: absolute;

  top: -999em;

  left: -1px;

}

.nav li:hover ul,

.nav li.sfHover ul {

  top: 25px;

}

.nav ul li {

  border: 0;

  float: none;

}

.nav ul a {

  border: 1px solid #000;

  border-bottom: 0;

  padding-right: 20px;

  width: 100px;

  white-space: nowrap;

}

.nav ul a:hover {

  background: #609;

  color: #000;

}

    </style>

</head>

<body>
 
    <h2>Sample Markup</h2>

    <h4>Sample 1 - One Level</h4>

        <ul id="nav-one" class="nav">

            <li>

                <a href="#item1">Resources</a>

                <ul>

                    <li><a href="#item1.1">Career Planning</a></li>

                    <li><a href="#item1.2">Choosing a Program</a></li>

                    <li><a href="#item1.3">What Can I Do ...</a></li>

                    <li><a href="#item1.4">Summer Job Guide</a></li>

                </ul>

            </li>

            <li>

                <a href="#item2">item 2</a>

                <ul>

                    <li><a href="#item2.1">item 2.1</a></li>

                    <li><a href="#item2.2">item 2.2</a></li>

                </ul>

            </li>

            <li>

                <a href="#item3">item 3</a>

                <ul>

                    <li><a href="#item3.1">item 3.1</a></li>

                    <li><a href="#item3.2">item 3.2</a></li>

                </ul>

            </li>

            <li>

                <a href="#item4">item 4</a>

                <ul>

                    <li><a href="#item4.1">item 4.1</a></li>

                    <li><a href="#item4.2">item 4.2</a></li>

                    <li><a href="#item4.3">item 4.3</a></li>

                </ul>

            </li>

        </ul>
 
    <br clear="all" />
 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">

</script>

<script type="text/javascript">

_uacct = "UA-325840-2";

urchinTracker();

</script>

</body>

</html>

Jul 29 '10 #3

zorgi

431

Expert 256MB

Check all the css width properties and play with them, you have only 2. It should work even if you delete widths but I think suckerfish is mess in Opera without those.

Jul 30 '10 #4

Similar topics

nested div expand vertically

by: dave | last post by:

Sorry this has probably been asked a million times before. I have a nested div and want it to expand vertically to fill its parent div. It does it in IE6 but not Mozilla. Height property...

HTML / CSS

Suckerfish drop-downs over iframe in FireFox

by: Martial Spirit | last post by:

Hello- I was amazed at the suckerfish drop-downs from AListApart.com. They work great except for one thing, if I position the drop-downs over an iframe element, on mouseover the menus disappear....

HTML / CSS

DIV overflow and borders are screwy

by: Wayfarer | last post by:

I'm stumped. Would one of you take a look at the following site and help me with two problems: 1. When zooming in, <div id="banner"> is the *only* block that doesn't "expand" to fit the text &...

HTML / CSS

Values to change in suckerfish menu

by: Richard | last post by:

The style sheet shown below is from the suckerfish vertical menu. http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html I've added in a few minor changes to color code the...

HTML / CSS

htmldog suckerfish liquid

by: timmy | last post by:

Anyone knows if the htmldog suckerfish menu can be done in a more fluid way: http://www.htmldog.com/articles/suckerfish/dropdowns/ Or more precisely, the 2-level menu:...

HTML / CSS

Excel: Check for borders of cells in all workbooks (vb.net)

by: Glen Vermeylen | last post by:

Hi, For a project at school we have to automate the assignment of seats in classrooms to students during the exams. The lady who previously did everything manually kept the layouts of the...

Visual Basic .NET

Suckerfish menu issue

by: j0nharris | last post by:

I'm using the suckerfish vertical menu, & the positioning is working like a charm in every browser except IE6 -- go figure! The menu is sitting on its own page for now on...

HTML / CSS

DIV borders different in IE7 when in td

by: Davo | last post by:

Hello, I've created a table with two columns, the second column is fixed width at 64px and contains a div, the div has a border and contains some text, the text renders to larger than 64px. This...

HTML / CSS

Suckerfish menu creation

by: phpmagesh | last post by:

Can any one guide me how to create sucker fish menu step by step. i seen in Son of Suckerfish Dropdowns | HTML Dog but i cant able to do where to start and where to write which code. can any...

HTML / CSS

xlwt (Borders: Type)

by: nicstel | last post by:

Hello, I'm trying to find documentation about the xlwt (py_excelerator). I want to change the border of some cells. But the only types that I found is: double and dashed. How to do a simple line...

Python

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++