Learn VBA & Macros in 1 Week!

CSS - Ie7, Tabbed Menu Issue

Full Excel VBA Course - Beginner to Expert

Ie7, Tabbed Menu Issue	View Content

Hi!

Could you please help me to fix my menu in IE7.

You can see the problem on my site. But actually I don't know how to add an url he
The code is:

padding:0;
}
#menu ul#layer1 li {
background:transparent url(/site_media/images/left.png) no-repeat scroll left top;
float:left;
margin-left:6px;
padding-bottom:6px;
padding-left:6px;
padding-top:4px;
}
#menu ul#layer1 li span {
background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top;
margin-right:6px;
padding-bottom:6px;
padding-right:6px;
padding-top:4px;
}
#menu li a {
background-color:#BF1E2D;
color:#FFFFFF;
padding:4px 35px 6px;
text-decoration:none;
}
#menu ul#layer1 li#current span {
background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top;
}
#menu ul#layer1 li#current {
background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top;
}
#menu ul#layer1 li#current a {
background-color:#E3E3E3;
color:#BF1E2D;
}

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Rounded-corner Tabbed Menu Bar

Tabbed Navigation Problem

Css Tabbed Navigation Part 2

Tabbed Menus - Rollover Descriptions

Css/jquery: How To Hide Tabbed Slide-out?

Sliding Doors For Tabbed Nav - Problem

Issue With Drop Down Menu

Css Menu Positioning Issue

Drop-down Menu Issue In Ie

Menu Layout Issue

Css Drop-down Menu Issue

Navigation Menu Issue

Popup Menu Issue

Css Menu Overlapping Ie7 Issue

Menu Rollover Issue

Dropdown Menu Issue With Ie

Dropdown Menu Issue

Menu Display Issue In Ie7

Learn VBA & Macros for Excel in 1 Week!

Rounded-corner Tabbed Menu Bar

Similar Tutorials

I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help.

Kate

CSS CODE:

#tabs8 {
float:left;
width:100%;
background:#FCF1F6;
border-bottom:4px solid #E276A7;
overflow:hidden;
position:relative;
}
#tabs8 ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#tabs8 ul li {
display:block;
float:left;
list-style:none;
margin:0 0 0 1px;
padding:0px 3px;
position:relative;
right:50%;
}
#tabs8 ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 0px;
background:url("tableft8.gif") no-repeat left top;
text-decoration:none;
line-height:1.3em;}
#tabs8 a span {
background:url("tabright8.gif") no-repeat right top;
padding:3px 10px;
color:#333;
line-height:1.3em;}

#tabs8 ul li a:hover {
background:#369;
color:#fff;
}
#tabs8 ul li a.active,
#tabs8 ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}-->

HTML CODE:

<div id="tabs8"><ul>
<li id="current">
<div align="center"><a href="index.html"><span>Home</span></a></div>
</li>
<li>
<div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div>
</li>
<li>
<div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div>
</li>
<li>
<div align="center"><a href="gallery.html"><span>Gallery</span></a></div>
</li>
<li>
<div align="center"><a href="blog.html"><span>Blog</span></a></div>
</li>
<li>
<div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div>
</li></ul></div>

Tabbed Navigation Problem

Similar Tutorials

Hi,

I really need help with something!... I'm currently designing a website, with a verticle tabbed navigation bar (using CSS & Javascript). I need it so that when the user hovers over a tab, the content related to that tab, displays until another tab is hovered over.

At the moment, when ever you move the mouse into the content area for a certain tab, the content disappears and goes back to the default 'Welcome' layer underneath. But the content layers will have links in them, and this need to be 'active', as it were.

Please take a look (I would post a link, but I'm new here... )

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript"><!--
function showLayer(layerName, shadowLayerName)
{
if (document.getElementById) // Netscape 6 and IE 5+
{
var targetElement = document.getElementById(layerName);
var shadowElement = document.getElementById(shadowLayerName);
targetElement.style.top = shadowElement.style.top;
targetElement.style.visibility = 'visible';
}
}
function hideLayer(layerName)
{
if (document.getElementById) {
var targetElement = document.getElementById(layerName);
targetElement.style.visibility = 'hidden';
}
}
// -->
  </script>
  
<style type="text/css"><!--
.buttonBar
{ width:125px; padding: 0; margin: 0;
}
.shadow
{
position: relative; visibility: hidden;
}
.button
{
background:width:125px; height: 100px;
}
.bg {display: block; width:125px; height: 100px;}
.bg#about:hover {background:url(...) no-repeat;}
.bg#destinations:hover {background:url(...) no-repeat;}
.bg#cruiselines:hover {background:url(...) no-repeat;}
.bg#specialoffers:hover {background:url(...) no-repeat;}
.bg#about:focus {background:url(...) no-repeat;}

.information
{
visibility: hidden; position: absolute; padding: 0; margin: 0; background-color: #891344; height: 400px; width: 575px;}

body {
	text-align: center;
	min-width: 700px;
}

#content {
	margin:0 auto;
	width:700px;
	text-align: left;
}

-->


  </style>
</head>


<body>

<div id="content">

  <div id="header" style="width:700px; height: 110px; text-align: right;"><img src="..." width="171" height="100"></div>

<div class="buttonBar">

<div style="height: 400px; width: 575px; position: absolute; margin-left:125px; border: #891344 1px solid; ">
<img src="...">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent non elit. Donec porttitor. Ut in ligula. Mauris tortor. Vivamus at odio. Curabitur rhoncus vulputate neque. Praesent elit sapien, pellentesque non, adipiscing vel, pulvinar consectetuer, ante. Morbi semper pede ut nisl. Nam porttitor fermentum nisl. Mauris viverra malesuada neque. Vivamus aliquam pharetra ligula. Suspendisse quis orci et velit pharetra bibendum. Aenean turpis. Donec vel ipsum. Vivamus pharetra. Aliquam ut turpis non erat sagittis tincidunt.</p>
<p>Nam pellentesque egestas libero. Duis lobortis. Mauris egestas luctus urna. Nunc venenatis lectus in quam. Nulla gravida sem at massa. Quisque tortor. Donec id dui quis justo porta fermentum. In iaculis lacus non tellus. Morbi nunc enim, mattis eu, sollicitudin vel, placerat vel, magna. Pellentesque volutpat. Nam mi.</p>

</div>

<div style="position: absolute; width: 575px; height: 400px; margin-left: 125px;  border: #891344 1px solid;">
      <div id="shadowLayer" class="shadow"></div>

<div class="infoArea">
</div>

<div>
<div id="HoverArea1Info" class="information" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>

</div>

<div id="HoverArea2Info" class="information" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>

</div>

<div id="HoverArea3Info" class="information" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>

</div>

<div id="HoverArea4Info" class="information" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>

</div>

</div>

</div>

<div style="position: absolute; height: 400px; width: 125px; background:url(...) no-repeat; border: #891344 1px solid;">

<div class="button" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<a href="about.phtml" class="bg" id="about">
</a></div>

<div class="button" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')" >
<a href="destinations.phtml" class="bg" id="destinations">
</a></div>

<div class="button" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')" >
<a href="cruise_lines.phtml" class="bg" id="cruiselines">
</a></div>

<div class="button" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')" >
<a href="special_offers.phtml" class="bg" id="specialoffers">
</a></div>

<div id="footer" style="width:700px; height: 20px; text-align: right;">

        </div>

</div>

</div>


</div>

</body>
</html>

There must be some way to adapt the code already used, to do what I want. Where am I going wrong and what do I need to do??

Any help would be much appreciated!

Many thanks,
Britcanuck.

Css Tabbed Navigation Part 2

Similar Tutorials

Thanks to Kravvitz I was able to get the first version of this system up and running, but I didn't like the plain tabs so I switched them out with tabs of my own and also a background image (instead of just a color) for the subnav bar.

I am having trouble lining the tabs up though so they have 1 or 2 px spaces between them and the text is centered on them. (I'm trying to right align the tabs). Also in IE the on tab merges with the subnav bar as it should (so the gradiant looks seemless) but in Firefox it does not...

The images are he

http://yourthreshold.com/downloads/nav_background.gif
http://yourthreshold.com/downloads/..._background.gif
http://yourthreshold.com/downloads/..._background.gif

The code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
/*
passes tests in Firefox, IE5.5+/Win, Netscape 6+, and Opera 7+
IE5.0/Win just isn't handling the z-indexes correctly.
*/

/* Menu */
body {
  color: #333;
  background-color: #fff;
  padding: 20px 0 0 20px;
  margin:0;
  font-size: 90%;
}
body,a,* {
  font-family: helvetica, arial, geneva, lucida, sans-serif; 
}

h1 {
  font-size:1.5em;
  font-weight:normal;
  margin:1em 0;
}

ul#topnav {
  margin:1px 0 10px;
  padding: 0 0 0 12px;
  list-style-type: none;
  border: 0 none;
  position: relative;
  left:-50px;
  width: 55em;
} 
/* \*/
* html body {
  font-size: 85%;
}
* html ul#topnav {
  left: 0;
}
/* */
@media screen and (min-width: 0px){
  ul#topnav {
    left: -33px;
  }
}


#topnav li {
  display: block;
  margin: 0;
  padding: 0;
  float:right;
}
  
#topnav a {
  display:block;
  color:#444;
  text-decoration:none;
  background: url(images/nav_background.gif) no-repeat;
  margin:0;
  text-align: right;
  padding: 0.2em 36px 0.2em 3.4em;
  position: relative;
  font-weight: bold;
  top: 0;
  font-size: .8em;
}
#topnav li a.a0 {
  left: -3px;
  z-index: 151;
}
#topnav li a.a1 {
  left: -2px;
  z-index: 152;
}
#topnav li a.a2 {
  left: -1px;
  z-index: 153;
}
#topnav li a.a3 {
  left: 0px;
  z-index: 154;
}

#topnav a:hover {
  background: url(images/nav_background.gif) no-repeat;
}

ul#topnav li a.here {
background: url(images/navHERE_background.gif) no-repeat;
z-index: 310;
}
/*ul#topnav li a.here {
  z-index: 210;
  background: url(images/lia.gif) no-repeat;
  /*border-right: 1px solid #777;
  padding: 0.2em 10px 0.2em 3.4em;
  margin: 0 2px 0 0;
}*/
  
ul#subnav {
  list-style-type: none;
  position:absolute;
  z-index:201;
  margin: -1px 0 0;
  right: 0;
  padding: 1px 30px 3px 0px;
  background:url(images/subnav_background.gif) repeat-x;
  border-top:1px solid #fff;
  width: 720px;
  height: 22px;
  min-height: 1.2em;
}
/* \*/
* html ul#subnav {
  width: 748px;
  wid\th: 730px;
}
/* */
  
#subnav li {
  position:relative;
  z-index:102;
  display: block;
  margin: 0;
  padding: 0;
  float:right;
}
  
#subnav a,#subnav a:hover,ul#topnav li #subnav li a.here {
  color:#fff;
  display:block;
  text-decoration:none;
  margin:0;
  padding: 2px 10px 2px 12px;
  background-color: transparent;
  background-image: none;
  border: 0 none;
}

#subnav a:hover,ul#topnav li #subnav li a.here {
  color:#444;
}

/*Structure*/

* {
  margin: 0;
  padding: 0;
}

body {
  margin:0;
  padding:0;
  text-align: center; /* IE5/Win fix */  
}

#wrapper {
  width:750px;
  height:100%;
  margin:0 auto 0 auto;
  border:1px solid green;
  text-align: left;
}
  #top {
   width:750px;
   height:60px;
  }

    #logohead {
      width:370px;
      height:60px;
      border:1px solid blue;
      float:left;
    }
    
    #toplinks {
      height:60px;
      width:365px;
      border: 1px solid orange;
      margin-left:380px;
    }
    
  #nav{
   width:750px;
   height:50px;
   /*border:1px solid pink;*/
  }
  
  #midbanner {
   width:auto;
   height:170px;
   border:1px solid red;
  }
  
  #bottomcontent {
   width:auto;
   height:auto;
   border:1px solid #990; /*yellow;*/
  }
  /* \*/
  * html #bottomcontent,* html #midbanner {
    width:750.5px;
    wid\th:760px;
  }
  /* */
</style>
</head>
<body>
<div id="wrapper">
  <div id="top">
    <div id="logohead">Logo Here</div>
    <div id="toplinks" align="right">Login Link Here</div>
  </div>
  <div id="nav">
    <ul id="topnav">
      <li><a class="a3" href="../fresh/about.htm">About</a></li>
      <li><a class="a2" href="#">Tools</a></li>
      <li><a class="a1" href="#">Hosting</a></li>
      <li><a class="a0 here" href="#">Home</a>
	 	<ul id="subnav">
			<li><a href="#">&nbsp;</a></li>
		 </ul>
	  </li>
    </ul>
  </div>
  <div id="midbanner">Flash Banner Here</div>
  <div id="bottomcontent">Bottom Content Starts Here</div>
</div>
</body>
</html>

Menu Issue

Similar Tutorials

Please Delete

Menu Issue

Similar Tutorials

Hi, new here, and to CSS. I have read several of the posts regarding menu problems, but could not find one similar to my problem.

Here is my development site, the code should be accessible (or I could post it if you prefer):

PaHiker.com

It works with all of the browsers except IE (of course). If you move the cursor over Chapters the secondary menu opens up below Chapters (which is what I want) and you can click on the item.

In IE the secondary menu opens up, but as soon as the cursor is moved off of the primary item the secondary menu closes.

Any help would be appreciated.

Thanks,

Mike

Tabbed Menus - Rollover Descriptions

Similar Tutorials

Didn't know what to search for this--apologies if it exists somewhere on the board.

Now, with links, I know you can supply a title="" attribute to them, to get a tooltip to appear on them if you leave the mouse hovering on them for a short period. What I am trying to do is somewhat similar.

Basically, imagine that you have a column of links, and a large space to the right of them (the background of which is defined elsewhere, but links' descriptions still would show here).

Some code demonstrating the type of effect I'm grasping for is below:

Code:

-- DTD removed for space --
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body{
	padding:    0px;
	margin:     0px;
}
.navCol{
	background: #00FFCC;
	width:      20.00%;
}
.dispInf{
	position:   absolute;
	top:        0px;
	left:       21.00%;
	width:      79.00%;
	background: #CCCCCC;
	height:     65%;
}
a:hover span{
	display:    block;
	position:   absolute;
	top:        0px;
	left:       21.00%;
	width:      79.00%;
}
a span{
	display: none;
}
-->
</style>
</head>
<body>
<div class="dispInf"></div>
<div class="navCol">
	<a href="/site1">Link 1<span>
	Description 1</span></a>
	<br />
	<a href="/site2">Link 2<span>
	Description 2</span></a>
</div>
</body>
</html>

Now, my problem is this:
This does not work in Internet Explorer, at all. Links still function; however, the text that should be appearing over in that right area does not.

Could anyone please point me in the proper direction to resolve this, if such can be done? I'm only shooting for IE6 and Mozilla compatibility, though the more the merrier.
Thank you for your time.

Css/jquery: How To Hide Tabbed Slide-out?

Similar Tutorials

I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option.

Here's the jQuery script:

Code:

$('#sideTabMain .button').toggle(function() {
	$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
	$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});

And the basic CSS for the div:

Code:

#sideTab      {
	position: absolute;
	z-index: 1000;
	top: 50px;
	right: -650px
	}

The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas?

Thanks for your help.

Sliding Doors For Tabbed Nav - Problem

Similar Tutorials

My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation.

Not sure if I'm allowed to post links, so below are some code snippets and I've also attached a screenshot.

The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought.

CSS:
Code:


/* horizontal main menu navigation */
#nav {
	float:left;
	width: 100%;
	background: yellow; /*temporary color just for visual cue */
}

#nav ul {
	margin: 0;
	padding: 0 0 0 300px;
	list-style: none;
}

#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
	background: url(images/tab_right.gif) no-repeat top right;
}

#nav a {
	float: left;
	display: block;
	margin: 0 10px 0 0;
	padding: 5px 2px;
	color: #fff;
	text-decoration: none;
	background: #284d73 url(images/tab_left.gif) no-repeat top left;
}

HTML:
Code:

<div id="nav">
 <ul>
  <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li>
  <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li>
  <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li>
  <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li>
  <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li>
 </ul>
<!-- end #nav -->
</div>

Problem is two fold:
1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing...

2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing...

If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?).

Thanks for any suggestions!
luispunchy

Issue With Drop Down Menu

Similar Tutorials

Ok, I'm using wordpress theme SLR Lounge V2, and am trying to modify it to suit my needs. The problem I'm having is with my navigation's drop down menu. I'm currently using a custom menu (wordpress functionality, not theme).

Initially, there was no background behind the drop down at all (so you couldn't really read it), which I've managed to modify to get the colour I want, however, I don't want the gaps, and I want it all to line up flush on the right hand side. Here's a screenshot of what I'm talking about:

http://i.imgur.com/uSn1i.jpg

I've played with padding etc to no avail. Also, sometimes the navigation elements end up paired beside each other instead of a straight vertical list if I play with the padding.

Here is the css I have relating to the drop down navigation:

Code:

/* Start Menu Items */

#menu {
list-style:none;
margin:0;
padding:0;
width:1000px;
height:100%;
border:none;
}

#menu:after {
content:'';
display:block;
clear:both;
} 

#menu li.hover a,#menu li:hover a,#menu li.hover,#menu li:hover {
	position: relative;

}

#menu li.hover ul, #menu li:hover ul {
	display: block;
}

/*start drop-down menus on the top menu*/

#menu ul {
	padding:0;
	margin:0 0 0 -10px;
	list-style:none;
	width:108px;
	display: none; /*******if you delete this, your drop down menu will appear randomly on the page somewhere **/
	position: absolute;
}

#menu ul li a { /*This is the drop down stufff */
	text-align:left;
	float:right;

Css Menu Positioning Issue

Similar Tutorials

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!

Drop-down Menu Issue In Ie

Similar Tutorials

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.

Menu Layout Issue

Similar Tutorials

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

Css Drop-down Menu Issue

Similar Tutorials

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

Navigation Menu Issue

Similar Tutorials

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 */

Popup Menu Issue

Similar Tutorials

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

Css Menu Overlapping Ie7 Issue

Similar Tutorials

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?

Menu Rollover Issue

Similar Tutorials

Hi guys I am trying to place a top menu on the side of my site, I can't seem to get the rollover to work. This is what I have on my css. Thanks in advance

#topmenu ul {
list-style: none;
margin: 20px;
padding: 0;
}

#topicons {
width: 76px;
position: absolute;
left: 800px;
background: url(../images/top-icons.gif);
margin: 0px;
padding: 50px;
height: 146px;
}

#topicons li {
list-style-type:none;
margin: 0;

}

#topicons li a {
background-image:url('../images/top-icons.gif');
background-repeat:no-repeat;
margin: 0;
padding: 0;
display: block;
height: 44px;
text-indent: -9999px;
overflow: hidden;
}

#topicons li a.item1 {background-position:0px 0px;}
#topicons li a:hover.item1 {background-position:0px -49px;}

#topicons li a.item2 {background-position:0px -90px;}
#topicons li a:hover.item2 {background-position:0px -144px;}

#topicons li a.item3 {background-position:0px -188px;}
#topicons li a:hover.item3 {background-position:0px -280px;}

Dropdown Menu Issue With Ie

Similar Tutorials

Hi,

My sub sub-menu won't work properly in IE regardless of version, but in FF and Chrome it's good to go. Basically, the sub sub-menu is covered up by the sub-menu. The sub sub-menu also appears when rolling over the main menu option, Resources, but it's blank. Weird stuff here.

Here's a link: http://loganrealtyinc.com/

You can see what I'm talking about by mousing over:

Resources > Things to Do

See how the sub sub-menu options, thus Things to Do covers up Norton Museum and so forth?

Any ideas?

As always, thanks in advance.

Dropdown Menu Issue

Similar Tutorials

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>

Menu Display Issue In Ie7

Similar Tutorials

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