|
CSS - Suckerfish Dropdown Menu Remote Server Problem
Hi
I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules)) thanks a lot Similar TutorialsI'm working on my first suckerfish dropdown for a site. I'm encountering two problems. 1) There is no background color on the subitems when i select the main item, making them hard to read 2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">
<style title="text/css">
#container {
width: 562px;
background: #F4ECD9;
text-align: left;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 562px;
list-style: none;
line-height: 1;
background: EAE3A3;
font-weight: bold;
padding: 0;
margin: 0 0 1em 0;
}
#nav a {
display: inline;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: right;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: white;
}
</style>
<script type="text/javascript">
sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="20" width="562" class="leftnav">
<div id="container">
<ul id="nav">
<li><a href="#">SIDING</a></li>
<li><a href="#">GUTTERS</a></li>
<li><a href="#">BASEMENTS</a></li>
<li><a href="#">WINDOWS</a>
<ul>
<li><a href="#">300 Series</a></li>
<li><a href="#">900 Series</a></li>
<li><a href="#">Sliding</a></li>
<li><a href="#">Bay and Bow</a></li>
</ul>
</li>
<li><a href="#">DOORS</a>
<ul>
<li><a href="#">Entry</a></li>
<li><a href="#">Patio</a></li>
<li><a href="#">Garage</a></li>
</ul>
</li>
</ul>
</div></td>
<td class="rightnav">
<div id=linkstyles> <a href="#">HOME</a> <a href="#">CONTACT US</a>
</div></td></tr>
<tr>
<td>
<table width="562" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/mainimage.jpg"></td>
</tr>
<tr>
<td><div align="center"><img src="images/whychoose.jpg"></div></td>
</tr>
<tr><td>
<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
<tr>
<td width="50%">REPUTATION: A proven track record with thousands of
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with
professionalism and respect.
</td>
<td width="355"> </td>
</tr>
</table>
</td></tr>
</table>
</td>
<td valign="top" width="100%" class="mainrighttable">
<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
<tr>
<td>Our business has always been family owned
and operated. For more than 27 years, we
have served our community with pride and
integrity. Years ago, the best craftsmen always
put their names on their work.
<br><br>
We still do.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<span class="style1"></span></td>
</tr>
</table>
</body>
</html>
Thanks for your help I'm modifying the Suckerfish dropdown menu, and while it looks perfect in FF, it's slightly off in IE (shocker, I know). In IE, the top-level menu items don't conform to the 20px height I've been using as a standard when you hover above them. I've done a ton of fiddling to see if I can solve the problem, but can't get it. I'm willing to bet the answer is simple, and that someone will catch something I missed. The menu is being developed at: http://ts.bisonman.com/dropdown_test.php And here's the code: Code: <style type="text/css">
body {
font-family: arial, helvetica, serif;
}
div.navbar {
width: 780px;
height: 20px;
background: #6699CC;
}
ul { /* all lists */
height:20;
padding: 0px;
margin: 0;
list-style: none;
white-space: nowrap;
}
li { /* all list items */
float: left;
position: relative;
width: 110px;
height: 20px;
background: #6699CC;
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
width: 180px;
white-space: nowrap;
background: #FFFFFF;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
height: 20px;
}
li:hover a, li.over a { /* maintains block and border width */
display: block;
height: 20px;
white-space: nowrap;
}
li:hover ul a, li.over ul a { /* creates border around dropdown menus */
width: 180px;
height: 20px;
/* border-style: solid;
border-width: 1px;
border-color: #FFFFFF; */
white-space: nowrap;
}
#content {
clear: left;
}
a {
text-decoration: none;
color: #FFFFFF;
height: 20px;
}
a.under {
width: 160px;
height: 20px;
background: #6699CC;
color: #FFFFFF;
}
a:hover {
background: #FFFFFF;
color: #6699CC;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<!-- <div class="navbar"> -->
<table width=780 bgcolor=#6699CC border=0 height=20 cellpadding=0 cellspacing=0>
<tr>
<td valign=top width=20 NOWRAP height=20> </td>
<td valign=bottom NOWRAP height=20>
<ul id="nav">
<li><a href="/index.php?page=about">About</a>
<ul>
<li><a class="under" href="/index.php?page=faculty">Faculty</a></li>
<li><a class="under" href="/index.php?page=about&subject=history">History</a></li>
<li><a class="under" href="/index.php?page=about&subject=alumni">Alumni</a></li>
<li><a class="under" href="/index.php?page=about&subject=philosophy">Philosophy</a></li>
<li><a class="under" href="/index.php?page=about&subject=advisory_board">Advisory Board</a></li>
<li><a class="under" href="/index.php?page=about&subject=letter_from_terry">Message from Terry</a></li>
</ul>
</li>
<li><a href="/index.php?page=classes">Classes</a>
<ul>
<li><a class="under" href="/index.php?page=classes&subject=scenestudy">Ongoing Scene Study</a></li>
<li><a class="under" href="/index.php?page=classes&subject=beginning">Beginning Technique</a></li>
<li><a class="under" href="/index.php?page=classes&subject=on_camera_1">On Camera</a></li>
<li><a class="under" href="/index.php?page=classes&subject=body_dynamics">Body Dynamics</a></li>
<li><a class="under" href="/index.php?page=classes&subject=vocal_production">Vocal Production</a></li>
<li><a class="under" href="/index.php?page=classes&subject=specialty">Specialty Classes</a></li>
<li><a class="under" href="/index.php?page=classes&subject=conservatory">Conservatory/Intensive</a></li>
</ul>
</li>
<li><a href="/index.php?page=theater">Theater</a>
<ul>
<li><a class="under" href="/index.php?page=theater&subject=on_stage_now">On Stage Now</a></li>
<li><a class="under" href="/index.php?page=theater&subject=current_season">Current Season</a></li>
<li><a class="under" href="/index.php?page=theater&subject=past_seasons">Past Seasons</a></li>
<li><a class="under" href="/index.php?page=theater&subject=past_reviews">Past Reviews</a></li>
<li><a class="under" href="/index.php?page=theater&subject=auditions">Auditions</a></li>
<li><a class="under" href="/index.php?page=theater&subject=tickets">Tickets</a></li>
</ul>
</li>
<li><a href="/index.php?page=awards">Awards</a>
<ul>
<li><a class="under" href="/index.php?page=theater&subject=past_reviews">Reviews</a></li>
<li><a class="under" href="/index.php?page=awards&subject=mayors_award">Mayor's Award</a></li>
<li><a class="under" href="/index.php?page=awards&subject=gore_letter">Al Gore Letter</a></li>
<li><a class="under" href="/index.php?page=awards&subject=mekler_book">Terry in Mekler</a></li>
<li><a class="under" href="/index.php?page=awards&subject=50_best">50 Best</a></li>
</ul>
</li>
<li><a href="/index.php?page=events">Events</a>
<ul>
<li><a class="under" href="/index.php?page=events&subject=achievements">Achievement Awards</a></li>
<li><a class="under" href="/index.php?page=events&subject=celebrities">Celebrities</a></li>
<li><a class="under" href="/index.php?page=events&subject=conversations">"Conversations with..."</a></li>
</ul>
</li>
<li><a href="/index.php?page=membership">Members</a>
<ul>
<li><a class="under" href="/index.php?page=membership&subject=donate">Donations</a></li>
<li><a class="under" href="/index.php?page=membership&subject=subscriptions">Subscriptions</a></li>
<li><a class="under" href="/index.php?page=membership&subject=club_members">Club Members</a></li>
</ul>
</li>
<!-- <li><a href="/index.php?page=contact">Contact</a></li>
<li><a href="/index.php">Home</a></li> -->
</ul>
</td>
</tr>
</table>
<!-- </div> -->
</BODY>
</HTML>
http://www.strutmag.com/menu06/ CSS In IE:Win The dropdown does not drop down right below the black tab, as it should; it starts to drop down about halfway through the tab. This is my first time really customizing a Suckerfish menu and I'm not really sure how I would go about tackling this problem. Thanks for any help or suggestions! http://www.describe.org/homework/esdcar http://www.describe.org/homework/esdcar/esdcar.css Three things: One is that in FF, etc, the dropdown for the single level labels (about, events) as opposed to the doubledecker ones (buyers) start too high -- not at the bottom of the box. I've tried playing with padding, height, margins...I must not have hit on the right combo yet, but I can't get it right. The second, though minor, is why there's a tiny crack that appears between one set of boxes (which set changes). I tried bumping up the width on one box by a tenth but that just caused the whole menubar to wrap down to a second line. The third is that the javascript doesn't work on IE. I copied it straight from the suckerfish/html dog tutorial and substituted the appropriate div name, but it's not working. (I haven't tried fixing anything else in IE yet, so it all looks bad...but the js should work.) late edit: I forgot to say that if I could, I'd like the single-level labels to be centered vertically, too, instead of up at the top... I've researched and tried just about every variation. The issue is in IE6. I have a CSS dropdown menu based on the suckerfish dropdown. But in my case, the main nav bar uses images (backgrounds) and the dropdowns are text. In IE6, the menu displays -- but disappears when you go to mouseover one of the sub-items. BUT, if you quickly mouse down past the first sub-item -- it will stay and work correctly. Very odd. Here's my HTML: Code: <ul id="navLeft"> <li id="home"><a class="topNav" href="/" title="Home">Home</a></li> <li id="services"><a class="topNav" href="#" title="Services">Services</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li id="about"><a class="topNav" href="/about-us/" title="About Us">About Us</a> <ul> <li><a href="#">Link</a></li> </ul> </li> <li id="resources"><a class="topNav" href="/resources/" title="Resources">Resources</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li id="contact"><a class="topNav" href="/contact-us/" title="Contact Us">Contact Us</a> <ul> <li><a href="#">Link</a></li> </ul> </li> </ul> And here's my CSS: Code: #navLeft {
width: 659px;
height: 62px;
float: left;
list-style-type: none;
margin: 0;
padding: 0
}
#navLeft li {
position: relative;
float: left;
}
#navLeft li a.topNav {
display: block;
padding-top: 62px;
height: 0;
overflow: hidden
}
#navLeft li#home { background-image: url("images/nav_home_bt.png"); background-repeat: no-repeat; width: 110px }
#navLeft li#home a.topNav:hover { background-image: url("images/nav_home_sbt.png"); background-repeat: no-repeat }
#navLeft li#services { background-image: url("images/nav_services_bt.png"); background-repeat: no-repeat; width: 130px }
#navLeft li#services a.topNav:hover { background-image: url("images/nav_services_sbt.png"); background-repeat: no-repeat }
#navLeft li#about { background-image: url("images/nav_about_bt.png"); background-repeat: no-repeat; width: 127px }
#navLeft li#about a.topNav:hover { background-image: url("images/nav_about_sbt.png"); background-repeat: no-repeat }
#navLeft li#resources { background-image: url("images/nav_resources_bt.png"); background-repeat: no-repeat; width: 144px }
#navLeft li#resources a.topNav:hover { background-image: url("images/nav_resources_sbt.png"); background-repeat: no-repeat }
#navLeft li#contact { background-image: url("images/nav_contact_bt.png"); background-repeat: no-repeat; width: 148px }
#navLeft li#contact a.topNav:hover { background-image: url("images/nav_contact_sbt.png"); background-repeat: no-repeat }
#navLeft li ul {
position: absolute;
top: -9999px
}
#navLeft li:hover ul, #navLeft li.over ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
top: 58px;
left: -35px;
width: 200px;
border-right: 3px solid #f6a6b3;
border-bottom: 3px solid #f6a6b3;
border-left: 3px solid #f6a6b3;
z-index: 9999
}
#navLeft li li {
float: none
}
#navLeft li li a {
color: #948b5f;
background-color: #fff;
font-size: 14px;
font-family: "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
padding: 8px;
width: 184px;
border-top: 1px dashed #d2cdb2
}
#navLeft li li a:hover {
color: #fff;
background-color: #aece7b
}
Any help would be greatly appreciated. I'm stumped. Problem solved. Hiyas, I am a bit of a CSS noob, and I am having some problems so I thought I would post here and see if anyone could help me. I was given some code by a friend the other day to make a drop-down menu that comes down from a jpg-based button. Everything seemed to work, until I tried to make more than 1 menu. Here is my friend's website that uses the code - she can have 3 menus without anything glitching: www.hollyhostile.com The menu is controlled by a javascript file, I have been told this is CSS based but it may indeed be java, so sorry if this is in the wrong place. Her js menu file looks kind of like this: Code: //Contents for menu 1 var menu1=new Array() menu1[0]='<a href="http://www.hollyhostile.com/about.html">About Me</a>' menu1[1]='<a href="http://www.hollyhostile.com/faq.html">FAQ</a>' menu1[2]='<a href="http://www.hollyhostile.com/references.html">References</a>' menu1[3]='<a href="http://www.hollyhostile.com/pricing.html">Pricing</a>' //Contents for menu 2, var menu2=new Array() menu2[0]='<a href="http://www.hollyhostile.com/forum">Forum</a>' menu2[1]='<a href="http://www.hollyhostile.com/guestbook/">Guestbook</a>' menu2[2]='<a href="http://www.hollyhostile.com/blog/">Blog</a>' menu2[3]='<a href="http://www.youtube.com/hollyhostile">Tutorials</a>' Then she has this in her index.html file: Code: <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_05.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://www.hollyhostile.com/portfolio.html"><img src="holly_files/purple_06.jpg" alt="" width="65" height="23"></a></td> <td> <a href="http://hollyhostile.com/default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '100px')" onMouseOut="delayhidemenu()"> <img src="holly_files/purple_07.jpg" alt="" width="88" height="23"></a></td> However, when I try to use this on my own design, it will only show menu1, and this displays over random buttons, not in a succession. It's very very strange. Here is an example of the kind of thing I want to do: www.gothique-noir.com/asylum Each button apart from "Home" should drop down into a menu, but for some reason it won't let me do different menus. If anyone can help me that would be hugely appreciated I have dropdown menus completly made of UL lists within UL lists. And i control them with css to show and hide them using :hover. Example: div#navDiv li:hover ul {display:block; z-index:11;} well this works completly fine in Mozilla. But i recently encountered a problem in mozilla. Below the dropdown menu's when I put a <div> and when i add the value overflow:auto; it breaks the menu. The menu still works, but when im hovering over the dropdown UL that goes over this <div> with the scrollbar it will disappear right when i get over the <div> below it. But the UL dropdown menu will not disappear if i just remove that one css property "overflow:auto" is there any way to fix this in mozilla? It works fine in IE. Hello, I am working on a website and this website got a dropdown menu and this menu works fine! But when I want to make a submenu in the dropdown, it will not work correctly. The submenu is not placed in a new row, it is placed in the main dropdown menu. The next picture shows the problem: "Test" has to be a submenu from "Wie zijn we?", but it is placed just under it. URL I have used the next HTML-Code: Code: <!-- Navigation item -->
<ul>
<li><a href="#">Almelo Sociaal<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="aswiezijnwe.html"target="iframe">Wie zijn we?</a>
<ul><li><a href="aswiezijnwe.html"target="iframe">test?</a></li></ul></li>
<li><a href="aswatdoenwe.html"target="iframe">Wat doen we?</a></li>
<li><a href="asbestuur.html"target="iframe">Organisatie</a></li>
<li><a href="asnieuws.html"target="iframe">Nieuws</a></li>
<li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
<li><a href="asafspraken.html"target="iframe">Afsprakenlijst</a></li>
</ul>
And I have used the next CSS-Code: Code: /*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none; !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(235,235,235);}
.nav2 ul li ul {display:none; border:none;}
/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(228,22,34); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(175,175,175); text-decoration:none;} /*Color subcells hovering mode*/
/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/
Can someone help me to fix the submenu in the dropdown menu? I think myself it is a problem in the CSS. Maybe something has to be added there, but I don't know what Hi there, While this menu works in IE and FF, there's still a little problem with it working perfectly in FF. Basically, it's when you want to mouse over and get the second dropdown option...it only shows part of the button. I'm almost positive this has to do with it not "escaping" the container I have set for the whole design, as the menu option stops right at the border/width of the parent container. For instance, if you go here (with FireFox), and then select from the right side menu: Homes for Sale > Fort Collins, CO > Homestead You'll notice that it only says "Homest" when you want to view the second dropdown option. I need it to show the whole name. I tried setting the z-index higher for these particular classes, but no dice. Is there something I'm missing? Here's the code: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
z-index: 900;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Thanks in advance. I'm trying to create a css only drop-down menu like the ones in html. Here is my code for trying to do so. /* setting dealing with selecting particular guest book entries */ Code: #menuSelectGuestEntries
{
position: relative;
margin-top: 10px;
padding-left: 466px;
}
#menuSelectGuestEntries form
{
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.12em;
}
#menuSelectGuestEntries .guestBookPages{
visibility:hidden;
}
#menuSelectGuestEntries .guestBookPages:hover{
visibility:visible;
}
#selectGuestBookEntries {
border: solid 1px grey;
background-color: white;
padding-right; 5px;
width: 70px;
font-size: 13px;
height: 16px;
overflow: auto;
}
#menuSelectGuestEntries ul.guestBookPages {
position: absolute;
color: black;
background-color: white;
font-size: 20px;
top: 1px;
left: 517px;
list-style-type: none;
padding-left:0;
padding-right: 0;
margin-left: 0;
width: 66px;
border: solid 1px grey;
border-top: none;
}
ul.guestBookPages a {
display: block;
text-decoration: none;
width: 70px;
zoom: 1;
}
ul.guestBookPages a:hover {
background-color: #104E8B;
font-weight: bold;
width: 66px;
}
html code
<div id="menuSelectGuestEntries">
<form action="">
Page: <a href=""><</a>
<span name="selectGuestBookEntries" id="selectGuestBookEntries">
1 of 212 <img src="images/dropDownBox.jpg" width="12" height="13"/></span>
<a href="">></a>
<ul class="guestBookPages">
<li><a href="">1 of 212</a></li>
<li><a href="">2 of 212</a></li>
<li><a href="">3 of 212</a></li>
<li><a href="">4 of 212</a></li>
<li><a href="">5 of 212</a></li>
</ul>
</form>
</div>
What I've tried to do is make the form with id Code: #menuSelectGuestEntries relative positioned is it looks like the first option of a drop-down menu. Then what I was hoping for was to have the drop-down list named Code: #menuSelectGuestEntries absolutely positioned so when someone hovered over the span with id Code: selectGuestBookEntries which contains the first entry all the entries in list Code: guestBookPages would become visible. I'm trying to avoid the Javascript methods of doing this if possible, not a big fan. Any ideas of code I could use in the above scenario to make the listing in the id Code: guestBookPages visible using the hover tag somewhere? Any help greatly appreciated. The visibility option is not working at moment, probably incorrect. Hello everyone! I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents "my" current code, with placeholder colors, text, links etc.: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style type="text/css">
/* background */
body {
background-color: #252525;}
/* targeted dropdown button style */
.dd-select {font: 10.5px Verdana; text-transform: uppercase;}
.dd-select a:link {color: #ff0000; text-decoration: none;}
.dd-select a:hover {color: #ffea00;}
/* positioning */
ul.Menu ul{display:none}
ul.Menu li:hover>ul{display:block}
ul.Menu ul{position: absolute; left:-1px; top:98%;}
ul.Menu li:hover{position:relative;}
/* shrink to fit */
ul.Menu {
float: left;}
/* dropdown button */
ul.Menu {
margin:0px;
list-style:none;
padding:0px;}
/* menu case */
ul.Menu ul {
margin:0px;
list-style:none;
padding:0px;
background-color:#5c5c5c;
border-color:#a3a3a3;
border-width:1px;
border-style:solid;}
/* menu element padding */
ul.Menu li{
margin:5px 5px 5px 5px;}
/* menu element */
ul.Menu a {
display:block;
background-color:#454545;
text-align:left;
padding:4px 9px 5px 9px;
font:normal 11.5px Verdana;
color: #f7f7f7;
text-decoration:none;}
/* menu hover */
ul.Menu li:hover>a{
background-color:#333333;
color: #00ff60;}
</style>
</head>
<body>
<ul class="Menu">
<li><a href="#" target="_top">Select</a>
<ul>
<li><a href="#" target="_top">Option 1</a></li>
<li><a href="#" target="_top">Option 2</a></li>
<li><a href="#" target="_top">Option 3</a></li>
</ul>
</li>
</ul>
<p> </p>
<p> </p>
<p class="dd-select"><a href="#">Select (as it should look)</a></p>
</body>
</html>
Now my problem is, I would like the dropdown menu's trigger button (labeled "Select") to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look. Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help! Kind regards, Jakob Hi all- My first post here, and I'm hoping someone here can help me out. I'm beginning to build a client site, and I've got an elusive problem with my multiple-tier CSS dropdown menu not vertically spacing its <li> elements correctly in IE7. The problem doesn't seem to happen in IE6, or Mozilla browsers. This menu began its life as a Project Seven "PopMenu Magic" menu, but I've modified it quite a bit with hand-coding. Other that this small problem in IE7, I'm happy with its look and it's functioning as intended. What's further complicating my troubleshooting is that the problem only happens on second-level pages of my site, but not on the homepage. All of the pages use the same "included" CSS and navigation code (I'm building the site in ExpressionEngine and am embedding the navigation in a manner similar to a PHP include). All CSS and xHTML validates, and I'm at wit's end. Links NOTE: The blocked "URL" in all of these following links is to be replaced with "falmouth academy dot org" . I guess because I'm new the forum thinks i'm a spammer. The vertical dropdown menu listings SHOULD be spaced as seen here URL /index.php The spacing problem reveals itself he URL /index.php/about/introduction The code that should be controlling the vertical spacing is found in this css file: URL /index.php?css=home/stylesheet.v.1212113978 And the specific code segment in that file is: #p7PMnav li ul li a { /* second tier navigation */ color : #ffffff; height : 14px; padding : 4px; } I'm not sure, but it appears that in IE7, only the first item in the list is getting the height and padding attributes applied. The color, however, is applied to all elements as it should. Very puzzling. Hopefully this explanation is clear, but the problem is still as clear as mud. Any help is appreciated - I'm not a CSS guru, and I'm hoping there's something I'm overlooking. So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate! I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . . See the page in question: hire.karenjeane.com/web/site2.php Thanks for any help! Hi, q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered? Code:
#headlinks2 {
height:25px;
}
#headlinks2 a {
color:green;
display: block;
text-decoration:none;
width: 100px;
font-size:13pt;
padding-right:5px;
//margin-left:205px;
}
#headlinks2 a:hover {
color: white;
}
#headlinks2, #headlinks2 ul {
padding: 0;
margin: 0;
list-style: none;
}
#headlinks2 li {
float: left;
width: 100px;
}
#headlinks2 li ul {
position: absolute;
width: 100px;
left: -999em;
}
#headlinks2 li:hover ul {
left: auto;
}
#headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
//html
<div id="headlinks2">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>
</ul>
</li>
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>
</ul>
</li>
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<!-- etc. -->
</div>
I've messed with this for a couple days now. I can't seem to get it to do what I need it to. Any help would be much appreciated I need to add a 3rd column to the menu My code between the body and /body tags I marked the place I need the 3rd column with: *** ( Need to add a 3rd column for the filters ) *** Code: <ul id="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Maps</a> </li> <li><a href="history.php">History</a> </li> <li><a href="#">Contractors We Recommend</a> </li> <li><a href="#">Products We Recommend</a> <ul> <li><a href="#">Pool Accessories</a> <ul> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> </ul> </li> <li><a href="#">Pool Chemicals</a> <ul> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> </ul> </li> <li><a href="#">Pool Filters</a> <ul> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> </ul> </li> *** ( Need to add a 3rd column for the filters ) *** <li><a href="#">Pool Heaters</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <li><a href="#">Pool Motors</a> <ul> <li><a href="#">Pool Motors</a></li> </ul> </li> <li><a href="#">Pool Sweeps</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <div id="content"> </div> Thanks for any help! Hi I hope this is going to be a simple question!! I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page. The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm cheers Wistar I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6: 1. The menu is sitting lower in IE than in FF. 2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere. Here's the url: menu Please help. Thanks. Brad |
|||||||