|
CSS - Rollover Effect With A Javascript Submenu
I am having trouble getting the widths to work right. I got this code off the site and I am not sure what all it does. There are about 4 or 5 places that you can adjust the width. Can some one check out the CSS below and let me know what all it does.
Code: body
{
margin:50px;
background-color:#ffffff;
font:13px Arial;
}
#nav, #nav ul
{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
}
/* now lets get rid of position:relative for IE */
* #nav, * #nav ul
{
padding: 0;
margin: 0;
list-style: none;
}
#nav a
{
width: 82px;
display: block;
color: black;
text-decoration: none;
background-color: white;
border: 1px solid #000000;
padding: 5px;
font:12px verdana bold; /* N6 needs this to cascasde the font style */
background:url(menubg.jpg) no-repeat 0px 0px;
text-align: center;
}
/* BMH for IE 5 */
* html #nav a
{
width: 95px;
w\idth: 95px;
}
#nav li
{
float: left;
width: 90px; /* width of the individual bars */
position: relative;
}
#nav li ul
{
position: absolute;
left: -999em;
width: 95px;
}
#nav li a:hover
{
color: #FFFFFF;
background-color: #B40820;
background:url(menubg.jpg) no-repeat 0px -40px;
}
#nav li:hover ul, #nav li.sfhover ul
{
left: auto ;
}
#nav ul
{
text-align: center;
display: block;
}
Here is the site (Test Menu) it is on currently. I want to make it centered in the table any ideas? Pretty much I am a newbie to CSS and JS and I was hoping someone could outline the CSS a little better and let me know what it does. Thanks James Similar TutorialsMy current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect. What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change. So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result. Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it. Code:
body#home a#home,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background: url(images/02.png) no-repeat;
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.cssnav
{
position: relative;
font-family: BrowalliaUPC;
font-size: 25px;
background: url(images/02.png) no-repeat;
white-space: nowrap;
display: block;
width: 100;
height: 30;
margin: 0;
padding: 0;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 25px;
width: 211px;
height: 44px;
display: block;
float: left;
color: white;
text-decoration: none;
}
.cssnav img
{
width: 100px;
height: 30px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: -1px;
top: -1px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 100px;
}
</style>
<title>Untitled Document</title>
</head>
<body id="home">
<div class="cssnav">
<a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" />
<center>
<span>Home</span>
</center></a></div>
</body>
</html>
Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left. thanks in advance. as you can see on: Click Me when you hover over the links on the menu the height of the box changes since it is set to auto, is there a fix so it doesn't move? i know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button Hi all, I'm sure this is an easy fix, but I can't get it. I have a javascript rollover image swap, and can only get it to validate if I don't use the border="0" attribute. The site is to be pure css, but the course requires me to use some javascript to show understanding. So it works fine, but showing a blue border in ie, and a red border in mozilla. My question is, if you can help, how to hide/get rid of the border, and have validate at the same time. Cheers Solar. html link http://darkspeed.atspace.com/Javascript.htm css link http://darkspeed.atspace.com/speedstyle.css the div is #roll, hope this makes sense.. thanks. And if I'm doing it all wrong any advice would be appreciated.. Thanks again. Hello all, Working on this page: http://gatehouse.graffetto.com/rollover.html When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div. Any ideas how to rig this up for IE? Here's the simple version of the code: Code: <div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';"> <div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div> <div class="storyByline">1/7/07 - By Max Bowen</div> <div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div> </div> any help would be great, thanks! Hi people. Have been trying to get this CSS Nav (for weeks) to when the user MouseOvers the 'link', a 'SubMenu' pops out with several (3) menus (links). Have got nowhere!! Any help would be greatly appreciated! Heres the main code so far.: Code: <style>
.buttonscontainer {width: 135px;}
.buttons a {color: #FFFFFF;
background-color: #6699CC;
padding: 2px;
padding-left: 3px;
display: block;
border-left: 10px solid #000000;
font: 11px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;}
.buttons a:hover {border-left: 10px solid #6699CC;
text-decoration: none;
background-color: #000000;}
</style>
<div class="buttonscontainer">
<div class="buttons">
<a href="#" onMouseOver="window.status='Jedburgh Gallary'; return true" onMouseOut="window.status=' '"; return true";>Jedburgh</a>
</div>
</div>
Thank alot people. Jackson Hi, I am working on a submenu: <ul class="subuls"> ... How do I make "CANADA" to be positioned under "USA" ? Code:
<style type="text/css">
#topNav{ background-color:#CCCC99;
height:33px;
margin:0px;
}
#topNav li{
height:33px;
list-style: none;
float: left;
position: relative;
z-index: 1000;
padding: 0;
margin: 0;
}
#topNav li.topNavSep{
height:33px;
background-color:#FF0000;
width:1px;
}
#topNav li ul.subuls {
/*
display: none;
*/
width:126px;
position: absolute;
top: 33px;
left:0px;
margin: 0;
padding: 0;
border: 1px solid #0D458A;
}
#topNav li:hover ul, li.over ul { /* lists nested items */
display: block;
}
</style>
</head><body>
<div id="topNav">
<li class="topNavTitle"> <a href="" >Home</a> </li>
<li class="topNavSep"></li>
<li class="topNavTitle"> <a href="" >FAQ</a>
<ul class="subuls">
<li><a href="">USA</a></li>
<li><a href="">CANADA</a></li>
</ul>
</li>
<li class="topNavSep"></li>
<li class="topNavTitle"> <a href="" >Contact</a> </li>
</div>
Hello, I have tried to design a vertical menu with sub-menu's popping out to the right. I have used this onMouseOver and onMouseout events. Here is the html for the menu Code: <div id="menu">
<ul>
<li><a href="#">About Swamiji</a></li>
<li id="m1" onMouseOver="showsub('m1')" onMouseOut="hidesub('m1')">
Ashramams
<ul>
<li class="hide"><a href="#"> > ashramam@dowaleshwaram</a></li>
<li class="hide"><a href="#"> > ashramam@hyderabad</a></li>
<li class="hide"><a href="#"> > ashramam@vishakapatnam</a></li>
</ul>
</li>
<li><a href="#">Temples</a></li>
<li id="m2" onMouseOver="showsub('m2')" onMouseOut="hidesub('m2')">
Wings of Organization
<ul>
<li class="hide"><a href="#"> > Satsang Groups</a></li>
<li class="hide"><a href="#"> > Mathru Mandali</a></li>
<li class="hide"><a href="#"> > Youth Wing</a></li>
<li class="hide"><a href="#"> > Seva Samithi</a></li>
</ul>
</li>
<li><a href="#">Articles</a></li>
<li><a href="#">Swamiji's Monthly letter</a></li>
<li><a href="#">Photo Gallery</a></li>
<li id="m3" onMouseOver="showsub('m3')" onMouseOut="hidesub('m3')">
Store
<ul>
<li class="hide"><a href="#"> > Books [in Telugu]</a></li>
<li class="hide"><a href="#"> > Books [in English]</a></li>
<li class="hide"><a href="#"> > Audio CD's</a></li>
<li class="hide"><a href="#"> > Video CS's</a></li>
</ul>
</li>
<li><a href="#">Swamiji's Darshan Timings</a></li>
<li id="m4" onMouseOver="showsub('m4')" onMouseOut="hidesub('m4')">
Giridhari [Monthly Magazine]
<ul>
<li class="hide"><a href="#"> > Subscribe</a></li>
<li class="hide"><a href="#"> > Read Sample Magazines</a></li>
</ul>
</li>
<li><a href="#">Swamiji's Itinerary</a></li>
<li><a href="#">Programmes</a></li>
<li><a href="#">Donations</a></li>
</ul>
</div>
Here is the css for the menu Code: div#menu{
background-color:#ffcccc;
border-top:thin red solid;
border-bottom:thin red solid;
clear:left;
display:block;
width:100%;
float:left;
font:bold .75em helvetica;
}
div#menu ul{
padding:0;
margin:0;
list-style-type:none;
}
div#menu a{
margin:0;
text-decoration:none;
}
div#menu li{
border:1px #cfc solid;
background-color:#ffcccc;
position:relative;
}
div#menu ul * li{
background-color:#ff6666;
}
div#menu a:hover{
background-color:#ffffcc;
}
Here are the javascript functions for showing and hiding the sub-menu's Code: function showsub(elm)
{
menumain=document.getElementById(elm);
subm=menumain.getElementsByTagName("li");
for (i=0;i<subm.length;i++)
{
subm[i].className='show';
}
}
function hidesub(elm)
{
menumain=document.getElementById(elm);
subm=menumain.getElementsByTagName("li");
for (i=0;i<subm.length;i++)
{
subm[i].className='hide';
}
}
Here is the css only for hiding .hide{ visibility:hidden; display:none; } With this css for showing .show{ visibility:visible; display:block; } , I am getting this menu1. With this css for showing .show{ visibility:visible; display:block; position:absolute; top:0; width:100%; margin:0 0 0 100%; } I am getting the menu as in menu2 image. I would like the sub-menu to pop out as in menu2 image without blank space that is appearing at the bottom of the main menu item. If I am not wrong , problem is setting the position of the sub-menu which is a css issue. What should I do to get it right? Thank you. Okay, I have a navigation and one link, "SERVICES" has a sub-menu. The submenu looks good in Firefox, Safari, and Netscape for the Mac. Also Firefox for the PC, but not IE7 for the PC. Here's the site: http://www.caillouette.com/Villere_dynamic2/rentals.php Please rollover, "SERVICES" in IE. Here's the style sheet (*note: I created it Dreamweaver using Spry. I am only including the code of interest) Code:
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF; /*text color*/
padding: 0px 0 0 12px;
text-decoration: none;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
display:block;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 100%pt;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers */
ul.MenuBarHorizontal ul
{
border: 0px;
background-color: #AEB0B3;
}
/* status for the new colors */
ul.MenuBarHorizontal ul a
{
border: 0px;
color:#FFFFFF;
background-color: #AEB0B3;
padding: 0 30px 0 0;
}
ul.MenuBarHorizontal ul a:hover
{
border: 0px;
color:#444343;
background-color: #AEB0B3;
padding: 0 30px 0 0;
}
/* end new colors */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
text-size:9pt;
font-weight:normal;
/* background-color: #AEBOB3; */
color: #9dba44;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
*/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
*/
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
ul.MenuBarHorizontal ul aIE
{
border: 0px;
color:#FFFFFF;
background-color: #AEB0B3;
padding: 0 30px 0 0;
}
ul.MenuBarHorizontal ul a:hoverIE
{
border: 0px;
color:#444343;
background-color: #AEB0B3;
padding: 0 30px 0 0;
}
}
thanks This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated! It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always). Here is the CSS (sorry if it's a mess, I'm learning) ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 298px; background-image: url(../images/PracticeAreas.gif); z-index: 2; } ul.MenuBarActive { z-index: 1000; } ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 298px; } ul.MenuBarVertical ul { margin: 0% 0 0 100%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } ul.MenuBarVertical ul li { width: 302px; background-color: #CCC; border: 1px solid #A32B34; z-index: 2; } ul.MenuBarVertical { border: 0px; } ul.MenuBarVertical ul { border: 0px; } ul.MenuBarVertical a { display: block; cursor: pointer; padding: 0.5em 0.75em; color: #A32B34; text-decoration: none; } ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color: #FFF; } ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { color: #FFF; } ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(../images/PracticeAreas.gif); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; width: 298px; } ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-repeat: no-repeat; background-position: left top; background-image: url(../images/Template_10_ro_10.png); background-attachment: fixed; width: 298px; } ul.MenuBarVertical iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; z-index: 2; } } -------------------------------------------------------------- Any help would be greatly appreciated! ~cheers~ Hi there... I have a friend that wants me to help them out with the menu on their site. here is the link of the template they bought. uniquedealz dot com/2020 (I hope it's okay I did it like that?) Under "Product" I need to add 4 items then under one of those items/links I am adding 20 more items/links. I found out in the source code I need to use the ul code to create the actual names of the links but I am getting confused with the css class part. Any help would be great. Should I include the style.css and layout.css? Thank you Julie My parent menu div is absolutely positioned. What should be the position of submenu div so that it will appear exactly below the respective parent menu. My parent menu div is #ParentMenu { z-index: 3; position: absolute; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left:0px; top: 42px; left: 45px; width: auto; text-align:Center; color:Black; } #SubMenu { color: red; z-index: 1; text-align:center; border:1px solid #333333; position:absolute; width:10%; float:left; } In this case,the sub menu appears immediate after the parent menu not below it. Please suggest what should be the position for SubMenu. Thanks. Hi , I followed this tutorials (http://matthewjamestaylor.com/blog/centered-dropdown-menus) and was successfully able to create a dynamic menu . At the moment the menu displays just one drop down and not multi submenus drop-downs. Can anybody tell me what can i add to implement something like ? Tab1 Tab2 Link 1 > Link1.1 Link1.2 Link2 . My css code is :- body{behavior:;} body{behavior:url(cssHoverFix.htc);} /* Main menu settings */ #centeredmenu { clear:both; float:left; margin:0; padding:0; border-bottom:1px solid #000; /* black line below menu */ width:100%; font-family:Verdana, Geneva, sans-serif; /* Menu font */ font-size:90%; /* Menu text size */ z-index:1000; /* This makes the dropdown menus appear above the page content below */ position:relative; } /* Top menu items */ #centeredmenu ul { margin:0; padding:0; list-style:none; float:right; position:relative; right:50%; } #centeredmenu ul li { margin:0 0 0 1px; padding:0; float:left; position:relative; left:50%; top:1px; } #centeredmenu ul li a { display:block; margin:0; padding:.6em .5em .4em; font-size:1em; line-height:1em; background:#ddd; text-decoration:none; color:#444; font-weight:bold; border-bottom:1px solid #000; } #centeredmenu ul li.active a { color:#fff; background:#000; } #centeredmenu ul li a:hover { background:#36f; /* Top menu items background colour */ color:#fff; border-bottom:1px solid #03f; } #centeredmenu ul li:hover a, #centeredmenu ul li.hover a { /* This line is required for IE 6 and below */ background:#36f; /* Top menu items background colour */ color:#fff; border-bottom:1px solid #03f; } /* Submenu items */ #centeredmenu ul ul { display:none; /* Sub menus are hidden by default */ position:absolute; top:2em; left:0; float:left; right:auto; /*resets the right:50% on the parent ul */ width:10em; /* width of the drop-down menus */ } #centeredmenu ul ul li { left:auto; /*resets the left:50% on the parent li */ margin:0; /* Reset the 1px margin from the top menu */ clear:left; float:left; width:100%; } #centeredmenu ul ul li a, #centeredmenu ul li.active li a, #centeredmenu ul li:hover ul li a, #centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */ font-size:.8em; font-weight:normal; /* resets the bold set for the top level menu items */ background:#eee; color:#444; line-height:1.4em; /* overwrite line-height value from top menu */ border-bottom:1px solid #ddd; /* sub menu item horizontal lines */ float:left; width:100%; } #centeredmenu ul ul li a:hover, #centeredmenu ul li.active ul li a:hover, #centeredmenu ul li:hover ul li a:hover, #centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */ background:#36f; /* Sub menu items background colour */ color:#fff; float:left; } /* Flip the last submenu so it stays within the page */ #centeredmenu ul ul.last { left:auto; /* reset left:0; value */ right:0; /* Set right value instead */ } #centeredmenu ul ul.last li { float:right; position:relative; right:.8em; } /* Make the sub menus appear on hover */ #centeredmenu ul li:hover ul, #centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ } Html Code is :-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <html> <LINK REL=StyleSheet HREF="nat.css" TYPE="text/css" MEDIA=screen> <body> <div id="centeredmenu"> <ul> <li><a href="#">Tab one</a> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five</a></li> </ul> </li> <li class="active"><a href="#" class="active">Tab two</a> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five is a long link that wraps</a></li> </ul> </li> <li><a href="#">Long tab three</a> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five</a></li> </ul> </li> <li><a href="#">Tab four</a> <ul class="last"> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five</a></li> </ul> </li> </ul> </div> </body> </html> Regards, Umair Hello, I am having a small issue, and after about 10 hours of trying to fix it myself I am looking for help. The problem is when you hover over the Suckerfish menu and it expands, the first entry covers the parent item... I have temporary corrected this by adding the parent as a sub item so it appears to be OK... however I do not wish to keep it this way as I cannot set the submenu width to be the same until the submenu appears below the parent as it should. The site is www.DesolationWildernessVolunteers.org <-- I used the forum code to make this a click able link but for some reason it is not working.... CSS verifys however there is 3 errors in the XHTML that is a result of the template, and though I have tried to locate the errors I cannot find the correct file that is presenting them. I do not believe this is the source of the problem though. The css file controlling the menu is menu.css Code: /** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited {
/** background-color: red; */
/** color: white; */
}
a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover {
/* background-color: #E0E0E0; */
/* color: red; */
}
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited {
background-color: #638D4D;
color: white;
width: auto;
}
a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
/* background-color: #E0E0E0; */
/* color: green; */
}
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:link,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:visited {
background-color: blue;
color: white;
}
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:hover {
background-color: #E0E0E0;
color: blue;
}
ul.mainlevel-son-of-suckerfish-horizontal .expanded {
display: block;
background-image: url("../images/arrow_down.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}
ul.mainlevel-son-of-suckerfish-horizontal ul .expanded {
background-image: url("../images/arrow_right.gif");
}
/** customize style / layout here */
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
font-weight: normal;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
border: 0px solid silver;
padding: 0.3em 0.5em 0.3em 0.5em; /* top, right, bottom, left */
}
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal {
}
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
font-size: 90%;
border-top: none;
height: 1%; /* this is required for the IE to cause the "hasLayout" property and make the whole anchor clickable - "Holly Hack" */
}
#active_menu-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
font-weight: bold;
}
ul.mainlevel-son-of-suckerfish-horizontal, .mainlevel-son-of-suckerfish-horizontal ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
z-index: 100;
}
ul.mainlevel-son-of-suckerfish-horizontal li {
padding: 0;
margin: 0;
background: none;
float: left;
}
ul.mainlevel-son-of-suckerfish-horizontal li li {
position: relative;
display: block;
width: 10em;
}
ul.mainlevel-son-of-suckerfish-horizontal ul {
display: block;
position: absolute;
left: -999em;
margin: -0.2em 0 0 0em;
width: auto;
height: auto;
z-index: 101;
}
ul.mainlevel-son-of-suckerfish-horizontal li li ul {
margin: -1.8em 0 0 10em;
z-index: 102;
}
/** IE7.0 workaround */
ul.mainlevel-son-of-suckerfish-horizontal li:hover, ul.mainlevel-son-of-suckerfish-horizontal li.hover {
position: static;
}
/** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
left: auto;
}
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
left: -999em;
}
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul li.hover ul {
left: auto;
}
ul.mainlevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal li li {
clear: left;
}
/** separator */
span.mainlevel-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
display: block;
width: 1em;
border-width: 0px;
margin-left: 1em;
padding: 0;
padding-top: 1px;
}
/** IE5.0/win workaround: the ">" is handled like a "," */
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal {
position: absolute;
top: 5em; /* change the absolute position for IE5.0 here */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
margin: 0.1em 0 0 0em; /* top, right, bottom, left */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
margin: -1.6em 0 0 10em; /* top, right, bottom, left */
}
Now if I change: Code: /** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
left: auto;
}
to include position: relative; like so: Code: /** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
position: relative;
left: auto;
}
then the menu functions properly except it pushed the entire page down to do so, causing more of an eye sore than if the menu conforms to the lengths of the menu items. Any help in resolving this problem is greatly appreciated. EDIT: BB code not working on the link to my website... I am attempting to put together a site with CSS navigation for the first time. Thanks to people much smarter than I, I've been able to stitch other's lessons into something almost workable. THE PROBLEM I have a horizontal menu with a submenu. This submenu should also display horizontally. It does in FF, but not in either IE6 or IE7. In these browsers, it displays vertically. I have tried a lot of things and finally gave up. I validated my code and was given a pass. I've tried narrowing down the problem and have tried searching for the answer but I just can't figure it out. If needed, you can view the problem at www.foundationfitnesscenter.com/schedule (ignore the crappy header image, it's just there to show an idea for now). The CSS where I feel the problem must be: Code: #nav #schedule-sub,
#nav #education-sub,
#nav #classes-sub {
display:none;
width:90%;
}
body.classes #nav ul#classes-sub a,
body.schedule #nav ul#schedule-sub a,
body.education #nav ul#education-sub a {
background-image:none;
color:#3300FF;
font-size:100%;
font-weight:bold;
line-height:10px;
margin-right:4px;
padding:2px 10px 2px 10px;
text-decoration:none;
}
body.classes #nav ul#classes-sub,
body.schedule #nav ul#schedule-sub {
display:block;
position:absolute;
left:15px;
top:95px;
}
body.education #nav ul#education-sub {
display:block;
position:absolute;
left:175px;
top:95px;
}
The HTML Code: <ul id="nav">
<li class="home-list"><a href="/index.php">Home</a></li>
<li class="classes-list"><a href="../classes/">Classes</a>
<ul id="classes-sub">
<li><a href="../classes/pilates.php">Pilates</a></li>
<li><a href="../classes/dance.php">Dance</a></li>
<li><a href="../classes/gyrokinesis.php">Gyrokinesis</a></li>
</ul>
</li>
<li class="schedule-list"><a href="../schedule/">Schedule</a>
<ul id="schedule-sub">
<li><a href="../schedule/class-schedule">View All Classes</a></li>
<li><a href="../schedule/enroll-private.php">Enroll - Private</a></li>
<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
</ul>
</li>
<li class="education-list"><a href="../education/">Education</a>
<ul id="education-sub">
<li><a href="../education/pilates/">Pilates</a></li>
<li><a href="../education/dance/">Dance</a></li>
<li><a href="../education/gyrokinesis/">Gyrokinesis</a></li>
</ul>
</li>
<li class="about-list"><a href="../about/">About</a></li>
<li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>
Please look at this page - http://www.rodstrans.com/menu.html When you place the mouse over "Services" you will see a nice little (imho) sub menu appear. I have it working well in IE7 & IE8 but there is a small glitch I need some help with. If you carefully place your mouse in the white space between the nav bar and the submenu the submenu disappears. I tried increasing the height of the li but unless I specify a background on the li the increased height does nothing. What I am after is I would like the submenu to be positioned about 5 pixels lower than where it is now, but this issue is preventing me from doing that. In other words, I want the submenu to be seperated from the main nav bar by about 10 pixels, but if I do that then this issue will really be a problem. Thanks. Tom redmeetsblue.com.au/forum-test/ I'm having a problem with our 3rd level sub-menu links in our top menu. we need to specify a height:auto on the .moduletable_topmenu li a because I need each list item to have an easy changable name. this may mean it has 2 lines for 1 name such as the 3rd item under "Test". Though when we have 2 or more 3rd level items the 2nd level moves with the 3rd level. Such as the 2nd item under "Test" Can anyone think of a way to make this 2nd level list not move with the 3rd level items? I'm trying to get my submenu lists to be the same width between IE and Firefox, but they aren't equal for some reason. I'm setting the width to 8em, but it's displaying differently between the two browsers. Here's a link to the page Here is my css: Code:
/*Set all elements to start out with margin:0 and padding:0*/
* {
margin:0;
padding:0;
}
body{
font-family: arial,verdana,sans-serif;
font-size: 100%;
height:100%;
background-color:white;
color:black;
behavior:url("./css/csshover.htc");
}
/* Needed to clearfix to clear out floats*/
* html .clearfix{
height:1%;
}
/* This class is used to clear out floats properly*/
.clearfix{
display:inline;
}
/* same as above */
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
img{
text-decoration:none;
border:0;
}
/*Tile Bar Container*/
#titleMenu{
position:absolute;
height:13%;
width:100%;
border-bottom:1px solid #003366;
z-index:1002;
}
#titleMenu h3{
position:relative;
float:left;
margin:15px 0 0 15px;
font-size:1.50em;
font-style:italic;
font-family:arial,sans-serif;
letter-spacing:1.5px;
word-spacing:2px;
color:#333366;
}
/* Main Menu of image categories*/
#titleMenu ul{
position:relative;
margin-right:60px;
margin-top:6px;
z-index:1003;
}
#titleMenu li{
position:relative;
list-style-type:none;
float:right;
padding:0 35px 0 0;
margin:0;
z-index:1099;
}
/* Sub menu*/
#titleMenu ul li ul{
position:absolute;
margin:0;
top:70px;
left:-1px;
width:8em;
z-index:1000;
}
#titleMenu ul li ul li{
width:100%;
letter-spacing:1px;
padding:0;
border-left:1px solid #BBBBBB;
border-right:1px solid #BBBBBB;
border-bottom:1px solid #BBBBBB;
background-color:#EEEEEE;
z-index:1001;
}
#titleMenu ul li ul li ul{
position:absolute;
margin:0;
top:-1px;
left:8em;
visibility:hidden;;
}
#titleMenu ul li ul li:hover{
background-color:#FFFFFF;
}
/* Sets the first element of ul li ul li ONLY*/
.titleMenuFirstItem{
border-top:1px solid #BBBBBB;
}
/* Style the links in the sub menu's*/
#titleMenu a{
display:block;
width:100%;
font-size:.55em;
text-decoration:none;
color:#003366;
padding:1px 6px;
}
#titleMenu a:hover{
/*none*/
}
/* Rollover functionality for dropdown menus*/
#titleMenu ul li ul{
display:none;
}
#titleMenu ul li:hover ul{
display:block;
}
/* Rollover functionality for popout menus*/
#titleMenu ul li ul li:hover ul{
visibility:visible;
}
/* iFrame Container holding the iFrame*/
#iFrameContainer{
position:absolute;
padding:1px 0;
top: 15%;
height:78%;
width:100%;
border-top:1px solid #BBBBBB;
border-bottom:1px solid #BBBBBB;
}
/* Container holding the footer */
#footer{
position:absolute;
width:100%;
height:4%;
bottom:0;
border-top:1px solid #003366;
background-color:#EEEEEE;
font-size:.65em;
}
#footer ul{
padding-right:5px;
}
#footer ul li{
list-style-type:none;
padding:5px 20px 5px 0;
float:right;
}
#footer a{
text-decoration:none;
color:#003366;
letter-spacing:1px;
}
#footer a:hover{
border-bottom:1px solid #003366;
}
Great forum been looking around but haven't seen anything that answers my question. I have a menu in wordpress witha drop down sub menu. The menu has a colored bar over the links that changes colors when a link is hovered or on the current page. Problem is this. The sub menu I want to be clean, but it is showing the bar over the link when one of those pages is current. Here is the html for the sub menu: Code: <ul class="sub-menu"> <li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://gellyfish.com/led/portfolio/living-rooms-family-rooms/">living rooms + family rooms</a></li> <li id="menu-item-536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-536"><a href="http://gellyfish.com/led/portfolio/kitchens-dining-rooms/">kitchens + dining rooms</a></li> <li id="menu-item-538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="http://gellyfish.com/led/portfolio/bedrooms/">bedrooms</a></li> <li id="menu-item-537" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-537"><a href="http://gellyfish.com/led/portfolio/bathrooms/">bathrooms</a></li> <li id="menu-item-535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="http://gellyfish.com/led/portfolio/before-after/">before & after</a></li> <li id="menu-item-542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-542"><a href="http://gellyfish.com/led/portfolio/commerical/">commerical</a></li> </ul> Here is the CSS that I cant get to stop placing the bar on it.... Code: #access .current_page_item > a,
#access .current_page_ancestor > a {
color:#963300;
background-image:url("images/redbar.jpg");
background-position:top center;
background-repeat:repeat-x;
}
Here is the code I am trying to figure out how to stop the bar... Code: #acess ul ul li.current-menu-item a{ background-image:none;}
I do want the red bar on the top menu, just not on the sub menu. I messed with this a million ways and dont seem to be able to get rid of the bar on top.. Any help is greatly appreciated. |
|||||||