CSS Menu hover issue in IE7

Hi all,
I've created a CSS based drop down menu for this site:
http://www.elizabethgorcey.com.
In IE7 the menus don't drop down. They pop up and cover the parent
item they are supposed to descend from. Can anyone tell me why this
is and how to fix it?
Thanks,
John

On Sat, 19 Jul 2008 01:21:08 +0000 (UTC), "John Ciccolini"
<[email protected]> wrote:
>Hi all,
> I've created a CSS based drop down menu for this site:
>
http://www.elizabethgorcey.com.
In IE7 the menus don't drop down. They pop up
>and cover the parent item they are supposed to descend
from. Can anyone tell
>me why this is and how to fix it?
> Thanks,
> John
Seems to work ok in IE7 for me. But not in IE6 ! ?
works ok in Safari & Opera - and FF of course
I popped the code into Dw and ran the compatibility check and
says
there is a problem with IE6 - Expanding box problem
Googled it - and not sure that is 100% correct - but it might
be a
steer........ ?
minor css issue - which I doubt affects the problem ?
#breastpumpposter {
position: relative;
top: 0px;
padding-top: -3.5em;
margin-left: 20px;
padding-bottom: 10px;
margin-bottom: 20px;
padding-top cannot be negative
~Malcolm~*...
~*

Similar Messages

Spry menu hover issue

I have a vertical spry menu bar and it opens up to the right
over the text on the page.
In Firefox it displays correctly, but in iExplorer, when the
cursor hovers over the drop down menu, it only stays highlighted
and open when the curser is directly over the text in the spry box,
or if there is no text on the page. But when the cursor is over
empty space in the box and there is text on the page behind it, the
box closes.
How do I fix this?

Hello Beth,
The piece of CSS you see there is actually a fix for Internet Explorer 6. It has bug where form elements such as selects will go through divs and other elements, in this case the <ul>'s of the menu bar. To resolve this issue, a iframe is generated and carefully placed under the <ul> elements. This way the form elements will no longer pass through the <ul>'s
If you menu is no where near a form element you could remove the iframe generation code form the javascript and savely remove that related stylesheet rule. But i do not recommend such practices. But that would be the only fix for the validation issue. Well.. Thats not true actually you could apply those styles through JavaScript... So that might actually be another option.
So it all depends on how hefty you weight validations. Validations are guid lines. Because a page doesn't "validate" it doesn't necessary mean the page is doomed and will crash all browser that comes on its path . But clients are usally verry narrow minded. So good luck with that .
So without further ado, the fixes:
- do nothing as it doesn't harm your page, it merly fixes internet explorer.
- removal of the iframe from JS:
line 289, remove:
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
line 317, remove:
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
- move the css to JavaScript:
line 243 find:
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
and add under:
layer.style.position = 'absolute';
layer.style.zIndex = 20010;
layer.style.style.filter = "alpha(opacity=0.1)";
Happy hacking

Any solution to javascript/css menu 'onclick' issue in ios 5.0.1?

I'm a web designer with an issue that seems widespread - but I can't find an solution anywhere online.
Our web site menus worked well in older ios versions - one tap on the main image of a drop-down triggered a rollover & the mouseover behavior and opened the menu, another click or two selected the submenu.
Now, since ios 5, one tap on the main image activates the onclick behavior for that image (actually on the div containing the menu), and launches the url. They work as desired without the onclick. Tried rebooting and clearing caches & data. Happens on ipad/ipod.
I'm prepared to use a different method to write these (jquery, superfish, p7 Magic Menu 2) but I can save lots of time if there's a fix our code that would work.
Anyone solve this yet? No luck trying to use focus, hover or dblclick on the main image.
Here's the sample:
http://net.acpe.org/menufix/menu-home.htm

Solved with this fix posted by Mark Goddard.
http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
I also think it was an update to Mobile Safari that is causing this, not the ios 5 update.

CSS menu hover state

Hi, I'm trying to get to grips with CSS and would like to
create a menu system that in hover state shows different copy for
each menu link.
So far I've managed to achieve this by linking an image to
the a:hover state but I need the copy to be different for each menu
item and I'd like to make it vector text not image.
Can this be done?
My attempt so far;
http://www.ad-one.co.uk/test/index4.htm
Thanks
Chris

Check out this page
http://www.divahtml.com/products/divaGPS/current_menu_location.php
Tun Tun bags of fun skrev:
> Hi, I'm trying to get to grips with CSS and would like
to create a menu system
> that in hover state shows different copy for each menu
link.
>
> So far I've managed to achieve this by linking an image
to the a:hover state
> but I need the copy to be different for each menu item
and I'd like to make it
> vector text not image.
>
> Can this be done?
>
> My attempt so far;
>
http://www.ad-one.co.uk/test/index4.htm
>
> Thanks
>
> Chris
>
>
Kim
http://www.geekministry.com

Spry Menu 2.0 issues in IE7..   yes another one!

I have CS4, and have used the widget browser to create a Spry Menu 2.0 and have imported it to my site. It displays fine in every browser except for IE7. I have been reading a LOT of threads on issues similiar to this one, so I'm prepared to tell everyone I know to upgrade to at least IE8!! However, I would like to fix it if possible. The menu bar is located in an include file and is attached to all my pages through the php function. I have made zero changes to the css code since I imported it into the site.
I also am wondering why there are two css pages for the menu bar.??
Any help would be appreciated..
One of the pages on the site is: michaelandrewshairstudio.com/offers.php
That page is: ( I have taken out some meta tags and content, but the div's are all still in place.) I also deleted some commented tags by accident when I imported it..
<!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>Michael Andrews Hair Salon Offers</title>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBar.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryWidget.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryMenu.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
<link href="CSS/stylesA.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="header">
<div id="navbar">
<?php include("Spry-UI-1.7/includes/SpryMenuBar.php"); ?>
</div>
</div>
<div id="mainbody">
<div id="logo">
</div>
<hr />
<div id="content">
</div>
</div>
<div id="footer">
<div id="footernav">
</div>
<div id="footertext">
</div>
</div>
</div>
</body>
</html>
SpryMenuBar.css
#MenuBar {
background-color:#333;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
            MenuItem, and MenuItemLabel
            at a given level all use same definition for ems.
            Note that this means the size is also inherited to child submenus,
            so use caution in using relative sizes other than
            100% on submenu fonts. */
font-weight: normal;
font-size: 14px;
font-style: normal;
padding:0;
border-color: #999999 #999999 #999999 #999999;
border-width:3px;
border-style: outset outset outset outset;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#333333;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #999999;
border-style: none none none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#cccccc;
background-color:#333333;
padding: 6px 15px 6px 39px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
background-color:#666666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#666666;
color:#cccccc;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #333333;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #333333;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color: #666666;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #666666;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color:#333;
min-width:100%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
     and your personal taste.
     0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
     on MenuItemContainer and MenuItem on the parent
     menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
     the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #666666; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
SpryMenuBasic.css
/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
/* This is the css for a basic Spry 2 MenuBar.
* The first section is basic layout, and should in general not need to be modified.
* The final section of this file specifies images to use for arrows for the menu. These
* are either down or right-pointing as required by horizonatal or vertical layouts. You
* can either replace the referenced images with your own, or you can modify these rules to
* point to your won images.
* These rules are supplemented by those specified in the OAM file for inclusion in the html document,
* or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
/* Resets for ul and li in menus */
.MenuBar .MenuBarView, .MenuBar .SubMenuView {
display:block;
list-style:none;
margin:0;
padding:0;
/*** Layout Rules for Basic Menu ***/
/* Top Level MenuBar
* Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
* The simplest way is to float the widget wrapper
.MenuBar { /* overridden by .MenuBarVertical version of this rule */
float:left;
width:100%;
.MenuBarVertical {
float:left; /* Used to make menubar shirink to fit contents */
width:auto;
/* SubMenus */
.MenuBar .SubMenu {
display:block;
position:absolute;
top:0;
left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
padding:0;
/* First level of submenus - pulls down from horizontal menubar, right from vertical */
.MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
top:100%;
left:0px;
.MenuBarVertical .SubMenuVisible {
top:0px;
left:100%;
/* All submenus below level 1. All pullout to the right */
.MenuBar .SubMenu .SubMenuVisible {
display:block;
position:absolute;
top:0px;
left:100%;
/* MenuItems, MenuItemLabels, and MenuItemContainers */
.MenuBar .MenuItem {
display:block;
text-decoration:none;
.MenuBar .MenuItemLabel {
display:block;
.MenuBar .MenuItemContainer {
position:relative;
white-space:nowrap;
float:left; /* overridden by .MenuBarVertical version of this rule */
display:block;
margin:0;
padding:0;
.MenuBarVertical .MenuItemContainer {
float:none;
.MenuBar .SubMenu .MenuItemContainer {
float:none;
/* Layout Rules needed by IE6 - excluded from other browsers */
.SpryIsIE6 .SubMenu .SubMenu {
width:100px;
height:1%;
.SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
width:auto;
/* End Layout section */
* Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
.MenuBar .MenuItemLabel{
background-image:none;
/* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
.MenuBar .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownGrey.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownWhite.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
/* IE6 rules for Arrows */
.SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;

I love your subject line
Spry Menu 2.0 issues in IE7..   yes another one!
It is us as designers/developers that need to create websites for all current browsers. No sense in blaming the browsers, although in this case we could blame Spry Menu 2.0.
Problem with that is that Spry Menu 2.0 has been successfully tested in all modern browsers.
This leaves us with just one possibility, the designer/developer has erred somewhere along the line. After having checked the support files (JS and CSS) and looked at the markup, we now go to the constructor and see the following
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
    widgetID: "MenuBar",
    widgetClass: "MenuBar MenuBarLeftShrink",
    insertMenuBarBreak: true,
A comma after the last value.
I also am wondering why there are two css pages for the menu bar.??
One is the standard CSS for the menubar and under normal circumstances, should not be touched; the other is for the convenience of the designer/developer so that he/she can tweak the menubar to suit. If you wish, you can combine both. In all cases, keep in mind that the CSS for the standard (basic) menubar should come first, so that the other CSS can override the first.
This needs to be corrected in your document
Gramps

CSS Menu issues

hi.
Can anyone help tell me why my menu is displaying like shown in the picture?
* I want About Us and Services to be the same height as home and contact
* The sub menus are all weird, as you can see there are three additional items that should be showing but they end up as little grey boxes. There are no sub sub menus.
I have naughtily copied and chopped a menu from another site I did a while back so is probably random bits in there (sub sub menu bits). I don't do sites very often as I am not very good (as you can tell) and have been messing for 90 mins now and getting hardly nowhere so any pointers would be good.
My site will be a fluid width so it adapts to different devices (to a fashion!)
CSS:
@charset "utf-8";
#nav, #nav ul{
    font:Arial, Helvetica, sans-serif;
    font-size:95%;
    align:center;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    /*line-height:30px;*/
    width: 99%;
    Z-index:1000;
    border: 1px solid #000;
#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    color:#000;
    text-decoration:none;
    background:#E0E0E0;
    z-index:1000;
    padding: 8px 5px;
    line-height: 30px;
#nav a:hover{
    background:#CCC;
    color:#000;
    z-index:1000;
#nav li{
    float:left;
    position:relative;
    width:24%;
    background: #CCC;
    z-index:1000;
    text-align: center;
    border: 1px solid #000;
#nav ul {
    position:absolute;
    width:25%;
    top:30px;
    left:-1em;
    display:none;
    z-index:1000;
#nav li ul a{
    width:12em;
    float:left;
    z-index:1000;
#nav ul ul{
    top:auto;
    height:inherit
    z-index:1001;
#nav li ul ul {
    left:12em;
    margin:-1px 0 0 10px;
    z-index:1001;
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
Thanks in advance.

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>CSS Menu</title>
<style>
    padding:0;
    margin:0;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
nav ul {
    list-style-type:none;
    height:0px;
    min-width:440px;
nav li {
    width:25%;
    background-color:gray;
    float:left;
    min-width:100px;
nav a {
    display:block;
    height:100%;
    width:100%;
    padding:5px 8px;
    text-decoration:none;
    color:white;
nav ul li ul {
    display:none;
nav ul li:hover {
    background-color:#B7B7B7;
nav ul li:hover ul {
    display:block;
nav ul li ul li {
    float:none;
    width:100%;
</style>


<title>Kutbax Arboricultural Contractors</title>



<style type="text/css">

</style><link href="../kutbaxmenu.css" rel="stylesheet" type="text/css" />
<link href="../kutbaxmenu.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColLiqCtrHdr">
<div id="header">
    <p class="HEADER"><img src="../Kutbax Logo.jpg" width="100" height="97" hspace="10" vspace="5" align="left" /></p>
    <p class="HEADER">KUTBAX</p>
    <p class="HEADER"><strong> ARBORICULTURAL CONTRACTORS</strong><strong></strong></p>
    <p class="a2">Telephone: 01827 874818 Email: <a href="mailto:[email protected]">[email protected]</a></p>

</div>
</head>
<div><body>
<p> </p>
<div> <nav>
    <ul>
      <li><a href="../index.html">Home</a></li>
      <li><a href="#">About Us</a>
        <ul>
          <li><a href="../company.html">Company</a></li>
          <li><a href="../insurance.html ">Insurance</a></li>
          <li><a href="../policies.html ">Policies</a></li>
          <li><a href="../machinery.html">Machinery</a></li>
          <li><a href="../workscompleted.html ">Works Completed</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="../treesurgery.html">Tree Surgery</a></li>
          <li><a href="../japaneseknotweed.html ">Japanese Knotweed</a></li>
          <li><a href="../siteclearance.html ">Site Clearance</a></li>
          <li><a href="../treeplanting.html">Tree Planting</a></li>
        </ul>
      </li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
    </nav>
</div>

<div id="mainContent">
    <h1> Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    
</div>

<div id="footer">
    <p align="center"><span class="bottomtext">© Copyright 2014 - Kutbax Arboricultural Contractors Ltd - UK Reg No. 06475048 -   All Rights Reserved<br />
Kutbax House, 134 Hurley Common, Hurley, Atherstone, CV9 2LR</span></p>
    <div align="center">
      
    </div>
</div>
</div>
</body>
</html>

Css menu on hover is wrong height

Hi Everyone,
I usually use spry so not versed in building a CSS menu but thought I'd give it a go on this simple site. I have a full width 1024 bar. No dropdowns. A vertical line between central menu items. The bar needs to have a fade from left to right so I have put this as a backgroundimage div. So far so good. Created my menu items and after much trial and error managed to get the positioning just about right, and the hover changes right. BUT, when you hover, the background needs to change to white background (so no longer looking at the gradient bar beneath it), and text to blue. Works perfectly EXCEPT that the size of the 'white' over is bigger (rises above and below the div) and I am trying to get it to be the same height as everything should be the same.
I have tried putting a height; attribute on everything but it makes no difference. The bar is 41px high. Everything else should also be 41px high. I added a 10px padding which worked in lowering the text in the bar to be more central, but I don't think this has caused the problem I'm getting as that was there before and nothing I try seems to make it size correctly.
I know it's somethign simple that someone could fix in a jiffy and hoping you're out there! Many thanks.
Page is displayed here http://www.charlieapple.co.uk/hamilton/index2.html
css is here
@charset "utf-8";
#wrapper {
    background-color: #CAD0D5;
#container {
    background-color: #CFF;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
#banner {
    height: 179px;
    width: 1024px;
#leftbody {
    padding-top: 20px;
#navbar {
    background-image: url(images/blue-grad-bar.png);
    height: 41px;
    width: 1024px;
#navigation {
    font-family: Calibri;
    background-image: url(images/blue-grad-bar.png);
    text-decoration: none;
    color: #FFF;
    padding-top: 10px;
    height: 31px;
#navigation ul
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: 41px;
#navigation ul li
    list-style-type: none;
    display: inline;
    text-decoration: none;
    height: 41px;
#navigation ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    height: 41px;
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
#navigation a:hover {
    color: #354777;
    text-decoration: none;
    background-color: #FFF;
    height: 31px;
#navigation li:before {
content: "      |       ";
#navigation li:first-child:before {
content: none;
#leftcol {
    float: left;
    width: 640px;
    margin-left: 27px;
#rightcol {
    background-color: #CCF;
    float: right;
    width: 307px;
    margin-right: 24px;
    margin-left: 26px;
#pagename {
    font-family: Cambria, "Bell MT";
    font-size: 30px;
    color: #354777;
    width: 640px;
    margin-top: 10px;
    border-bottom-width: thick;
    border-bottom-style: dotted;
    border-bottom-color: #354777;
    padding-bottom: 10px;

Thanks Nancy O, I've made this change and it has fixed the height problem but now I have a new problem in the 'home' hover is completely weird! I'm copying the css below so you can see the changes I've made that you suggested and previously to that made the adjustments that Murray suggested. Could you also tell me if it's possible to get the hover for each button so the white stretches from the vertical lines left-right? many thanks.
@charset "utf-8";
#wrapper {
    background-color: #CAD0D5;
#container {
    background-color: #CFF;
    width: 1024px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
#banner {
    height: 179px;
    width: 1024px;
#leftbody {
    padding-top: 20px;
#navbar {
    background-image: url(images/blue-grad-bar.png);
    height: 41px;
    width: 1024px;
#navigation {
    font-family: Calibri;
    background-image: url(images/blue-grad-bar.png);
    text-decoration: none;
    color: #FFF;
#navigation ul
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: 41px;
    overflow:hidden;
#navigation ul li
    list-style-type: none;
    height: 41px;
    float:left;
#navigation ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    line-height: 41px;
    padding: 41px 20px;
#navigation a:hover {
    color: #354777;
    text-decoration: none;
    background-color: #FFF;
    height: 31px;
#navigation li:before {
content: "      |       ";
#navigation li:first-child:before {
content: none;
#leftcol {
    float: left;
    width: 640px;
    margin-left: 27px;
#rightcol {
    background-color: #CCF;
    float: right;
    width: 307px;
    margin-right: 24px;
    margin-left: 26px;
#pagename {
    font-family: Cambria, "Bell MT";
    font-size: 30px;
    color: #354777;
    width: 640px;
    margin-top: 10px;
    border-bottom-width: thick;
    border-bottom-style: dotted;
    border-bottom-color: #354777;
    padding-bottom: 10px;

CSS Menu - Dropdown list help.

Hi guys,
I am re-creating a website for a friend and I am currently finding coding the CSS Menu difficult.
Here is MY version of the website:
http://abacusmortgages.co.uk/index.html
Here is the current version I am trying to copy:
http://sdhmarketing.co.uk/
Pages: Our client types and What do you need have special css menu dropdown lists which come up when you hover over the button.
Here is the CSS code I have so far:
#holding ul {
          margin: 0px;
          padding-left: 0px;
          list-style-type: none;
          font-family: Arial;
          font-size: 14px;
          font-weight: bolder;
          color: #506F1A;
          background-image: url(images/navbg.jpg);
          position: absolute;
          left: 0px;
          top: -3px;
#holding ul li {
          float: left;
          width: 200px;
          margin: 0px;
          font-weight: bold;
#holding ul li a {
          font-family: Arial;
          font-size: 11pt;
          color: #506F1A;
          text-decoration: none;
          background-color: Transparent;
          text-align: center;
          display: block;
          padding: 5px;
#navigation {
#holding ul li a:hover {
          color: #FFF;
          background-color: #333;
          font-weight: bolder;
          font-size: 14px;
.menu {
Here is the HTML I am using:
<ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="ourclienttypes.html">OUR CLIENT TYPES</a></li>
    <li><a href="whatdoyouneed.html">WHAT DO YOU NEED?</a></li>
    <li><a href="casestudies.html">CASE STUDIES</a></li>
    <li><a href="managementteam.html">MANAGEMENT TEAM</a></li>
</ul>
If anyone could help it would be much appreciated.
Thanks all!

You, essentially, have an issue with float: left;
Here's the deal, when you float list items left, they'll line up to the left, even though your navigation is centered.
They have also done this website in a manner that does not line up with what the W3C considers a standard for websites, but that's another issue.
Here's their HTML:
<!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>wanted</title>
<link href="wanted.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="head">
<div style="width:100%; float:left;">
    <div id="name2"></div>
    <div id="name1"></div>
</div>
<div id="slogan"></div>
</div>
<div id="top"><a class="topsel1" href = "http://sdhmarketing.co.uk/index.php">HOME</a><a class="top1" href = "http://sdhmarketing.co.uk/who.php">OUR CLIENT TYPES</a><a class="top1" href = "http://sdhmarketing.co.uk/what.php">WHAT DO YOU NEED?</a><a class="top1" href = "http://sdhmarketing.co.uk/case_studies.php">CASE STUDIES</a><a class="top1" href = "http://sdhmarketing.co.uk/team.php">MANAGEMENT TEAM</a> </div>
<div id="maintop"></div>
</body>
</html>
Now, here's the problem. They have one line with all of their navigation. So they started out with (on the same line):
HOME OUR CLIENT TYPES WHAT DO YOU NEED? CASE STUDIES MANAGEMENT TEAM
Then, they selected each menu item and gave it a style and a link. That's pretty bad practice, because how do you manage that? Also, how do blind people figure out it's a navigation? Also, what if you want sub-menus?
But you like how it's pretty and I respect that.
This is how to really do it:
HTML:
<div id="top">
<ul>
          <li>HOME</li>
    <li>OUR CLIENT TYPES</li>
    <li>WHAT DO YOU NEED?</li>
    <li>CASE STUDIES</li>
          <li>MANAGEMENT TEAM</li>
</ul> 
</div> 
You see here, I have an Unordered List for my navigation. Because it's an unordered list, I can easily add new items, add sub-lists (drop-down menus) and really make this puppy sing. Unfortunately, when you look at this with no style, you'll see something pretty boring and it won't be horizontal. We change all of that in the style sheet.
First, before we do anything else, we'll make everything into a link. We can change those links later on when we build the rest of our pages.
<ul>
          <li><a href="#">HOME</a></li>
    <li><a href="#">OUR CLIENT TYPES</a></li>
    <li><a href="#">WHAT DO YOU NEED?</a></li>
    <li><a href="#">CASE STUDIES</a></li>
          <li><a href="#">MANAGEMENT TEAM</a></li>
</ul> 
An hash "#" is a link that simply calls the page you are on. It's a bona-fide link and it will create what you want.
Now, we need to set up styles.
Let's set up the list by getting rid of bullet points (the default) and give it a little padding:
Make a new style sheet, call it how-to.css. It will be blank so we'll add a style. We will need to link to it from our HTML page, so add the following to the <head> section:
<link href="how-to.css" rel="stylesheet" type="text/css" />
Now, we make a blank CSS page and we call it how-to.css. Put it in the root of your defined site in Dreamweaver for now. And we'll define list objects within the div they naked top:
#top li {
          display: inline;
          list-style-type: none;
          padding-right: 20px;
Now, you'll see that our list is suddenly horizontal! Cool! But links are blue by default and underlined. Did we want that? No. So let's style links:
#top a {
          float:left;
          padding: 5px 20px 2px 20px;
          font-size: 13px;
          height:23px;
          color:#506F1A;
          display: block;
          letter-spacing: -0.2px;
          font-weight: bold;
          text-decoration: none;
Now, I'm borrowing heavily from their styles here.
But we have to set up the #top framework and here's that (it should go before everything else in your style sheet)
#top {
          width:990px;
          padding:0px 10px 0px 0px;
          height:35px;
          margin:0px 0 0 0;
          background-image: url("navbg.jpeg");
          background-repeat: repeat-x;
Now, it's just about done. They used an Arial typeface and the default is Times Roman. Let's add a little more to the #top id:
Now let's make backgrounds change when we hover and when we have one selected.
#top a:hover {
          background-color: #444;
          color: #fff;
And make a background behind the page you are on, with a hover:
.selected {
          background-color:#777777;
          color:white !important;
.selected a:hover {
          background-color: #444;
          color: #fff;
Now you're pretty much done.
Here is how to style the entire thing in CSS:
#top {
          width:990px;
          padding:0px 10px 0px 0px;
          height:35px;
          margin:0px 0 0 0;
          background-image: url("navbg.jpeg");
          background-repeat: repeat-x;
          font-family: Arial, Helvetica, sans-serif;
#top li {
          display: inline;
          list-style-type: none;
          padding-right: 20px;
#top a {
          float:left;
          padding: 10px 20px 5px 20px;
          font-size: 13px;
          height:26px;
          color:#506F1A;
          display: block;
          letter-spacing: -0.2px;
          font-weight: bold;
          text-decoration: none;
          margin-top: -5px;
#top a:hover {
          background-color: #444;
          color: #fff;
.selected {
          background-color:#777777;
          color:white !important;
.selected a:hover {
          background-color: #444;
          color: #fff;

CSS Menu incorporated into Image. How is it done?

Hello everyone I hope your weekend if proving fruitful!
I have a little problem with Dreamweaver. Basically it is this:
I have created a banner in Photoshop with a gorgeous artwork image (I am pleased with it to be honest!). To add to its aethetic appeal I have decided to incorporate a CSS Menu into it. Please note the menu will not be at the top (in other words ABOVE the image) or below the image.   I am wanting to position it around 200 pixes from the top.
The technique I have used so far is this:
Create image in Photoshop
Use the slice tool to slice the image and slice the part where I want my CSS Menu to go
Save as "Html and images"
Import into Dreamweaver and remove the part that has been sliced for the navigation bar
Insert a div tag at insertion point and apply my bar
Please note I am okay at putting the html coding and css into the right place (I think!) but the problems I am having is that it seems disjointed and the menu bar is not fitting seamlessly without gaps into the image.
Would a possible solution be to slice up the image save only as "images" (no html) and then incorporate parts of the image (e.g. top, middle, bottom) into div tags and incorporate the menu bar that way?
Please note I am new to this so please don't laugh too hard at my stupidity!
I'll catch you later!
Thank you
Jake

No need to slice the banner image. Simply put your banner in the background with CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
/**CSS Reset to fix the box model**/
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    background:#CCC;
    font-size: 100%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding: 0;
    width: 1000px; /*adjust width in px or % as req'd*/
    margin: 0 auto;/**with width, this is centered**/
header h1, header h2 {
    font-size: 26px;
    color: #999;
    display: inline;
    text-align: right;
    padding: 2%
/**TOP MENU**/
nav {
    min-height: 200px; /**same as banner height**/
/**banner in the background**/
    background: #198EBA url(http://placehold.it/1056x200/198EBA/FFFFFF&text=Banner.jpg) no-repeat;
nav ul li {
    list-style: none;
    margin-top: 150px; /**adjust where desired**/
nav li {
    display: inline-block;
    margin: 0 2%;
    font-size: 20px;
nav li a {
    text-decoration: none;
    color: #CCCEEE;
nav li a:hover,
nav li a:active,
nav li a:focus {
    text-decoration:underline;
    color:#0F9}
</style>
</head>
<body>

<header>
<h1>SiteName</h1>
<h2>Some Pithy Slogan</h2>
</header>


<nav>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>

</body>
</html>
Nancy O.

Help needed with CSS menu please

Hello
Could someone give me a hand with a CSS menu I am struggling
with please?
I want each of the blue menus to have a black border around
it (so 4 borders in total). And how do I make each menu have a
closer gap? I need them squashed up a little bit more vertically.
The code is as follows -
<style type="text/css">
#ddblueblockmenu{
width: 179px;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: 0 solid #FFFFFF;
border-left: 1px solid #FFFFFF;
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 75% 'Trebuchet MS', 'Lucida Grande', Arial,
sans-serif;
border: #000000;
#ddblueblockmenu li a{
display: block;
padding: 5px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and
margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 11px solid #FFFFFF; /*change border gap size
here*/
/*border-left: 1px solid #1958b7;
* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and
margins*/
#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #FFFFFF;
font: bold 60% 'Trebuchet MS', 'Lucida Grande', Arial,
sans-serif;
</style>
<body>
<div id="ddblueblockmenu">
<ul>
<li><a href="whoarewe.htm"><strong>What We
Offer</strong></a></li>
<li><a
href="guidelines.htm"><strong>Professional
Guidelines</strong></a></li>
<li><a
href="workshops.htm"><strong>Workshops</strong></a></li>
<li><a href="contactus.htm"
style="border-bottom-color: white; font-weight:
bold;">Contact</a></li>
</ul>
</div>
</body>
</html>
Any help is very greatfull appreciated!!
Tom

"Gary White" <[email protected]> wrote in message
news:[email protected]..
> On Tue, 23 May 2006 11:42:13 +1000, ".: Nadia :. ACE :."
> <[email protected]> wrote:
>
>>If you want a border the same color around the whole
menu, you can use the
>>short-cut method:
>>
>>border { 1px solid #FFF;}
>
>
> Uh ...
>
> #ddblueblockmenu{
> width: 179px;
> border: 1px solid #fff;
> }
>
um... that's what I meant... the OP had all four sides styled
separately,
with 0 for one side... but mentioned he wanted a border on
all sides....
hence my arrow pointing out the side that had 0 for border
and what could
be used as a shortcut method of styling the border....
Maybe my post wasn't exactly clear ;-)
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html

Center css menu

I have a horizontal CSS menu with dynamic drop down sub
menu's
In DW design view it is centered, but when previewed in IE it
is justified
left.. I need to center it on the page. Please Help, where am
I going wrong.
Here is the code:
<script type="text/javascript">

</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: white;
font: 12px Arial, Helvetica, sans-serif;
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
#menu {
left: auto;
z-index:100;
right: auto;
width: 600px;
margin-right: auto;
margin-left: auto;
#menu dl {
float: left;
width: 80px;
margin: 0 1px;
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
#menu dd {
border: 1px solid gray;
#menu li {
text-align: center;
background: #fff;
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
#menu li a:hover, #menu dt a:hover {
background: #eee;
a {text-decoration: none;
color: black;
color: #222;
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:subMenu();"><a
href="">Menu</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu1');">Menu
1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
<li><a href="#">Menu 1.4</a></li>
<li><a href="#">Menu 1.5</a></li>
<li><a href="#">Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu2');">Menu
2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu3');">Menu
3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:subMenu('smenu4');">Menu
4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2</a></li>
<li><a href="#">Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
Jeff

thank you very much
Jeff
"z7server" <[email protected]> wrote in
message
news:fcc55u$hf1$[email protected]..
> Hi, you should add to body style:
> text-align: center;
> it will work,
> Titti
>
http://textures.z7server.com/

CSS Menu drop down part not working for ie8 and flashing shut on iPhone 5 browser

My CSS drop down menu will not show up in ie8 and flashes then shuts on iPhone 5 browsers (responsive design)..using code from a themeforest template. I am using CSS (HTML only) in the BC menu system. without further adieu here is the code.
HTML (I removed the BC javascript)______________________
<div id="navigation">
<ul>
<li><a href="/index.htm">Home</a></li>
<li><a href="/about">About</a>
<ul>
<li><a href="/leadership">Leadership</a></li>
<li><a href="/giving">Giving</a></li>
<li><a href="/careers">Careers</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>
</ul>
</div>
CSS______________________
#navigation {
float: right;
#navigation ul, #navigation li {
list-style:none;
padding:0;
margin:0;
display:inline;
#navigation ul li{
float:left;
position:relative;
#navigation ul li a {
font-family: Arial, sans-serif;
display: inline-block;
color: #888;
padding: 40px 6px 10px 6px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
#navigation ul li a:hover{
border-bottom: 3px solid #555;
#navigation ul ul {
opacity: 0;
margin: -3px 0 0 5px;
filter: alpha(opacity=0);
position: absolute;
top:-99999px;
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 130px;
margin: 0 16px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
#navigation ul ul ul {
position:absolute;
top:-99999px;
left:100%;
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
#navigation ul ul ul li a {
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {
border-bottom: 1px solid transparent
#navigation ul ul ul li:last-child a {
border-bottom: 1px solid transparent !important
#navigation ul li:hover>ul{
opacity: 1;
position:absolute;
top:99%;
left:0;
#navigation ul ul li:hover>ul{
position:absolute;
top:0; left:100%;
opacity: 1;
z-index:497;
background: #fff border: 0;
#navigation ul li:hover > a {
color: #444;
#navigation ul ul li:hover > a {
border-top: 1px solid transparent;
color: #444;
#current {
font-weight: bold !important;
color: #444 !important;
border-bottom: 3px solid #555 !important;

Well to show the menu it runs off opacity, Opacity is not cross browser and IE8 as you noticed will not work with it.
This menu method of a CSS menu is also not mobile friendly.
You will need the MS filters to work in older IE's
http://css-tricks.com/snippets/css/cross-browser-opacity/

Why can't I use the function of menu item 'issue delivery output'?

why can't I use the function of menu item 'issue delivery output' in main screen of delivery note?
And at the same time I can't use the button of printing in main screen of delivery note.
the main screen of delivery note I mean above is in screen of maintaining shipping data instand of the first screen of VL02N.
TKS in advance.

Hi,
Because delivery will be having header level output and item level output. So if u try to print through main screen then system will not know whether it is header related or item related. That is the reason it is only print output at header level or item level but not in main screen.
I think u may have doubt like how billin will be issued output through Main screen. Because for billing both header and item level data are same..
Regards
Sankar

Menu Resolution Issues

I've been working on this DVD Menu forever for our first feature film, DVD's have to go into produciton today so Ive been working on getting the master DVD out to our duplicator. Can someone help me with my menu resolution issues I am having?
I've sent my menu from photoshop with interactive buttons, both the buttons and the text look great on my preview file, but after burning to dvd the menu looks low res and muddy. is there something I'm doing wrong?

is there something I'm doing wrong?
It would help if we knew the various settings. What are the project default transcode settings? That is what is used for menus. Motion menus? What is the pixel size and par of the menus.
Button highlights by the DVD spec only allow 2 bit indexed color. Adding effects does not work.
You might post a screenshot from photoshop with the layers twirled open.

In the spry css menu, how do i know what does what?

I have two questions,
(1) In the spry css menu, is it just a case of trial and error to find out what each one does or is there a recognisable freature of each line to tell me what each one does, there are so many of them and most of them are alike. I cant help thinking there is a simple way of identifying what each one does without having to search around in the dark until i stumble on the right one that dose what i am trying to tweak in the appearance of the menu bar.
(2) When I am inserting the data for each of the navigation links when i first insert the spry menu I.E.... HOME...ABOUT...COURSES....CONTACT and the list items under "COURSES" link successfully to each page when clicked in the browser. When i click the "HOME" button, a drop down menu of the navigation options ( HOME...ABOUT...COURSES...CONTACT) appears under it. How do I eliminate this when i insert the spry menu bar so it does not appear in the browser.

Have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Have proper markup.
Although the above are true answers to your questions, I have reason to believe that it will not satisfy you. Remember that these are user to user forums and that we do not have much time to spare. We can answer most specific questions, but do not have the time to answer generic questions to their fullest extent.
What I am trying to say is, please supply a link to your site with a specific question and we will help where we can.
Gramps

CSS Menu hover issue in IE7

Similar Messages

Maybe you are looking for