Drop down menu hidden in IE
I am making a website with a drop down menu and while it appears in Firefox and Safari fine it doesn't in IE. Instead it seems to be cut off when rolled over.
Would anyone have any idea what could be causing this issue?
http://www.khawkinsdesign.com/ecole/index.html
Many Thanks,
KJoe
Mybe need a </li> after:
<li> <a>Ecole Buissonniere</a>
Bob
Similar Messages
-
Drop down menu hidden behind javascript slider
I have a js slider that is sitting in front of my drop down menu.
I tried the x-index in my css file using position as absolute and nothing...
Can anyone help..I am new to this. I am using Easy Rotator for the slider
Thanks
.servicesdropped {
display: none;
text-align: left;
position: absolute;
background: #172323;
font-size: 12px;
width: 590px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
margin: 10px 0 0 20px;
padding: 10px 20px 20px;
z-index: 40000;
http://99.98.44.183/TEST_WEB/index2.html#64 errors is not acceptable. You still have non-working menus owing to the malformed lists and your slider doesn't work.
I'm trying to be constructive when I say this site is seriously overdue for a re-build. The table layout with a gazillion spacer.gifs is a relic from 1990's web design. Practically speaking, this site belongs in a museum. In the long run, it would be better to re-build it with CSS layouts and modern web practices See Responsive Web Design.
Nancy O. -
Drop Down Menu Hidden By Flash in IE
http://www.extravaganzacreative.com/moonlight/test2.htm
My drop down (under "Portfolio") drops behind my Flash movie
that it should extend over. It works fine on my Mac in FF and
Safari, I am only seeing it when I test it on my PC in IE.
I have tried changing the wmode to transparent in all places
where that is relevant. I have also experimented with z-index
(although I don't know if this impacts flash movies.)
I have been stuck on this for days. Not sure if this was the
best forum to post this at because it combines various members of
the Creative Suitehttp://www.projectseven.com/support/answers.asp?id=127
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/apm
An Accessible & Elegant Accordion
"extravaganza_" <[email protected]> wrote in
message
news:gqecn0$s1$[email protected]..
>
http://www.extravaganzacreative.com/moonlight/test2.htm
>
> My drop down (under "Portfolio") drops behind my Flash
movie that it
> should
> extend over. It works fine on my Mac in FF and Safari, I
am only seeing
> it
> when I test it on my PC in IE.
>
> I have tried changing the wmode to transparent in all
places where that is
> relevant. I have also experimented with z-index
(although I don't know
> if
> this impacts flash movies.)
>
> I have been stuck on this for days. Not sure if this was
the best forum
> to
> post this at because it combines various members of the
Creative Suite
> -
How can you change a drop down menu's selection in a case statement?
Hi,
I am trying to an array finding vi. This VI will take an existing xml file and after the user has selected his/her equipment, input, output, and frequency it will put all of those options into a string and search the xml file for that exact array name and display it on an output screen. The problem I am having is that my input and outputs selection needs to be a little different depending upon the equipment selected. I thought that I could use a case statement to change the input and output selectable options, but I have run into many snags with it. For one everytime I place a new Input and Output drop down menu in the case statement it wants to place a new one in the front panel (I only want one input and output not three I have two inputs and outputs hidden right now). I believe I am using the case statement wrong... Can anyone help change my input and output selectable options depending upon the equipment selected. Attached is my xml file, Array Find.vi (the original one), and Array Find_Test.vi (this is the one I am trying to modify).
Thanks,
dlovell
Solved!
Go to Solution.
Attachments:
Find Array.zip 126 KBHi dlovell,
There are 2 key things I'd recommend for the code - using property nodes to edit the strings in the combo boxes. Something like the following snippet:
Also, check your CPU in task manager when running the code. It will eat a whole core of your machine (25% quad core, 50% dual, 100% single) - that is because you are running the while loop and polling the control as fast as Windows will allow you to. Using Event Structures is a much more efficient way of working in this example.
Check out the MOD attached
Regards,
Peter D
Attachments:
MOD_Find Array.vi 28 KB -
How can change background color of drop down menu navigation?
Hi,
I am using multi level drop-down-navigation menu in my website.
I am get good drop-down menu from htmldrive.net, but problem is how can change menu background color black to other colors.
please help me
Link & code is given below
http://www.htmldrive.net/items/demo/913/Multi-Level-Drop-Down-Menu-Navigation-with-CSS3
HTML Code
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a></li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Three Levels</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a>
<ul>
<li><a href="#">Level 2.3.1</a></li>
<li><a href="#">Level 2.3.2</a></li>
<li><a href="#">Level 2.3.3</a></li>
<li><a href="#">Level 2.3.4</a></li>
<li><a href="#">Level 2.3.5</a></li>
<li><a href="#">Level 2.3.6</a></li>
<li><a href="#">Level 2.3.7</a></li>
</ul>
</li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
CSS CODE
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
#nav ul {
margin:0;
padding:0;
list-style:none;
#nav ul li {
float:left;
#nav ul li a {
float: left;
color:#d4d4d4;
padding: 10px 20px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
#nav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;Change this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
to this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #new color code;
width: 100%;
And repeat this on other selectors.
Nancy O. -
Time Capsule appears twice in Airport drop down menu
Menu Bar > Airport drop-down menu: My Time Capsule's wireless name shows up twice in my list of wifi sources. Once in the group with all the other routers and again in a group called "Devices".
Long story short…
I start with a perfectly functional, WPA/WPA2 password-protected Time Capsule: Over a year old. Two MbP's using it for Time Machine backup. Connected to a 1.5TB MyBook external HD via usb. Doubles as my wifi router. Everything's connected to it, including my wifi-enabled printer. Works great. No issues.
I get this idea in my head that I need to hide my wifi signal. I figure it out and ¡Viola! Hidden. Then I try to add my wifi-enabled printer to the list of allowed devices in "Access Control". I hit a big snag and can't figure out how to get it to connect (btw, don't buy a Brother printer. Pure crap). So, I give up and revert permissions back to visible, password-protected state.
Skipping irrelevant issues that I already resolved, I now have the wireless name of my Time Capsule appearing twice in the airport drop down menu. It appears with all the other wifi sources my machine detects AND appears at the bottom under a new category called "Devices".
All I want is to have things back the way they were and this anomaly in the drop down menu is a constant reminder that I #1 failed and #2 bought a crap printer.
(Long story long, I guess. Sorry.) How do I delete this "Devices" group from the airport drop down menu?Stilts McCoy wrote:
Menu Bar > Airport drop-down menu: My Time Capsule's wireless name shows up twice in my list of wifi sources. Once in the group with all the other routers and again in a group called "Devices".
You might find useful advice in this thread:
http://discussions.apple.com/message.jspa?messageID=12156248
If you want to post a reply, please do so to this thread, not the other one. -
In the new iTunes version 11.0.0.163 I tried to delete a free app but it still shows after I deleted it from all my Apple devices. The checkbox in the previous version of iTunes does not seem to be present in the new version and I do not see a drop down menu. And there are no Help menu choices either. I guess, I will otherwise wait for the new update to iTunes as of 12.10.2012.
With iTunes 11 on PCs the drop-down menus are hidden by default - control-B should get the menus to show
This screenshot is from a Mac, but it should be similar on a PC : -
I need help changing a drop down menu on a template
Hi there
ive been using dreamwearver on and of for a few years now and just about get by, ive just bought a web site template and although ive managed to ajust most things,
the template had a drop down menu using CSS currently on the "about us" option a sub menu drops down, ive worked out how to add to this menu and change the words
but what i cant do is have this same drop down menu on another part or the menu system for example i would like another drop down menu on the "our menu" part
any help would be much appreciated
below is the source code
ive got some js codes to but im not sure if the menu system uses them
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/ui.totop.css" type="text/css" media="screen">
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="js/tms-0.3.js" type="text/javascript"></script>
<script src="js/tms_presets.js" type="text/javascript"></script>
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_b annercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<!--=========================================header======================================= ======-->
<header>
<div class="bg-1">
<div class="main">
<div class="container_24">
<div class="wrapper">
<article class="grid_24">
<h1><a href="index.html">Alexander</a></h1>
</article>
</div>
<article class="grid_24">
<nav>
<ul class="menu">
<li><a class="active" href="index.html">home<span></span></a></li>
<li><a href="menu.html">our menu<span></span></a></li>
<li><a href="about us.html">about us<span></span></a>
<ul>
<li><a href="#">history</a></li>
<li><a href="#">gallery</a>
<li><a href="#">weddings</a></li>
</ul>
</li>
<li><a href="reservation.html">Reservation<span></span></a></li>
<li><a href="contact us.html">contacts<span></span></a></li>
</ul>
<div class="clear"></div>
</nav>
<div class="clear"></div>
<div class="wrapper">
<div class="col-1 bg-2">
<div>
<h3>WELCOME TO<span>BALOOS</span></h3>
</div>
<div>
<div class="color-1">
<p>Situated in Henfield, Baloos is the creation of chef and restaurateur Chris and Amanda. Chris’ passion for food using the freshest, local and seasonal produce combined with Amanda’s friendly front-of-house charm and personal touch to make Baloos the perfect spot for lunch or evening meal. </p>
</div>
<a href="#" class="button-1"><span>read more</span></a>
</div>
</div>
<div class="col-2">
<div class="slider_bg">
<div class="slider">
<ul class="items">
<li><img src="images/slider_1.jpg" alt=""></li>
<li><img src="images/slider_2.jpg" alt=""></li>
<li><img src="images/slider_3.jpg" alt=""></li>
<li><img src="images/slider_4.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</article>
<div class="clear"></div>
</div>
</div>
</div>
</header>
<!--==============================content================================-->
<section id="content">
<div class="bg-3">
<div class="bg-4">
<div class="main">
<div class="container_24">
<div class="wrapper">
<article class="grid_24">
<div class="wrapper border-1 margin-bot3">
<article class="grid_6 suffix_2 alpha">
<h4 class="indent-top margin-bot1">restaurant hours</h4>
<div class="color-3 lh-1 border-2">
<strong class="title-3 d-block margin-bot2">Bar </strong>
11:30-8:30 Sunday-Thursday<br>
11:30-9:00 Friday and Saturday
</div>
<div class="color-3 lh-1 border-2">
<strong class="title-3 d-block margin-bot2">Lunch</strong>
Tue.-Sat. 12:00-2pm<br>
No Lunch on Sunday
</div>
<div class="color-3 lh-1">
<strong class="title-3 d-block margin-bot2">Dinner</strong>
Tuesday-Saturday 6:00- 9:30<br>
Sunday 12:30-4pm
</div>
</article>
<article class="grid_16 omega indent-top1">
<div class="wrapper">
<figure class="img-indent-l">
<img src="images/page1_img1.jpg" alt="">
</figure>
<div class="extra-wrap">
<div class="title-1"> Welcome!</div>
<div class="color-4 lh"><span class="color-3">Moleacene anrit ma hasese rayuaumso natoqu eagnis</span><br>
dist mte dulmuese feugiata lesua kery ecencies phaledaty
fenanec sit amm easer ermeolor dapegetele mentum.
Baelursus eleifneanctor wisi et urna. Aliquam eravolutpatis
turpisntey yoleacene anritserauas ty miwert betyudes.</div>
<div class="title-2">chef</div>
<figure class="sign">
<img src="images/page1_img2.png" alt="">
</figure>
</div>
</div>
</article>
</div>
<div class="wrapper border-1 indent-top">
<article class="grid_7 suffix_1 alpha">
<h4 class="margin-bot4">about BALOOS</h4>
<strong class="color-3 size-1 reg">Moleacene anrit maha deyuas</strong>
<div class="margin-bot">Cum socis natoqu eagn dist mte dulm uese feugiata lesu kery lecenas stricies phaledatyfec sim easer erment.</div>
<a href="#" class="button-2"><span>read more</span></a>
</article>
<article class="grid_16 omega">
<h4 class="margin-bot"> OUR RECOMENDED dishes of the MONTH</h4>
<div class="wrapper margin-bot3">
<article class="grid_8 alpha">
<div class="wrapper">
<figure class="img-indent-2">
<img src="images/page1_img3.jpg" alt="">
</figure>
<div class="extra-wrap indent-top2">
<a href="#" class="color-6 link2">Grilled Fish</a><br>
kery lecenas stricies phaledatyfenanec sit amm easer erment. Ut ts dolor dapege telementum.
</div>
</div>
</article>
<article class="grid_8 omega">
<div class="wrapper">
<figure class="img-indent-2">
<img src="images/page1_img4.jpg" alt="">
</figure>
<div class="extra-wrap indent-top2">
<a href="#" class="color-6 link2">Chicken Quesadilla</a><br>
lesuada kercenas stricies phatyfenanec sit amm easer rment. Ut ts dolor dapege telementum.
</div>
</div>
</article>
</div>
<a href="#" class="button-3"><span>view all recipes</span></a>
</article>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==============================footer================================-->
<footer>
<div class="main">
<div class="container_24">
<div class="wrapper indent-bottom">
<article class="grid_14">
<nav>
<ul class="menu2">
<li><a class="active" href="index.html">home</a></li>
<li><a href="menu.html">our menu</a></li>
<li><a href="about us.html">about us</a></li>
<li><a href="reservation.html">Reservation</a></li>
<li><a href="contact us.html">contacts</a></li>
</ul>
</nav>
</article>
<article class="grid_10">
<div class="indent-top3">
<div class="border-3 prefix_1">
<div class="title-4">Find Us On Social Network:</div>
<p class="p0 size-2 color-7">Bayarsety kertya aset aplicaboes kerasaer </p>
<ul class="soc_list">
<li><a href="#"><img src="images/soc_1.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_2.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_3.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_4.png" alt=""></a></li>
<li><a href="#"><img src="images/soc_5.png" alt=""></a></li>
</ul>
</div>
</div>
</article>
</div>
<div class="wrapper border-4">
<article class="grid_24 aligncenter down">
BALOOS © 2013 • <a href="Privacy.html" class="link2">Privacy policy</a> •
<span class="d-block"><!--{%FOOTER_LINK} --></span>
</article>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
preset:'simpleFade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:7000,
</script>
</body>
</html>
HERE IS THE CCS CODE
@import url(http://fonts.googleapis.com/css?family=Amethysta);
@import url(http://fonts.googleapis.com/css?family=Mr+De+Haviland);
@import url(http://fonts.googleapis.com/css?family=Mr+Dafoe);
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
/* Global properties ======================================================== */
html {width:100%;}
html, body {height:100%;}
body {
font-family:Arial, Helvetica, sans-serif;
color:#666666;
min-width:960px;
background:#efefef;
font-size:14px;
line-height:22px;
.main {
width:960px;
padding:0;
margin:0 auto;
position:relative;
a {color:#666666; outline:none; text-decoration:none;}
a:hover {text-decoration:none;}
.link {text-decoration:underline;}
.link2:hover {text-decoration:underline;}
.wrapper {width:100%; overflow:hidden;}
.extra-wrap {overflow:hidden;}
p {margin-bottom:22px;}
.p0 {margin-bottom:0;}
.p1 {margin-bottom:0;}
.d-in-block {display:inline-block;}
.d-block {display:block;}
.reg {text-transform:uppercase;}
.rel {position:relative;}
.fleft {float:left;}
.fright {float:right;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.img-indent-l {float:left; margin:0px 39px 0px 0px;}
.img-indent-2 {float:left; margin:0px 32px 0px 0px;}
.img-indent-3 {float:left; margin:6px 32px 0px 0px;}
/*********************************boxes**********************************/
.indent {padding:0;}
.indent-left {padding-left:0;}
.indent-bottom {padding-bottom:25px;}
.indent-right {padding-right:0;}
.indent-top {padding-top:39px;}
.indent-top1 {padding-top:37px;}
.indent-top2 {padding-top:6px;}
.indent-top3 {padding-top:29px;}
.indent-top4 {padding-top:40px;}
.indent-top5 {padding-top:8px;}
.margin-top { margin-top:0;}
.margin-bot {margin-bottom:33px;}
.margin-bot1 {margin-bottom:26px;}
.margin-bot2 {margin-bottom:9px;}
.margin-bot3 {margin-bottom:29px;}
.margin-bot4 {margin-bottom:23px;}
.margin-bot5 {margin-bottom:19px;}
.margin-bot6 {margin-bottom:11px;}
.margin-bot7 {margin-bottom:42px;}
.margin-left {margin-left:0;}
.margin-right {margin-right:20px;}
.margin-right1 {margin-right:30px;}
/*********************************header*************************************/
header {
width:100%;
background:url(../images/header.jpg) center top no-repeat #282829;
h1 {
padding:32px 0 23px 299px;
h1 a {
display:block;
text-indent:-9999px;
background:url(../images/logo.png) no-repeat 0 0;
width:316px;
height:86px;
/***** menu *****/
header nav {
float:left;
background:url(../images/menu_r.png) right 38px no-repeat;
width:100%;
.menu {
float:left;
padding:9px 0 8px 84px;
position:relative;
z-index:20;
font-family: 'Amethysta', serif;
background:url(../images/menu_l.png) left 38px no-repeat;
.menu li {
float:left;
position:relative;
background:url(../images/menu2.png) left top no-repeat;
padding:27px 45px 24px 42px;
.menu li:first-child {
background:none;
padding-left:0;
.menu li a {
display:block;
font-size:16px;
line-height:20px;
color:#dbdada;
text-transform:uppercase;
z-index:20;
.menu li a span {
display:block;
width:18px;
height:9px;
background:url(../images/sub.png) left top no-repeat;
position:absolute;
top:-999px;
left:50%;
margin-left:-9px;
.menu li:first-child a span {
margin-left:-33px;
.menu li.sfHover {
position:relative;
z-index:10;
.menu li a.active span,
.menu > li > a:hover span,
.menu > li.sfHover > a span {
top:-9px;
.menu ul {
z-index:20;
letter-spacing:normal;
position: absolute;
top: -9999em;
width: 100px;
background:url(../images/menu4.gif) left top repeat;
border: none;
box-shadow:5px 5px 5px rgba(0,0,0, .26);
padding:6px 20px 10px;
.menu ul ul {
background-image:url(../images/menu5.gif);
.menu ul li {width: 100%;}
.menu li:hover {visibility: inherit; }
.menu li li {
margin:0;
border:none;
padding:9px 0 6px 0;
background:url(../images/menu6.png) left top repeat-x;
.menu li li li {
background-image:url(../images/menu7.png);
.menu li li:first-child {
background:none;
.menu li li a {
background:none;
display: block;
padding: 0 0 0 6px;
font-size: 14px;
line-height: 17px;
color: #fff;
.menu li li > a:hover,
.menu li li.sfHover > a {
color:#b16167;
.menu li:hover ul, .menu li.sfHover ul {
left: 22px;
top: 79px;
z-index: 999;
ul.menu li:hover li ul, ul.menu li.sfHover li ul {
top: -999em;
ul.menu li li:hover ul, ul.menu li li.sfHover ul {
left: 100px;
top: -6px;
z-index: 99;
ul.menu li li:hover li ul, ul.menu li li.sfHover li ul {
top: -999em;
/*********************************content*************************************/
#content {
width:100%;
background:url(../images/bg-1.jpg) center -464px no-repeat #020202;
padding:0;
#page1 #content {
margin-top:-194px;
.col-1 {
float:left;
width:360px;
.col-2 {
float:left;
width:590px;
.col-3 {
float:left;
width:300px;
.col-4 {
float:left;
width:280px;
.sign {
text-align:right;
padding:10px 40px 0 0;
.letter {
text-align:center;
font-family: 'Mr Dafoe', cursive;
font-size:70px;
line-height:84px;
color:#cbcbcb;
float:left;
width:60px;
margin-right:15px;
/******************* slider *************/
.slider_bg {
background:url(../images/slider_bg.jpg) left top no-repeat;
overflow:hidden;
width:590px;
height:429px;
overflow:hidden;
.slider {
width:534px;
height:429px;
position:relative;
background:url(../images/preloader.png) center center no-repeat;
.pagination {
position:absolute;
right:-37px;
top:21px;
overflow:hidden;
z-index:999;
.pagination li {
margin-top:3px
.pagination li:first-child {
margin-top:0;
.pagination li a {
display:block;
width:15px;
height:15px;
background:url(../images/pag_nav.png) left bottom no-repeat;
.pagination li a:hover,
.pagination .current a {
background-position:left top;
.pagination .current a {
cursor:default;
.items {display:none;}
/******************* slideshow *************/
#slideshow {
width:620px;
height:705px;
overflow:hidden;
background:none !important;
#slideshow>div {
width:620px;
height:705px;
background:none !important;
#prev {
float:left;
#next {
float:left;
#nav {
overflow:hidden;
padding:0px 15px 0;
float:right;
#nav li {
float:left;
font-size:13px;
line-height:16px;
text-align:center;
margin-left:1px;
display:block !important;
#nav li:first-child {
margin-left:0;
#nav li a {
color:#666666;
display:block;
width:14px;
height:16px;
overflow:hidden;
#nav .activeSlide a,
#nav li a:hover {
color:#fff;
.nav_wrap {
overflow:hidden;
position:absolute;
width:200px;
height:30px;
right:97px;
top:-33px;
#next,
#prev {
text-indent:-9999px;
float:right;
overflow:hidden;
display:block;
width:10px;
height:18px;
#next {
background:url(../images/next.png) left top no-repeat;
#prev {
background:url(../images/prev.png) left top no-repeat;
#next:hover ,
#prev:hover {
background-position:right top;
/*********************************bg's*************************************/
.bg-1 {
background:url(../images/light.png) center top no-repeat;
.bg-2 {
background:url(../images/bg-2.jpg) left top no-repeat;
height:429px;
overflow:hidden;
text-align:center;
.bg-2>div {
padding:80px 15px 0 0;
.bg-2>div+div {
font-size:13px;
line-height:20px;
padding:27px 45px 0 50px;
.bg-3 {
background:url(../images/bg-4.png) left top repeat-x;
.bg-4 {
background:url(../images/bg-5.png) left bottom repeat-x;
padding:70px 0 35px;
#page1 .bg-4 {
padding:225px 0 35px;
.bg-5 {
background:url(../images/bg-7.png) center top no-repeat;
.bg-6 {
background:url(../images/bg-8.gif) center top repeat-x;
.border-1 {
background:url(../images/border-1.png) left top repeat-x;
.border-2 {
border-bottom:1px dotted #313131;
padding:0 0 18px;
margin:0 0 15px;
#page3 .border-2 {
padding:0 0 23px;
margin:0 0 14px;
#page4 .border-2 {
padding:0 0 35px;
margin:0 0 37px;
.border-3 {
background:url(../images/border-2.png) left top repeat-y;
padding:5px 0 4px;
.border-4 {
background:url(../images/border-3.png) left top repeat-x;
/*********************************buttons*************************************/
.button-1 {
display:inline-block;
font-size:18px;
line-height:22px;
color:#f9dfdf;
font-family: 'Amethysta', serif;
text-transform:uppercase;
background:url(../images/button1_l.png) left 5px no-repeat;
padding:0 0 0 23px;
.button-1 span {
display:block;
background:url(../images/button1_r.png) right 5px no-repeat;
padding:0 29px 0 4px;
.button-1:hover {
color:#1d1d1d;
.button-2 {
display:inline-block;
text-transform:uppercase;
font-family: 'Amethysta', serif;
font-size:14px;
line-height:17px;
color:#fff;
background:url(../images/button-2.gif) left bottom repeat-x;
height:41px;
overflow:hidden;
border:1px solid #343434;
.button-2 span {
display:block;
padding:13px 16px 11px 14px;
.button-2:hover {
background-position:left top;
.button-3 {
text-align:right;
text-transform:uppercase;
display:block;
background:url(../images/button-2.gif) left bottom repeat-x;
height:41px;
border:1px solid #323232;
font-size:16px;
line-height:20px;
color:#bfbfbf;
font-family: 'Amethysta', serif;
.button-3:hover {
background-position:left top;
.button-3 span {
background:url(../images/marker-1.png) left 11px no-repeat;
display:inline-block;
padding:11px 19px 0 18px;
/*********************************lists*************************************/
.dl-1 dt {
color:#fff;
.dl-1 dd {
overflow:hidden;
.dl-1 dd span {
display:block;
float:left;
width:100px;
.soc_list {
overflow:hidden;
padding:19px 0 0;
.soc_list li {
float:left;
margin-left:10px;
.soc_list li:first-child {
margin-left:0;
.soc_list li a {
display:block;
width:32px;
height:32px;
.ul-1 li {
font-size:14px;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
.ul-1 li a {
color:#b7b7b7;
.ul-1 li a:hover {
color:#fff;
/*********************************fonts*************************************/
h3 {
font-size:28px;
line-height:34px;
color:#fbecec;
font-family: 'Amethysta', serif;
font-weight:normal;
text-transform:uppercase;
background:url(../images/bg-3.png) left bottom no-repeat;
padding:0 0 33px 0;
h3 span {
display:block;
margin-top:-5px;
color:#f7d3d3;
h4 {
font-size:16px;
line-height:20px;
color:#dbdada;
font-family:'Amethysta', serif;
font-weight:normal;
text-transform:uppercase;
.title-1 {
color:#a0a0a0;
font-family:'Mr De Haviland', cursive;
font-size:72px;
line-height:87px;
margin:-8px 0 15px 0;
padding-left:5px;
.title-2 {
text-align:right;
padding:12px 90px 0 0;
color:#dddcdc;
font-family:'Amethysta', serif;
font-size:18px;
line-height:22px;
text-transform:uppercase;
.title-3 {
font-size:13px;
line-height:18px;
color:#fff;
.title-4 {
color:#464646;
font-family:'Amethysta', serif;
font-size:18px;
line-height:22px;
text-transform:uppercase;
margin-bottom:3px;
.lh {
line-height:23px;
.lh-1 {
line-height:20px;
.size-1 {
font-size:13px;
display:block;
.size-2 {
font-size:11px;
line-height:14px;
.color-1 {color:#e4d0d1;}
.color-2 {color:#dcb0b1;}
.color-3 {color:#b7b7b7;}
.color-4 {color:#7e7e7e;}
.color-5 {color:#b2b2b2;}
.color-6 {color:#fff;}
.color-7 {color:#919191;}
/******* form's ********/
/***** contact form *****/
#form1 fieldset {
border:none;
padding:0;
#form1 label {
display:block;
min-height:57px;
#form1 label.message {
height:232px;
.inp {
display:block;
width:320px;
height:40px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
overflow:hidden;
position:relative;
border:1px solid #343434
#form1 input {
width:320px;
padding:12px 0 12px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
height:16px;
color:#666;
border:none;
background:none;
outline:none;
#form1 .area .error { float:none;}
.text_a {
position:relative;
overflow:hidden;
display:block;
width:478px;
height:230px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
border:1px solid #343434
#form1 textarea {
height:216px;
margin:0;
width:478px;
padding:12px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
border:none;
background:none;
overflow:auto;
outline:none;
resize:none;
#form1 a {cursor:pointer;}
#form1 .success {display:none; margin-bottom:10px;}
#form1 .error,
#form1 .empty {
color:#f00;
font-size:11px;
line-height:18px;
display:none;
overflow:hidden;
#form1 .buttons-wrapper {text-align:right; padding-top:40px; position:relative;}
#form1 .buttons-wrapper a { margin-left:30px;}
#form2 fieldset {
border:none;
padding:0;
#form2 label {
display:block;
min-height:57px;
#form2 label.message {
height:232px;
.inp2 {
display:block;
width:318px;
height:40px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
overflow:hidden;
position:relative;
border:1px solid #343434
#form2 input {
width:318px;
padding:12px 0 12px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
height:16px;
color:#666;
border:none;
background:none;
outline:none;
#form2 .area .error { float:none;}
.text_a2 {
position:relative;
overflow:hidden;
display:block;
width:318px;
height:230px;
padding:0 14px;
background:url(../images/inp-1.png) left top repeat;
border:1px solid #343434
#form2 textarea {
height:206px;
margin:0;
width:318px;
padding:12px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
border:none;
background:none;
overflow:auto;
outline:none;
resize:none;
#form2 a {cursor:pointer;}
#form2 .success {display:none; margin-bottom:10px;}
#form2 .error,
#form2 .empty {
color:#f00;
font-size:11px;
line-height:18px;
display:none;
overflow:hidden;
#form2 .buttons-wrapper {text-align:right; padding-top:40px; position:relative;}
#form2 .buttons-wrapper a { margin-left:30px;}
.map {
width:350px;
height:365px;
margin:0 0 26px;
/*******Hi -
While I am not familiar with the use of all the span tags I see,
You said "currently on the "about us" option a sub menu drops down, ive worked out how to add to this menu and change the words"
What is the problem doing the same thing under the other top level item? -
DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8
Hi,
I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
It works well in Google Chrome.
It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
The menu can be seen at work by clicking on this link:
www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
Below are all the scrips involved.
Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 10;
padding: 0;
list-style-type: none;
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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
/*height:38px;*/
margin: 0;
padding: 0;
list-style-type: none;
font-size: 87%;
z-index: 1020;
cursor: default;
width: 160px;
position: absolute;
left: -1000em;
/* 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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 24px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 160px;
/* 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 have borders on all sides */
ul.MenuBarHorizontal ul
/*border: 1px solid #CCC;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*height: 40px;*/
text-align: center;
/*vertical-align: center;*/
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*zzzzzzzz Text Color*/
color: #333; /*background-color: #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/*background-color: #33C;
color: #FFF;*/
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-image: url(../Main-Buttons-mouse-over.jpg); /*background-color: #33C;
color: #FFF;*/
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-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-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-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* 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-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;
filter:alpha(opacity:0.1);
/* 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;
Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
And last, here is the HTML code that has also not been modified in any way:
<!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=utf-8" />
<title>Untitled Document</title>
<script src="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Thanks in advance for any of your help.
Jose H.Hello Nancy,
I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now. Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
By the way.. the IE8 security measure did pop up while working from the server.
Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
Good luck.. as I know it can become a complicated task when creating custom Spry menus.
<b>Here is the finished CSS script</b>
<code>@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 10;
padding: 0;
list-style-type: none;
/* font size for top menu*/
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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: 87%;
z-index: 1020;
cursor: default;
width: 160px;
position: absolute;
left: -1000em;
/* 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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 0px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 162px;
/* New addition */
/* 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 have borders on all sides */
ul.MenuBarHorizontal ul
/*border: 1px solid #CCC;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*My note -- took out borders & changed text color to #333(black)& added my own mouse not over image-- */
/*border: 0px solid #333332;*/
background-image: url(../Main-Buttons.jpg);
/*height: 40px;*/
text-align: center;
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*My note --Text Color-- */
color: #333; /*background-color: was #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/* My note --took out all backgound & text color for mouse over-- */
/*background-color: #33C;
color: #FFF;*/
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
/*My note -- took out background & text & added my own mouse over image-- */
background-image: url(../Main-Buttons-mouse-over.jpg);
/*background-color: #33C;
color: #FFF;*/
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
/* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
height: 40px;
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-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-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* 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-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;
filter:alpha(opacity:0.1);
/* 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;
/* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
background: #3e6487;
</code>
<b>Here is the modified HTML script</b>
<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=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<!-- My note --the bellow line was: <li><a href="#">Contact Us</a></li> --- changing it to: <li><a href="#" class="MenuBarItemSubmenu">Contact Us</a> corrected the height of the Contact us button wich did not have sub menus and because of this only diplayed at half size vertically in IE8 //-->
<li><a href="#" class="MenuBarItemSubmenu">Contact Us</a>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
</code>
And Richard.. Thanks again for the time and your help, truly appreciated.
Jose H. -
Photoshop and elements 13
Working in iPhoto
Want to edit image using photoshop elements
Did the following
IPhoto>Preferences>Advanced>Edit Photos: In drop down menu chose in Photoshop Elements
Also control click and chose edit in external editor
Drop down menu edit photos in external program>photoshop Elements
Go to to the image I'm working on --- selected the image, the clicked on edit. When nothing happened I double clicked the image. Still elements didn't open. Then I opened the Elements editor, went back to iphoto and tried the entire process again. the photo still didn't open on Elements 13 for editing.
I have 3 Elements 13 books as well as looked on line--all my references say the exact same thing ---- iPhoto>Preferences>advanced>edit in external program>photoshop Elements
I uninstalled and reinstalled both iPhoto as well as Elements.
I spoke with application technical support. There appears to be nothing wrong with my copy of iPhoto. However there is no support from Adobe. I waited for over 1.5 hours for chat support several days ago, and finally gave up.You are probably choosing the obvious file rather than the correct file as the PSE editor. The actual editor is hidden away inside the Support Files folder. The PSE file at the top level of the PSE folder in Applications is just an alias for the welcome screen and what you're describing is exactly what happens when you choose that. You want this one:
-
Form2mail how do I set up the form to sent to a recipient selected from a drop-down menu?
I am trying to configure dreamweaver form2mail to be able to send the information submitted to individual employees. I would like the form to be set up where as you choose the recipient form a drop down menu and the only that recipient would receive the information collected on the form. I can't seem to find any information on this. I can only find info on sending to multiple recipients at the same time. I only want the recipient that is selected to receive the form information.
Alternatively, can anyone recommend a low cost or FREE form to mail system.
Thanks in advance for your assistance!Jim, That is exactly what I need. I'm using Form2Mail the Dreamweaver extension for Adobe Dreamweaver. It only gives me the option to send to one email address or cc to multiple not individual sends.
Here is the html
<form action="/HDWForm2Mail/Form2Mail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" accept-charset="iso-8859-1">
<p>
<label for="message"></label>
<textarea name="message2" id="message" cols="50" rows="5"></textarea>
</p>
<table width="429">
<tr>
<td><strong>Recipient:</strong></td>
<td><label for="recipient"></label>
<select name="recipient" id="recipient">
<option value="[email protected]">Mr. Person 1</option>
<option value="[email protected]">Mr. Person 2</option>
<option value="[email protected]">Mr. Person 3</option>
</select></td>
</tr>
<tr>
<td><strong>Your Email Address:</strong></td>
<td><label for="email"></label>
<input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td><strong>Attachment:</strong></td>
<td><label for="file"></label>
<input type="file" name="file" id="file" /></td>
</tr>
<tr>
<td colspan="2"><strong>To Submit your email, click the SEND button:
<input name="send" type="submit" id="send" onclick="MM_validateForm('email','','RisEmail','message','','R');return document.MM_returnValue" value="Send" />
</strong></td>
</tr>
</table>
<input type="hidden" name="hdwemail" id="hdwemail" value="lisa+email.com" />
<input type="hidden" name="hdwok" id="hdwok" value="http://ricochec.com/thank-you.html" />
<input type="hidden" name="hdwnook" id="hdwnook" value="http://ricoche.com/error.html" />
</form> -
Drop-down menu in Dreamweaver CS5.5 not displaying
Thanks for anyone's help. I'm a first time user of the forum so please excuse any protocol errors.
I can't get my drop-down menu to display on my web page (http://www.cglcontracting.com/) on a Windows platform using Dreamweaver CS5.5.
Thanks very much for any advice/help.Hi again -
My previous suggestion did not seem to make any difference, the CSS still did not validate.
I seems to be choking on your Browser Hack section.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cglcontracting.com%2FSpr yAssets%2FSpryMenuBarHorizontal.css&profile=css3&usermedium=all&warning=1&vextwarning=&lan g=en
I re-wrote the bottom Browser Hack section and it now validates.
I'll paste the whole CSS file here, Save it as "SpryMenuBarHorizontal.css" and give it a try.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 90%;
cursor: default;
width: auto;
color: rgb(153,153,153);
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
background-color: rgb(255,255,255);
vertical-align: middle;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
color: rgb(153,153,153);
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
color: rgb(0,255,0);
overflow: hidden;
visibility: inherit;
/* 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
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
color: rgb(204,204,204);
top: 0px;
overflow: auto;
visibility: inherit;
margin-top: -5%;
margin-left: 95%;
/* 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
color: rgb(204,204,204);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
text-transform: uppercase;
background-color: rgb(255,0,0);
left: auto;
width: auto;
z-index: auto;
visibility: inherit;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
text-align: left;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
background-color: rgb(204,204,204);
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 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: 100px;
background-color: rgb(204,204,204);
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 0px none #CCC;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #F00;
color: #003;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding-top: 1.2ex;
font-weight: bold;
vertical-align: middle;
padding-bottom: 0.53em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #000;
color: rgb(255,255,255);
text-align: center;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #900;
color: #066;
text-align: center;
vertical-align: middle;
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: 98% 50%;
background-color: rgb(255,0,0);
color: rgb(0,0,51);
/* 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: 98% 50%;
background-color: rgb(204,204,204);
visibility: inherit;
/* 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: 98% 50%;
background-color: rgb(153,0,0);
visibility: visible;
/* 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: 98% 50%;
background-color: rgb(153,153,153);
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Mouse hover drop down menu not shown
recently (about few months ago), i found the profile drop down menu on www.zhihu.com no longer works. i also noticed that other mouse over funtions are disabled too.
oddly, the problem only seems to appear on firefox on my laptop.
other browsers on this computer(ie, chrome) or firefox on my other desktop computer works completely fine. so i don't think it's a website-related issue.
methods tried but didn't help:
turning off hardware accelaeration.
clear cookies.
safe mode.
reset firefox.
migrating profiles and firefox program files from desktop computer to laptop.
completely reinstall firefox.
any idea?
and sorry for my poor english expression, it is a second language and i'm not very good at it :-)This could be related to your new hardware.
In order to be "mobile friendly" some websites may change menu behavior for devices with a touchscreen.
Does your laptop have a touchscreen?
To disable Firefox from telling websites that you have a touchscreen, you can make a change to a hidden setting.
(1) In a new tab, type or paste '''about:config''' in the address bar and press Enter. Click the button promising to be careful.
(2) In the search box above the list, type or paste '''touch''' and pause while the list is filtered
(3) Double-click the '''dom.w3c_touch_events.enabled''' preference and change the value to 0 (that's a zero) and click OK. Here are the options for this setting:
* 0 = disabled
* 1 = enabled
* 2 = auto-detect (default)
To see whether the site behaves differently, you may need to clear cache and cookies for the site.
(1) Bypass Firefox's Cache
Use Ctrl+Shift+r to reload the page fresh from the server.
Alternately, you also can clear Firefox's cache completely using:
orange Firefox button (or Tools menu) > Options > Advanced
On the Network mini-tab > Cached Web Content : "Clear Now"
If you have a large hard drive, this might take a few minutes.
(2) Remove the site's cookies (save any pending work first). While viewing a page on the site, try either:
* right-click and choose View Page Info > Security > "View Cookies"
* Alt+t (open the classic Tools menu) > Page Info > Security > "View Cookies"
In the dialog that opens, you can remove the site's cookies individually.
Then try reloading the page. Does hover work normally again?
A user with an HP all-in-one was not successful with a setting change, and reported that the only way he found to end the problem was to turn off the touch capability in the Windows Device Manager ([https://support.mozilla.org/questions/971084?page=2#answer-522974 post 522974]). I hope that is not necessary in your case. -
Foreign fonts display in character drop down menu
When designing a sign for a customer, I take a photo of the existing signs, place on a new document in illustrator cs6, type text then scroll through the text character drop down menu to match the new sign text to the font that is currently on the customers signs, business card etc.
There are many different types of fonts and I would prefer not to have the adobe system fonts, asian, arabic and other fonts that are not used for my purposes.
Is there a way to remove them from this list.
I have tried deleteing them from the window 7 font manager but they are essential system fonts and it displays a message that some programes will not work if I delete them.
I have tried show/hide in the windows 7 font manager but this has no effect on the fonts displayed in illustrator.
Any help would be appreciated.update...
Seems windows 7 fonts can be set to show/hide for some programs but it does not work in illustrator. I have found a helpful program by Adobe Air called Font Picker which displays only the fonts installed and excludes hidden fonts (windows 7 font manager).
It would be good to have a search facility that has fonts catagorised. There are a few out there where you can tag them but I don't see myself sitting through 35000+ fonts I have collected over the years.
I did install Illustrator CC which has a few added options under the character font drop down menu. It also has a link to Typekit on Adobe Cloud but would you believe it didn't have Calligri which is a very common script font.
Has anyone on this forum found a solution to this before. There are may questions related to this on the web but no answers or feed back. -
CSS Drop down menu; how to align the right edge of drop down and parent menu?
Hello everyone,
I have a drop-down menu that is currently working well.
The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.
I want the menu to "drop" down and to the left, so the right edges are aligned.
I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.
Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.
Thank you!
Here is my code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
.chromestyle ul li{
display: inline;
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;Try this:
.chromestyle{
font-weight: bold;
height: 29px;
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
.chromestyle ul{
border: 0px solid #BBB;
width:100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
.chromestyle ul li{
display: inline;
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
visibility: hidden;
text-align:left;
.dropmenudiv a{
width: auto;
display: block;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 3px;
text-decoration: none;
font-weight: bold;
color: black;
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Maybe you are looking for
-
Is there a way to import movies from my DVDs into iTunes?
I have an ipod Video and I would like to import some of my favorite movies I own on DVD into my ipod to take with me on the road... Is there a way to do this? Please help... Dell Dimension 4550 Windows XP
-
File attachment during Campaign Execution
Hi Experts, In WEBUI marketing we have a standard functionality as when we execute a campaign element the target group data like cutomer number, name e.t.c will be attached as a .CSV file(Excel) in Attachments assignment block based on the attribut
-
I want to know if it's possible that the amount that we define in the line of freight can be add to the subtotal of the invoice in order to affect the tax amount , for example: Subtotal.- 1000 Freight .- 100 Tax .- 110 Total.- 1110
-
DBMS_SQLTUNE always shows statistics are stale in same situations
Hi all, anybody knows why the recommendations of dbms_sqltune ever shows that the statistics of a particular object are stale ?? In same situations dbms_sqltune ends with this result, you calculate statistics like dbms_sqltune recommends (dbms_stats
-
HP Froms can't open with Error" Can't connect to Hyperion Essbase"
Hi ALL, I have just installed HP11.1.2 before. and create a application with demo data. the process progress successfully while it is occured error opening the forms. Error Message can't connect to Hyperion Essbase. while Essbase server it's running