Learn VBA & Macros in 1 Week!

CSS - Conditional Comment Drop Down Menu For Ie Needs Help.

Full Excel VBA Course - Beginner to Expert

Conditional Comment Drop Down Menu For Ie Needs Help.	View Content

Hey everyone. So I've gotten the drop down menu to work in IE and Firefox until the client wanted to only have one of the menu items be a drop down menu.

I used conditional comments based on the tutorials found on CSSPlay but the menu is stuck in one location in IE. Please help!
I also don't understand why the content box's type is now centered in IE.

Http://www.thehomecollection.com

Thank you for your efforts everyone!

-Garrick-

html
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Search -->
<div id="search">
<form>
<input type="hidden" name="restrict" value="/your_site" />
<input type="hidden" name="exclude" value="" />
<img src="images/img_search.jpg" alt="" />
<input type="text" name="words" size="19" value="" />
<input type="image" class="button" src="images/btn_go.gif" alt="submit_button" />
</form>
</div>
</div>

<!-- Top Navigation -->
<div id="nav">
<ul id="top_nav">
  <li id="nav_home"><a href="index.html"></a></li>
<div class="menu">
<ul>
<li id="nav_shop"><a href="index.html"><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table class="shop"><tr><td><![endif]--><ul><li><a href="index.html">Versace</a></li><li><a href="index.html">Calvin Klein</a></li><li><a href="index.html">Versace</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
</div>
<div style="float: left;">
  <li id="nav_service"><a href="index.html"></a></li>
  <li id="nav_email_signup"><a href="index.html"></a></li>
  <li id="nav_account"><a href="index.html"></a></li>
  <li id="nav_bag"><a href="index.html"></a></li>
  <li id="nav_checkout"><a href="index.html"></a></li>
</div>
</ul>
<!-- Product Category Navigation -->
<!-- Menu Start -->
<div id="product_nav">
<ul>
<li><a href="giftware/index.html"><img src="images/menu_home_gift.jpg" /></a></li>
<li><a href="lux_bedding/index.html"><img src="images/menu_home_bedding.jpg" /></a></li>
<li><a href="dinnerware/index.html"><img src="images/menu_home_dinner.jpg" /></a></li>
<li><a href="stemware/index.html"><img src="images/menu_home_stem.jpg" /></a></li>
<li><a href="lighting/index.html"><img src="images/menu_home_light.jpg" /></a></li>
<li><a href="furniture/index.html"><img src="images/menu_home_furniture.jpg" /></a></li>
<li><a href="accessories/index.html"><img src="images/menu_home_access.jpg" /></a></li>
<li ><a href="sale/index.html"><img src="images/menu_home_sale.jpg" /></a></li>
</ul>
</div>
<!-- Menu End -->
</div>

<div id="content">
  <p>Content goes here.</p><br />
</div>
<div id="footer"></div>
</div>
</body>
</html>

css
Code:

body {
	background-color: #F5F5F4;
	color: #000000;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}

#wrapper {
	margin: 0 auto;
	width: 760px;
	text-align: left;
}

table, ul, li {
	margin: 0;
	padding: 0;
}

img {
	margin: 0;
	padding: 0;
	border: none;
}

p {
	margin: 0 0 10px 0;
	padding: 0;
}

a:link, a:visited {
	color: #FF0000;
	text-decoration: underline;
}

a:hover, a:visited:hover {
	color: #FFFF00;
	text-decoration: underline;
}

#header {
	background: url(images/header.jpg) scroll no-repeat;
	height: 89px;
	margin: 0;
	padding: 0;
	width: 760px;
}

#search {
	margin: 0;
	padding: 0 20px;
	float: right;
	position: relative;
	top: 48px;
}

/* IE hack start */
html[xmlns] #search {
	top: 47px;
}
/* IE hack start */

#search .button {
	position: relative;
	top: 1px;
}

/* IE hack start */
html[xmlns] #search .button {
	position: relative;
	top: 3px;
}
/* IE hack start */

#nav {
	height: 58px;
	margin: 0;
	padding: 0;
	width: 760px;
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#nav_home {
	background: url(images/top_nav.jpg) no-repeat scroll;
	width: 80px;
	height: 27px;
	display: block;
	float: left;
}

#nav_home a {
	width: 80px;
	height: 27px;
	display: block;
}

#nav_home a:active {
	background: url(images/top_nav.jpg) no-repeat scroll 0 -27px;
}

#nav_shop {
	background: url(images/top_nav.jpg) no-repeat scroll -80px 0;
	width: 110px;
	height: 27px;
	display: block;
	float: left;
}

.menu {
	padding: 0;
	margin: 0;
	width: 110px;
	height: 27px;
	z-index: 600;
	background: #ffffff;
	top: 0px;
	float: left;
}

.menu img {margin: 0; padding: 0; border: none;}

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

.menu ul ul {
	width: auto;
}

.menu ul ul li {
	float: left;
	width: 100%;
	position: relative;
	background: #ffffff;
}

.menu ul ul {filter: alpha(opacity=75);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
 -moz-opacity: 0.75; opacity:0.75;
}

.menu li {
	float: left;
	width: auto;
	position: relative;
}

.menu ul ul a, .menu ul ul a:visited {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 11px;
	text-decoration: none;
	color:#000000; 
	background:#ffffff;
	padding: 5px;
}

/* IE hack start */
html[xmlns] .menu ul ul a, .menu ul ul a:visited {
	width: auto;
}
/* IE hack start */

.menu ul ul {
	visibility: hidden;
	position:absolute;
	height: 0px;
	top: 27px;
	left: 0;
}

.menu ul :hover ul{
visibility:visible;
display: block;
}

.menu a:hover {
color:#000000; 
background:#ffffff;
}

.menu ul ul a:hover{
color:#ffffff; 
background:#777777;
}

.menu :hover > a {
color:#000000; 
background:#ffffff;
}

.menu ul ul :hover > a {
color:#ffffff; 
background:#777777;
}

/* another hack for IE5.5 */
* html .menu ul ul {
top:27px;
t\op:27px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table.shop {position:absolute; top:0; left:0; width: 100%;}

#nav_bag {
	background: url(images/top_nav.jpg) no-repeat scroll -544px 0;
	width: 106px;
	height: 27px;
	display: block;
	float: left;
}

#nav_bag a {
	width: 106px;
	height: 27px;
	display: block;
}

#nav_bag a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -544px -27px;
}

#nav_account {
	background: url(images/top_nav.jpg) no-repeat scroll -445px 0;
	width: 99px;
	height: 27px;
	display: block;
	float: left;
}

#nav_account a {
	width: 99px;
	height: 27px;
	display: block;
}

#nav_account a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -445px -27px;
}

#nav_checkout {
	background: url(images/top_nav.jpg) no-repeat scroll -650px 0;
	width: 110px;
	height: 27px;
	display: block;
	float: left;
}

#nav_checkout a {
	width: 110px;
	height: 27px;
	display: block;
}

#nav_checkout a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -650px -27px;
}

#nav_service {
	background: url(images/top_nav.jpg) no-repeat scroll -191px 0;
	width: 127px;
	height: 27px;
	display: block;
	float: left;
}

#nav_service a {
	width: 127px;
	height: 27px;
	display: block;
}

#nav_service a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -191px -27px;
}

#nav_email_signup {
	background: url(images/top_nav.jpg) no-repeat scroll -318px 0;
	width: 127px;
	height: 27px;
	display: block;
	float: left;
}

#nav_email_signup a {
	width: 127px;
	height: 27px;
	display: block;
}

#nav_email_signup a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -318px -27px;
}

/* Prodcts Navigation */

#product_nav {
	margin: 0;
	padding: 0;
	float: left;
	width: 760px;
}

#product_nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#product_nav li {
	margin: 0;
	padding: 0;
	display: inline;
	float: left;
}

#content {
	background-color: #ffffff;
	margin: 0;
	padding: 20px;
	width: 720px;
	clear: both;
}

/* remove comments to add footer
#footer {
	background: url(images/footer.jpg) scroll no-repeat;
	height: 10px;
	margin: 0;
	padding: 0;
	width: 760px;
}
*/

Full Excel VBA Course - Beginner to Expert

Conditional Comment Issue?

Similar Tutorials

View Content

I read through many of the related articles I found through searching the board, but found no solution to my problem.

First question: Do these two CC's, when either is present in the head section, represent two ways of accessing my styles_IE.css file?
Code:

<!--[if lte IE 8]>
      <style type="text/css" media="all"> @import "css/styles_IE.css"; </style> 
<![endif]-->

<!--[if lte IE 8]> 
      <link rel="stylesheet" href="css/styles_IE.css" type="text/css" media="screen" />
<![endif]-->

Second:
An associate of mine complains that, since I took our new site live a week ago and migrated from my development site, his IE8 no longer makes the drop-down menus drop down. I built a first site a couple years ago using this same Suckerfish, which I found online after someone here recommended it. For my new project I just copied the Suckerfish and CSS and changed the target files and color scheme. Works like a champ.

Both my new live and development sites work fine with *my* IE8 (and FF, Opera, Chrome, Safari...), and no one else has told me of any issues. But this guy can no longer navigate our site due to drop-down problems (but he tells me he had no problem with the dev server...weird). Below is a look at my Suckerfish menus and CSS.
Thank you very much for any input regarding IE and how I might solve one of its countless and inexcusable foibles...
Curtis
Code:

<div id="navContainer">
   <ul id="nav">
      <li><a href="index.php">Home</a> 
         <ul>
            <li><a href="index.php">Home Page</a></li>
            <li><a href="about.php">About DT</a></li>
            <li><a href="dthc.php">DTHC Board</a></li>
            <li><a href="found.php">DT Foundation</a></li>
            <li><a href="email.php?email=gen">Contact Us</a></li>
         </ul>
      </li>
      <li><a href="">Events</a> 
         <ul>
            <li><a href="commu.php">Community Service</a></li>
            <li><a href="workday.php">Retreats/Workdays</a></li>
            <li><a href="history.php">House History</a></li>
         </ul>
      </li>
      <li><a href="">Alumni</a>
         <ul>
            <li><a href="email.php?email=addrChng">New Contact Info?</a></li>
            <li><a href="dues.php">Dues/Donations</a></li>
            <li><a href="pclass.php">Pledge Classes</a></li>
            <li><a href="missing.php">The Missing</a></li>
            <li><a href="memorial.php">Memorial</a></li>
         </ul>
      </li>
      <li><a href="">Up & Down</a>
         <ul>
            <li><a href="minutes.php">Newsletters / Minutes</a></li>
            <li><a href="manuals.php">Manuals and Docs</a></li>
            <li><a href="upTheRiver.php">Upload Center</a></li>
            <li><a href="vision.php?view=visi">Our Vision</a></li>
         </ul>
      </li>
      <li><a href="">Grab Bag</a>
         <ul>
            <li><a href="common.php?page=dtBusi">DT Businesses</a></li>
            <li><a href="gallery.php">Scrap Book</a></li>
            <li><a href="direc.php">Online Directory</a></li>
            <li><a href="mailList.php?page=main">DT Mail List</a></li>
            <li><a href="lilsis.php">Little Sisters</a></li>
         </ul>
      </li>
   </ul><!-- end ul #nav -->
</div><!-- end navContainer -->

Code:

#navContainer {
   z-index:3; width:100%; text-align:left; 
   border:0px solid #ddd; margin:0 auto; padding-bottom:1.3em
}
	
#nav, #nav ul {
   font-size:1.0em; float:left; width:665px; 
   list-style:none; line-height:1; background:#bfe2f9; 
   font-weight:bold; padding:0; border:solid #999; border-
   width:0 0 1px 0; margin:0 0 0 0
}
							
#nav ul{background:#bfe2f9;}
#nav {padding-left:6em}
#nav a {
   display:block; width:10em; w\idth:6em; 
   color:#db2438; text-decoration:none; padding:0.25em 0.4em
}

#nav a.topDrop {
   background:url(../pics/rightArrowYellow.gif) 
   center right no-repeat;
}

#nav li {float:left; padding:0; width:8.5em}

#nav li ul {
   position:absolute; left:-999em; height:auto; 
   width:9.8em; w\idth:9.2em; font-weight:normal; border-
   width:0.1em; margin:0; z-index:1000
}

#nav li li {padding-right:0.9em; width:7.5em}

#nav li ul a {width:13em; w\idth:9em}

#nav li ul a:hover {
   width:13em; w\idth:9em; color:blue; 
   text-decoration:underline
}

#nav li ul ul {margin:-1.75em 0 0 10.4em}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, 
   #nav li.sfhover ul ul ul {
   left:-999em
}
	
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav 
   li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
   left:auto
}
	
#nav li:hover, #nav li.sfhover {background:#bfe2f9}

Conditional Comment Css For Ie Getting Overlapped

Similar Tutorials

View Content

Hello forum,

I've been breaking my head trying to find the solution for this, but can't seem to solve it. I have pinpointed the problem though.

I have this site which looks terrible on IE because the background shakes, so I removed a property from the body selector which makes the background fixed.

So I only want users using IE to load that CSS stylesheet by using conditional comment. The thing is when loading the website that IE stylesheet is getting overlapped by the main CSS stylsheet so the body property is added again. I know this is what's going on because when I remove the original CSS stylesheet from the server, the IE stylesheet loads up and the page looks as it should in IE.

So do you guys have any ideas on how to NOT load the original stylesheet on IE explorers?

Thank you!

website: http://prueba.stu.com.mx

That's the CSS causing the problem and how it looks on every browser except IE:
Code:

body {
 background-image: url(_images/patternBG.jpg);
 background-repeat: repeat;
 background-position: left top;
 background-attachment:fixed; }

How it looks on IE:
Code:

body {
 background-image: url(_images/patternBG.jpg);
 background-repeat: repeat;
 background-position: left top; }

Drop Down Menu; How To Align The Right Edge Of Drop Down And Parent Menu?

Similar Tutorials

View Content

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;
}

Show Selected Menu With Hierarchy On Each Page. Drop Down Menu Help Needed......

Similar Tutorials

View Content

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.

Vertical Drop-down Menu - Sub-menu's Don't Appear Long Enough (time Not Length)

Similar Tutorials

View Content

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

Only One Level Of Drop Down Menu Appearing In Horizontal Menu In Ie 6 And 7

Similar Tutorials

View Content

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!

Menu Tabs Drop Below Menu Bar

Similar Tutorials

View Content

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.

Help With Drop-down Menu?

Similar Tutorials

View Content

The code is here on an old Proboards test site: http://kayaoti.proboards.com/index.cgi

The menu in the black bar is just one I used from a free code. It works fine except when you hover over the items, the drop-down tabs are out of alignment. I'm not code-savvy enough to know how to make them drop straight down or how to move them so they look nicer, but I'm guessing someone here could help me out in that regard. How can I edit the code (shown below) or whatever else to make the drop-down tabs look better aligned with the menu items?

Code:

<style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 748px; background: #000; float: left; }  #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; }  #menu h2 { color: #000; background: #000; text-transform: uppercase; }   #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #000 #000 #000 #000; margin: 0; padding: 2px 3px; }   #menu a { color: #fff; background: #000000; text-decoration: none; }  #menu a:hover { color: #fff; background: #000; }  #menu li {position: relative;}  #menu ul ul { position: absolute; z-index: 500; }  #menu ul ul ul { position: absolute; top: 0; left: 100%; }  div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;}  div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}  </style> <!--[if IE]> <style type="text/css" media="screen">  #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; }  #menu ul li a {height: 1%;}   #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]-->   <div id="menu" style="position:relative; left:301px; top:483px;"> <ul><li><a href="http://dominionwolves.proboards.com/"><IMG SRC="http://i44.tinypic.com/24zb1vq.png" border="0"></a></li></ul>    <ul><li><IMG SRC="http://i43.tinypic.com/311lyra.png" style="position:relative; left:-40px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus">CSS Hover Navigation</a>         <ul>           <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>            <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>           <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>         </ul>       </li>     </ul>   </li> </ul>    <ul>   <li><IMG SRC="http://i39.tinypic.com/2cne1d5.png" style="position:relative; left:0px; top:2px;">     <ul>       <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>         <ul>           <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>            <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>           <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>         </ul>       </li>     </ul>   </li> </ul>    <ul>   <li><IMG SRC="http://i40.tinypic.com/24ffxu1.png" style="position:relative; left:55px; top:2px;">     <ul>       <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>       <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>         <ul>           <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	             <ul>                <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>               <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		               <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>               <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>               <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			               <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>             </ul>            </li>         </ul>       </li>     </ul>   </li> </ul>       <ul>   <li><IMG SRC="http://i42.tinypic.com/15cerno.png" style="position:relative; left:65px; top:2px;">      <ul>       <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>       <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->         <ul>           <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>             <ul>               <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>                <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>			               <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>               <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>               <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>			               <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>             </ul>           </li>          </ul>       </li>     </ul>   </li> </ul>							 </div>

Css Drop Down Menu Help

Similar Tutorials

View Content

i m having problem in displaying menu and sub menu. pls check the code.

HTML

<html>
<head>
<title> List of Hospital values
</title>
<link href="new.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="navbar">
<li><a href="##">IPD Maintenance</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="#">Diagnose</a></li>
<li><a href="#">Laboratary Test</a></li>
</ul>
</li>

<li><a href="#">OPD Maintenance</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="#">Diagnose</a></li>
<li><a href="#">Laboratary Test</a></li>
<li><a href="#">Admission</a></li>
<li><a href="#">Services </a></li>
</ul>
</li>

<li><a href="#">Donation Management</a>
<ul>
<li><a href="">Donor detail</a></li>
<li><a href="">Lab Test detail</a></li>
<li><a href="#">Donor Medication</a></li>
</ul>
</li>

<li><a href="#">Billing</a>
<ul>
<li><a href="#">IPD billing</a></li>
<li><a href="#">OPD billing</a></li>
</ul>
</li>

<li> <a href="#">Administrative Task</a>
<ul>
<li><a href="#">Manage user</a></li>
<ul>
<li><a href="#">Add User</a></li>
<li><a href="#">Delete User</a></li>
</ul>

<li><a href="#">Manage Doctors</a></li>
<ul>
<li><a href="#">Edit Doctor</a></li>
<li><a href="#">Add Doctor</a></li>
<li><a href="#">Delete Doctor</a></li>
</ul>

<li><a href="#">Manage Staff</a></li>
<ul>
<li><a href="#">Edit Staff</a></li>
<li><a href="#">Add Staff</a></li>
<li><a href="#">Delete Staff</a></li>
</ul>

<li><a href="#">Manage Departments</a></li>
<ul>
<li><a href="##">Add Department</a></li>
<li><a href="#">Delete Department</a></li>
<li><a href="#">Edit Department</a></li>
</ul>

<li><a href="#">Manage Rooms</a></li>
<ul>
<li><a href="#">Add Room</a></li>
<li><a href="#">Delete Room</a></li>
<li><a href="#">Edit Room</a></li>
</ul>
</ul>
</li>

<li><a href="#">Laboratory</a>
<ul>
<li><a href="">Laboratory detail</a></li>
<li><a href="">Lab Test detail</a></li>
</ul>
</li>

<li><a href="#">Organ Management</a>
<ul>
<li><a href="">Laboratory detail</a></li>
<li><a href="">Lab Test detail</a></li>
</ul>
</li>

<li><a href="#">Blood Management</a>
<ul>
<li><a href="">Blood Taken</a></li>
<ul>
<li><a href="">Hospitals</a></li>
<li><a href="">Donors</a></li>
</ul>
<li><a href="">Blood Endorsed</a></li>
<ul>
<li><a href="">Persons</a></li>
<li><a href="">Hospitals</a></li>
<li><a href="">IPD</a></li>
</ul>
</ul>
</li>

<li><a href="#">Emergency Services</a>
<ul>
<li><a href="">Estaff Detail</a></li>
<li><a href="">Add Estaff</a></li>
<li><a href="">Delete Estaff Detail</a></li>
<li><a href="">Edit Estaff Detail</a></li>
<li><a href="">Ambulance Detail</a></li>
<li><a href="">Ambulance Route</a></li>
</ul>
</li>

<li><a href="#">Inventory</a>
<ul>
<li><a href="">Suppliers</a></li>
<li><a href="">Purchase Receipt</a></li>
<li><a href="">Purchase return receipt</a></li>
<li><a href="">Sales Receipt</a></li>
<li><a href="">Sales Return Receipt</a></li>
</ul>
</li>
</ul>
</body>
</html>

AND THE CSS FILE IS AS FOLLOWING

#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }

#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }

WAITING FOR YOUR HELP

Css Drop Down Menu- Is This Possible?

Similar Tutorials

View Content

Hi all,

I am trying to style a drop-down menu. I'd like the hover state to have a transparent cut out on the menu... and the bottom of the drop down to be rounded. Probably makes more sense in the picture... which I am apparently not allowed to post. grrr. So think little triangle, but instead of being a different color, it is a transparent cut out. I've been banging my head into the keyboard for a couple of hours and can't seem to find the right way to tackle this. The problem is compounded by some of the menu items not have submenus. I'd like those to hover as if they were the bottom link in the drop down... ie, a notched edge and rounded bottom border. I would really appreciate anyone pointing me in the right direction here. Many thanks,

-helga

Help With Drop Down Menu

Similar Tutorials

View Content

Hi,

I have this drop down menu, but the parents are appearing under each other, instead of next to each other. I am trying to create a horizontal menu with sub items appear under the parent items.

this is my code:

PHP Code:
#menu2 {
width: 800px;
float:left
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu2 a, #menu2 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu2 h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu2 a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu2 a:hover {
color: #a00;
background: #fff;
}

#menu2 li {position: relative; float:left; width: 200px;}

a.mainlevel{background-color: #000000!important; display:inline-block}

#menu2 ul ul {
position: absolute;
z-index: 500;
float:left
}

#menu2 ul ul ul {
position: absolute;
top: 0;

}

div#menu2 ul ul,
div#menu2 ul li:hover ul ul,
div#menu2 ul ul li:hover ul ul
{display: none;}

div#menu2 ul li:hover ul,
div#menu2 ul ul li:hover ul,
div#menu2 ul ul ul li:hover ul
{display: block;}

Can anyone see anything wrong?

Many thanks

Css Only Drop Down Menu.

Similar Tutorials

View Content

I have been tasked with building a CSS drop down menu system. I have worked out I can use a hover event to invoke the drop-downs (and hide them again). However. How would I invoke one and keep it visible if they went down to the sub-menu rather than just disappearing because they left the element the hover is applied to?

Drop Down Menu Help

Similar Tutorials

View Content

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

Drop Down Menu Help

Similar Tutorials

View Content

dup

Help With Css Drop-down Menu

Similar Tutorials

View Content

I am looking for help with creating a CSS drop down menu. I found an example online, but I am unable to make it work for my site. I am trying make a horizontal drop down menu, but the menu is being displayed vertically, can someone please help.
Thanks

Below are my codes:

Code:
CSS

/********************** Header ***************************/


#header {
	margin: 0px 0px 0px 0px;
	background-image:url(images/header.jpg);
	width:717px;
	height:288px;
	position:relative;
}
#header-container
	{
	position: absolute;		
	top: 1em;
	left: 1em;
	}

#header ul{
	background-color:#000000;
	width:711px;
	border: 3px solid #FFFFFF;
	display:block;
	top:255px;
	position:absolute;
	margin: 0px 0px 0px 0px;
	height:22px;
	padding:5px 0px 0px 0px;
	text-align:center;
}
#header a
	{
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
	}
	
#header a:link, #header a:visited, #header a:active	/* menu at rest */
	{
	color: white;
	background-color: #000000;
	text-decoration:none;
	}
	
#header a:hover						/* menu on mouse-over  */
	{
	color: #000000;
	background-color: #CCCCCC;
	text-decoration:none;
	}	
	
#header a.top_parent, #header a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
	
#header a.parent, #header a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#header ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9em;	/* width of all menu boxes */
	/* NOTE: For adjustable menu boxes you can comment out the above width rule.
	However, you will have to add padding in the "#menh a" rule so that the menu boxes
	will have space on either side of the text -- try it */
	}

#header li
	{
	position:relative;
	min-height: 1px;		/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom;		/* Sophie Dennis contribution for IE7 */
	}

#header ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#header ul ul ul
	{
	top:0;
	left:100%;
	}

div#header li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#header li:hover ul ul,
div#header li li:hover ul ul,
div#header li li li:hover ul ul,
div#header li li li li:hover ul ul
{display:none;}

div#header li:hover ul,
div#header li li:hover ul,
div#header li li li:hover ul,
div#header li li li li:hover ul
{display:block;}

Code:
HTML

<div id="container">


	<div id="header">
			<ul>
				
			<li><a href="index.html">Home</a></li>
			
			
			<li><a href="fbstats.html">Football</a></li>
				
			<li><a href="bbstats.html">Baseball</a></li>
			<li><a href="bio.html">Biography</a></li>

			<li><a href="televison.html">Television</a></li>
			<li><a href="cdbuy.html">CD/Book</a></li>
			<li><a href="video.html">Videos</a></li>
		</ul>
	</div>

Css Drop Down Menu Ie

Similar Tutorials

View Content

I have created a style sheet drop down menu and it works fine in mozilla and most times in works in ie however sometimes the menu will not drop down in ie but when you hit refresh the menu drops down.

any ideas.

Below is my stylesheet for creating a css drop down menu - I am using csshover.htc for internet explorer and this in the html



#menu {
z-index: 2000;
background: url(../images/hoz_menu_BG.gif) repeat-x #8898BC;
background-color: #8898BC;
color: black;
position: absolute;
width: 100%;
text-align: center;
left: 0;
cursor: pointer;
font-size: .9em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 5px solid #CCD6EB;
}
/*top level for student*/
#menu #st ul { list-style: none;
margin: 0;
padding: 0;
width: 19.7%;
float: left;
}
/*2nd level for student*/
#menu #st ul ul { width: 80%;
position: absolute;
left: 0;
z-index: 500;
}
/*3rd level for student*/
#menu #st ul ul ul { width: 90%;
position: absolute;
left: 100%;
top: 1px;
}
#menu a { color: #FFFFFF;
background-color: transparent;
text-decoration: none;
text-align: center;
display: block;
padding: 4px 2px 4px 5px;
}
#menu a:link { color: #FFFFFF;
background-color: #4D678C;

}
#menu a:visited { color: #FFFFFF;
background-color: #4D678C;
}
#menu a:hover { color: #000000;
background-color: #ABBAD7;
}
#menu ul { border-right: 1px dotted #FFFFFF;
}
#menu li { position: relative;
}
#menu ul ul li {border-bottom: 1px solid #FFFFFF;
}
#menu ul ul { border-right: 1px solid #FFFFFF;
}
#menu ul ul { border-top: 1px solid #FFFFFF;
}
/*#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}*/
div#menu ul ul ,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
display: none;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {
display: block;
}
/*2nd menu colours - uses #menu styles and then overwrites them for top menu links*/
div#menu ul li li a {
color: white;
background-color: #4D678C;
text-transform: capitalize;
text-align: left;
border-left: 1px solid #FFFFFF;
}

Css Drop Down Menu

Similar Tutorials

View Content

How easy is it to create one of these where when you hover over a link a menu appears underneath?

Need Help With Drop-up Menu!

Similar Tutorials

View Content

an oxymoron i know it is... but i need my css menu to not drop down, but rather drop up, setting the tag to a negative top: value isnt working either, as not all the pop-up menu's used are the same height.

Any suggestions, or tutorials that you know of?

Drop Down Menu Help

Similar Tutorials

View Content

Alright, I've started to design the other pages on my site. I had to change some things in the code in order for my design to work properly. I didn't have it set up correctly before. So everything works the way I want it to now...except for the drop down menu. I am only a beginner with CSS and do not know much about it. I can't figure out what it is I did that made the navigation stop working. If maybe somebody that is more experienced than myself can take a look at it to see what I did, I would really appreciate it.

Oh yea, here is the link to the beggining stages of my "about" page:
About

Keep in mind, nothing is really for sure yet. I just want to get the coding done, so if you think the page could use some sprucing up, you're not alone. As of now the site works best in Firefox and the drop down menu should appear when "Portfolio" is hovered over.

Here is the link to the CSS:
CSS

Thanks

Css Drop Down Menu Help

Similar Tutorials

View Content

I am sure this has been answered many times over, but I can't seem to find a solution that works. Sorry if I am re-posting something that has been asked before.
I am trying to add a drop down menu to a website I am working on, the menu works great in all browsers except IE7 (I haven't tried anything earlier).
In IE7, when I hover over the menu items they show the selections like they are supposed to, but when I move the cursor to select an item from the drop down it disappears.
I've tried many different things, but can't seem to get anything to work. Any help would be much appreciated.

Links to files:
simad.ca/wp/test/index.html
simad.ca/wp/test/nav.css