CSS - Css Drop Out Menu Hidden Underneath Java Image Rotator!

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

I am trying to build a menu that will load content either on the right of it or the left.

I have looked for a tutorial on how to do this but am having no luck with the search engines.

Here is a picture of what I would like to do.


If anyone can assist me with this it would be very helpful. Or maybe even point me in the direction of a source.

Thank you!

Hi Folks

This is my first post here, hopefully I'll keep to etiquette I'm always ready to be corrected if I step out of line.

Anyway, I have an unusual problem I can't seem to solve. I am making a menu with drop downs using lists, I have it working in my HTML editor (CoffeeCup). When I try to view it in Firefox or IE7 the sub lists show and push the tabs I made to the side.

Here is the CSS I'm trying to use, some I've taken from tutorials, some of my own (which is where the problem possibly lies)

Code:

/*1. Taken from http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ with thanks */
.btn {
	float: left;
	background: url(images/btn_left.png) no-repeat;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	width:100px;
	background: url(images/btn_stretch.png) repeat-x left top;
	line-height: 40px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
	padding-bottom:25px;
padding-left:10px;
}
.btn span {
	background: url(images/btn_right.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}
.btn_home { background-color: #575757;padding-left:10px; }
.btn_e1 { background-color: #575757;padding-left:10px; }
.btn_e2 { background-color: #575757;padding-left:10px; }
.btn_e3 { background-color: #575757;padding-left:10px; }
.btn_e4 { background-color: #575757;padding-left:10px; }
.btn_e5 { background-color: #575757;padding-left:10px; }
.btn_home:hover { background-color: #DC134C; }
.btn_e1:hover { background-color: #DC134C; }
.btn_e2:hover { background-color: #FF00FF; }
.btn_e3:hover { background-color: #DC134C; }
.btn_e4:hover { background-color: #DC134C; }
.btn_e5:hover { background-color: #DC134C; }
/*End of 1*/
/*My random scrawlings*/
#navigation {
	height:35px;
	width:787px;
	position:relative;
	margin:0 auto 0 auto;
	z-index:100;
}

#navmenu, #navmenu ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

#navmenu {
	margin:0;
}

#navmenu li {
	float:left;
	position:relative;
	text-align:center;
}

#navmenu li a, #navmenu li a:visited {
	width:101px;
	font-size:1em;
	font-family:Arial;
	height:16px;
	text-decoration:none;
	
}



#navmenu li li a, #navmenu li li a:visited {
	display:block;
	width:122px;

	color:#fff;
	height:15px;
	text-decoration:none;
	z-index:100;
	margin-left:-1px;
}

#navmenu li:hover > a {
	background-color:;
	color:#fff;
	text-decoration:underline;
	
}

#navmenu li li:hover > a {
	background-color:#DC134C;
	color:#fff;
	text-decoration:underline;
	}

#navmenu li ul {
	display: none;
}
#navmenu li:hover > ul {
	display: block;
	position: absolute;
	top:0;
	left:203px;
}

#navmenu > li:hover > ul {
	left:0;
	top:35px;
}
/*End of my random scrawling*/

And here is the HTML I'm using the create my lists

Code:

<div id="navigation">
  <ul id="navmenu">
    <li class="btn btn_home"><a>Home</a><span></span></li>
    <li class="btn btn_e1"><a>Element 1</a><span></span></li>
      <ul>
        <li><a>Sub 1</a></li>
        <li><a>Sub 2</a></li>
        <li><a>Sub 3</a></li>
        <li><a>Sub 4</a></li>
      </ul>
  	<li class="btn btn_e2"><a>Element 2</a><span></span></li>
      <ul>
        <li><a>Sub 5</a></li>
        <li><a>Sub 6</a></li>
        <li><a>Sub 7</a></li>
        <li><a>Sub 8</a></li>
        <li><a>Sub 9</a></li>
      </ul>
  	<li class="btn btn_e3"><a>Element 3</a><span></span></li>
  	<li class="btn btn_e4"><a>Element 4</a><span></span></li>
  	<li class="btn btn_e5"><a>Element 5</a><span></span></li>
  </ul>
</div>

Any help in where I've been going wrong would be greatly appreciated.

Thanks


Dave

Hello

I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing.

I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference.

I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem...

This is the page:

http://www.independentliving.co.uk/index.shtml

And this is the part of the style sheet for the menu:

.menu {
width:150px;
position:relative;
margin:0;
font-size:11px;
margin:0px 0;
z-index:100;

}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#003366; width:150px;
height:25px;
text-align:center;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#003366 url(nav.gif);
line-height:19px;
font-size:11px;
z-index:100;
}

.menu ul {
padding:0;
margin:0;
list-style-type: none;
z-index:100;
}

.menu ul li {
float:left;
margin-right:1px;
position:relative;
z-index:100;
}

.menu ul li ul {
display:none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#996600;
background:#cccccc;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:150px;
width:150px;
z-index:100;
}

.menu ul li:hover ul li a.hide {
background:#ffffff;
color:#003366;
font-size:11px;
text-decoration:none;
}

.menu ul li:hover ul li:hover a.hide {
width:150px;
font-size:11px;
text-decoration:none;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#cccccc;
color:#996600;
width:200px;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#666666;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#003366;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
background:#dfc184;
color:#003366;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
font-size:11px;
text-decoration:none;
z-index:100;
}

Any ideas gratefully received!

Thanks

Frances

Hi all,

I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage.

The general layout is as follows:

Code:

<div id="wrapper">
   <div id="banner"></div>
   <div id="nav">links etc</div>
   <div id="content">Content text etc</div>
   <div id="flashMovie">Flash movie here</div>
   <div id="footer"></div>
</div>

The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer???

I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success.

Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine.

Thanks in advance,
Duncan

I need to make a menu display when the user mousovers an image on the left side of my screen. I am a VERY big newb at this stuff. The hidden menu consists of 5 images stacked on top of each other which in turn are each selectable. It should be hidden, and then appear when mouseover the image at the side. Heres some code, not sure if its enough but just ask and I'll put more. Sorry if its ugly , I've kinda lost myself on this one... I CANNOT use javascript, as a rule.

====
CSS
====
#menu span {
display:none;
position:absolute;
float:left;
}
#start {
margin-left:-40px;
position:fixed;
float:left;
display:block;
}
#start a:hover span {
margin-left:-40px;
position:fixed;
float:left;
display:block;
}

=====
HTML
=====

<div id="start" align>
<img src="images/start.gif" alt="Start"/>
<div id="menu">
<a href="#">
<span>
<img class="imgfix" src="images/ferrari-0-0.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/>
<img class="imgfix" src="images/ferrari-0-1.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/>
<img class="imgfix" src="images/ferrari-0-2.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/>
<img class="imgfix" src="images/ferrari-0-3.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/>
<img class="imgfix" src="images/ferrari-0-4.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/>
</span>
</a>
</div>
</div>

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

Have some (for me) a mysterious problem when mousing over an image inside a div.

I use javascript to change the class of a div when either onMouseOver or onClick of the div.
If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine.

If I use onClick to change the class of the div then the mousing over the image inside div is NOT working fine.
Why is that? Is there a way to make it work as I want?

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">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Keywords" content="div, bug, onmouseover, onclick, image, ">
<meta name="Title" content="DIV onmouseover bug">
<meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire">

<title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title>

<style type="text/css">
 body { margin:0; padding:0; }
 .esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; }
 .elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; }
</style>

</head>
<body>

<div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;">
<div style="display:block; margin:2px;">
	MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br>
	<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br>
</div>
</div>

<div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;">
<div style="display:block; margin:2px;">
	Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br>
	The only difference between the two divs a  First DIV uses onMouseOver and second uses onClick<br><br>
	I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br>
	<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br>
	Tested in: FF, IE, OP NE<br><br>
	I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do.
</div>
</div>

</body>
</html>

I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
http://rickduley.webs.com/roundShoulderTabMenu.jpg
except for the fact that the tabs are set below the menuBar on which the are supposed to display.

I have run out of ideas. Would someone please set me on the right path?
Thanks.

P.S.: the code is at
http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
you have to delete the 'dot key gee bee' suffix.

Hello all

I have an elastic design in which an image clips to the appropriate size via overflow: hidden. Is there any way to control which sides are cropped? What I mean is, can one emulate the background-position property for IMGes with overflow: hidden?

Thanks

Tom

Hi,

I want to get the footer (copyright notice) to appear below the all of the others. Basically I want it to appear below the left and right navbars, but in the centre of the page. The site is www.freesitetips.com. Can anyone help? Thanks!

I have made a menu which I love because it is the layout that I want.
However, I am having problems with the menu when I try to add a "Drop Down" feature to it.

The menu I currently have and use is:
http://www.gc40.com/menu2.html



I would like to turn some of the tabs like services into a drop down menu. I found a script that was a drop down menu and I tried to customize it to match my original menu but failed.
The script that I found is: http://www.gc40.com/menu1.html

Is there anyone that can customize http://www.gc40.com/menu2.html for me using http://www.gc40.com/menu1.html so that I can have drop down capabilities?

I would really appreciate the help. Thanks guys.

Hi I have the following script is from http://tiernok.com/tt/dropdown/styles/caffeine.css and
http://www.htmldog.com/articles/suckerfish/ that I am trying to modify. It runs fine both in IE and Netscape
but look and feel is what I am trying to make it work. Here is the issue I am facing and have tried but couldn't figure it out

1. In IE when hovering over Services And Implementation there's too much gap between Services And Implementation and History1Histy1 as in FireFox it comes out fine but everything is overlapped. Want to have less gap between menu and sub-menu.

2. How can I increase the width for the menus and sub menus, as I want to fit everything in table width of 586.

Code:

<html>
<head>
	<title> Caffeinated Dropdowns </title>
	<STYLE>
/**************************** Editable Pretty Stuff *****************/
/* Modification of the .ddMenu li item will require modification	*/
/* of the .ddVert width as well
/********************************************************************/

/* Menu List Items */
.ddMenu li{	
	width: 117px;
	height: 20px;
	background: #9C2B01;
	color: #616F81;
	font-weight: bold;
}
.ddMenu .top_lvl .mnu_foot{
	background-color: #9C2B01;
	height: 2px;
	border-bottom: 1px solid #616F81;
	width: 117px;
}
.ddMenu .top_lvl .mnu_head{
	/* used to space from the top menu without losinghover focus */
	border: 0px;
	height: 1px;
	background-color: #9C2B01;
	width: 117px;
}
.ddMenu .top_lvl li{
	background: #9C2B01;
	border-right: 0px solid #dddddd
}
.ddHoriz .mnu_head, .ddHoriz .mnu_foot{
	width: 1px;
}
.ddHoriz .mnu_foot{
	display: none;
}
.ddVert li{
	background-color: yellow;
}
.ddVert .top_lvl{
	padding: 15px 0 15px 0;
	border-bottom: 1px solid #616F81;
}
ul.ddVert li.mnu_foot, ul.ddVert li.mnu_head{
	background-color: #9C2B01;
}
/* Menu List Items Hover */
.ddMenu li.sfhover, .ddMenu li:hover{
	background-color: green;
	color: #816A61;
	z-index: 5;
	cursor: default;
}

.ddMenu a:link { text-decoration: none; color: white }
.ddMenu a:visited { text-decoration: none; color: white }
.ddMenu a:hover { text-decoration: none; color: white }

/**************************** Required CSS **************************/
.ddMenu, .ddMenu ul {	/**** all lists ****/
	list-style: none;	/* list style for menus */
	margin: 0px;		/* get rid of built-in margin */
	padding: 0px;		/* get rid of built-in padding */
	display: block;		/* display as block elements */
}
.ddMenu li{				/**** all list items ****/
	float: left;		/* float list items */
	position: relative; /* position relative to siblings */
}
.ddMenu li a{			/**** all anchors in list items ****/
	display: block;		/* make anchor tags block tags */
	width: 100%;		/* 98% width to compensate for any borders 
						/* that get added without obviously stealing
						/* hover space from user */
}
.ddMenu li ul{			/**** positioning for sub-menus ****/
	position: absolute; /* position */
	display: none;		/* hide submenus */
}

.ddMenu li.sfhover ul.ulhover{ /**** show immediate submenu for IE ****/
	display: block;
}
.ddMenu li:hover>ul{ /**** Show immediate submenu for compliant browsers ****/
	display: block;
}	

/**************************** Horizantal ***************************/
/* Sub-Menus need to drop down, Sub-Sub-Menus need to fly out to   */
/* the right in a horizantal view                                  */
ul.ddHoriz ul ul{
	left: 100%;
	top: 0;
}
.ddHoriz li ul{
	top: 1.2em;
	left: 0px;
}

/**************************** Vertical *****************************/
/* Menu needs a fixed width in vertical view to cause wrapping and */
/* sub-menus fly to the right by default                           */
.ddVert, .ddVert ul{
	width: 10em;
}
.ddVert li ul{
	top: 0px;
	left: 100%;
}
</STYLE>
	<script language="JavaScript" type="text/javascript"><!--//--><![CDATA[//><!--
	//--- This script is heavily based upon the one published as part of the SuckerFish dropdown method.
	//--- For more information, please visit: http://www.htmldog.com/articles/suckerfish/
	ddHover = function() { 
		var ddMs = document.getElementsByTagName("UL");
		for ( var t=0; t<ddMs.length;t++){
			if(ddMs[t].className.indexOf("ddMenu") > -1){
				var ddSMs = ddMs[t].getElementsByTagName("LI"); 
				for (var i=0; i<ddSMs.length; i++) { 
					ddSMs[i].onmouseover = function(){
						var ddsm = this.getElementsByTagName("UL")[0];
						this.className+=" sfhover";
						if(ddsm != null){ ddsm.className+= " ulhover"; }}
					ddSMs[i].onmouseout = function(){
						var ddsm = this.getElementsByTagName("UL")[0];
						this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
						if(ddsm != null){ ddsm.className = ddsm.className.replace(new RegExp(" ulhover\\b"), ""); }
					}
				}
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", ddHover)
	//--><!]]></script>
</head>
<body>
<TABLE width="586" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#9C2B01">
		<TR><TD height="28" valign="center" bgcolor="#9C2B01" align="center">	
			<ul class="ddMenu ddHoriz">
				<li class="mnu_head"></li>
				<li class="top_lvl"><a href="" title="History of Chocolate">Customer Inform</a></li>
					<li class="top_lvl"><font color="white">Services And Implementation</font>
					<ul>
						<li class="mnu_head"></li>
						<li><a href="" title="The History of Tea">History1Histy1</a></li>
						<li><a href="" title="The History of Tea">Services And Implementation History</a></li>
						<li><a href="" title="The History of Tea">History3</a></li>
						<li><a href="" title="The History of Tea">History4</a></li>
						<li><a href="" title="The History of Tea">History5</a></li>
						<li><a href="" title="The History of Tea">History6</a></li>
						<li><a href="" title="The History of Tea">History7</a></li>
						<li><a href="" title="The History of Tea">History8</a></li>
						<li><a href="" title="The History of Tea">History9</a></li>						
						<li class="mnu_foot"></li>
					</ul>
				</li>
				
				<li class="top_lvl"><a href="" title="History of Chocolate">About Us</a></li>
				<li class="top_lvl"><a href="" title="History of Chocolate">Foreign Affiliation</a></li>
				<li class="top_lvl"><a href="" title="History of Chocolate">Contact Us</a></li>
				
				<li class="mnu_foot"></li>
			</ul>
	
	
	</TD></TR></TABLE>
</body>
</html>

Any help is appreciated. Thanks