CSS - Menu Issue

http://www.freewebs.com/dmorand/NMI%20Web.htm

That's what I've done so far, but the drop-down menu isn't displaying in IE, but it does in Firefox. Anyone have any ideas?

Also, in Firefox I see a couple of dashes in the top left corner, that I don't see in IE.

Can somebody please look at the following drop-down menu and tell me why it breaks in IE...it works fine in Mozilla/FF...

In IE, the problem is that the sub-menus do not completely appear in front of their parent menus...they should be on top of their parent menus...like i said, it works in FF, so you can switch bewteen browsers to see the difference....

Thanks for any help.

__________________
R.J.
www.mediamogulsweb.com

I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile

Site Link:staging.phantasea.net/cpi/
CSS I added:
Code:

#navigation-menu ul.sf-menu > li > a {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #ffffff;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}

#navigation-menu ul.sf-menu > li > a > span {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}

#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png) top right no-repeat;
    padding: 0 26px 0 0;
}

#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
    padding: 10px 0 10px 0;
}

#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}

ORIGINAL CSS:
Code:

/* Begin Main Navigation Menu */
#navigation-menu {
    position:absolute;
    right:20px;
    top:5px;
    font-size:14px;
    height:40px;
}
.navigation-menu {
    position:relative;
    z-index:22;
}
#main-menu {
    background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
    width: 100%;
    position:relative;
    z-index:101;
    height:56px;
    margin-bottom:-6px;
}
#dropdown-holder {
    display: block;
    position:relative;
}
#navigation-menu > ul {
    padding-top: 7px;
}
#navigation-menu > * {
    padding:0;
    margin:0;
    font-size: 1em;
}
#navigation-menu ul.sf-menu {
    padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
    background:none;
    list-style: none;
    float: left;
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
    cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
    background: url(../images/menu-btn_r.png) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #E8E8E8;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}
#navigation-menu ul.sf-menu a {
    line-height: 1.2em;
    padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
    top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
    top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
    background: url(../images/menu-btn_l.png) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}
#navigation-menu ul.sf-menu > li {
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #FFF;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}

#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #6A6A6A;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}


/* End Main Navigation Menu */

Everything works perfect expect one thing. When a mouse hovered on a link, dropdown links appear. Problem here is when I move my mouse towards the new links, they disappear before I reach them.

Did I explain the problem well? No.
Try the link. Menu at the top here.
http://www.refinethetaste.com/html/


Code:

<style type="text/css">
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/elegant1.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#navigation { float:left; height:26px; width:776px; background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif);
}

#navigation .menu {padding:0; margin:0; list-style:none; font-size:16px;}
#navigation .menu table {border-collapse:collapse; height:0; width:0; margin:0 -4px -1px 0;}
#navigation .menu li {float:left; margin:0 5px;}
#navigation .menu li a {display:block; float:left; color:#FFFFFF; height:26px; text-decoration:none;}
#navigation .menu li a.current {font-weight:bold; border-bottom:3px solid #9d0808; cursor:text;}

#navigation .menu li:hover {position:relative; z-index:100;}
#navigation .menu li a:hover {position:relative; z-index:100; border-bottom:3px solid #aaa;}
#navigation .menu ul {position:absolute; left:-9999px; top:38px; width:140px; padding:0; margin:0; list-style:none;}
#navigation .menu ul li {margin:0;}
#navigation .menu ul li a {width:140px; height:20px; color: #000000; font-size:14px; border:0; text-align:right;}
#navigation .menu ul li a:hover { border:0;}

#navigation .menu ul ul {position:absolute; margin-left:100%; top:0; padding:0; margin:0; list-style:none;}

#navigation .menu :hover ul {right:0; left:auto;}
#navigation .menu :hover ul ul {left:-9999px; width:130px; padding-left:10px; }

#navigation .menu li ul :hover ul {left: 140px; height:20px; right:auto;}
#navigation .menu li ul li ul li a { color:#000000; font-size:12px; text-align:left; }

</style>

Hi all,

Thanks for the interest,

I want to set my menus like the categories in alibaba.com ( the menu of the left side), on mouse over the sub menus should come up in the same way as here.

How can I achieve this ?

Thank you guys

Hello,

I'm building a portfolio for a close friend of mine and I REALLY can't seem to figure out this navigation menu she wants me to make.

I have the menu in place but the drop down is both WAY too far to the right and UNDER the slideshow.

Could anyone kindly show me how to get that stupid thing to appear UNDER the 'Galleries' section and ABOVE the slideshow?

http://saranicolephotography.com/

Thanks!

http://www.yentiming.com/

just play around with the menu on IE7 and you will see what will happen.
i have tried messing around with z-index but i have found no success
any ideas on how to fix this?

Hey everyone,

The page below displays perfectly in both IE6 and Firefox, but in IE7 my navigation disappears and the right navigation in the header is all crunched together.

livedifference dot com slash test slash home

I'm not really a CSS guru, but I've tried clearing floats via tons of methods and adding random things, but nothing seems to work. Any help would be GREATLY appreciated, I really need to get this up and running.

Thanks,

Brad

Hi

I have modified a menu that used tables to now use CSS, it works fine but I can't get the layout to work (I'm learning). Each button has it's own div. I need the menu to go horizontally, not vertically, can anyone help please?

jinx-inc.co.uk/development/menu.html

Css - jinx-inc.co.uk/development/css.txt
Html - jinx-inc.co.uk/development/html.txt

I'm happy to provide whatever's needed if someone requires it to help! Thanks

If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers?
Here's the code for the dropdown ul ul li a:
Code:

#dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}	
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }	
#dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }

Thanks

Hi everyone,

I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php.

At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100.

As of now the site validates on both css and xhtml 1.0 transitional.

I can list any code if needed.

Thanks for any help

Phil

Hello,

I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover.

My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions.

Does anyone know if its possible to anchor a layer to a point from something on a different z-index?

I did a search on the forums here and found a similar question but no responses.

Thanks guys!

I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is he

http://bit.ly/42iVkG

and the menu script I used is he

http://bit.ly/4pvcXj

Thank you.

Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox.

Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible)



I'd like it to appear in firefox the same as IE..

Heres the html code:

Quote:
<div id="Navigation">
<ul>
<li><a href="main.htm"><b>Homepage</b></a></li>
<li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br>
<li><a href="home.html">Cool Sites</a></li>
<li><a href="home.html">My Opinions</a></li>
</ul>
</div>


Css code thats formatting the <div> and its contents.

Quote:
#Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; }

#Navigation ul { list-style: none; margin: 0; padding: 0; border: none; }

#Navigation li { border-bottom: 1px solid #202020; margin: 0; }

#Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; }

#Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; }


I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.>

Thank you for your help