CSS - Nav Bar Drop Down

http:// idatedsatan . net / ewzine / index.html

I've posted this before and the last time I was using a really bad workaround to get this drop down to work in IE. Now I'm using the suckerfish method, and it seems to work fine in firefox, opera, ie7, but in ie6 the drop down is offset and I think it's due to the container being offset. I'm not sure how I can make this work in ie6. Also there is supposed to be a background in the dropdown, but that's not showing up in ie6 either.

Please help me if you can, much appreciated.

I know it's possible,

Anyone know how to do it or point me to a good learning tutorial?

Hey guys im having a really big problem with my site. It shows up fine in every browser except the old version of any IE. Can you guys help me out.

the problem image is attached.URL

Here's the HTML code:

Code:

<tr>
<td>
        
<div id="wrapper">
<div id="navMenu">


  <ul>

     <li><a href="home.html">Home</a>
       <ul>
   
       </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->
  
    <ul>

     <li><a href="aboutus.html">About</a>
   
       <ul>

       </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

    </ul> <!-- end main UL -->
  
    <ul>

     <li><a href="aboutvictoria.html">Victoria</a>
   
  <ul>

    <li><a href="victoriastilwellarticle.html">Articles</a></li>

    <li><a href="philosophy.html">Philosophy</a></li>

    <li><a href="vspdt.html">VSPDT</a></li>
</ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

    </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="photos.html">Photos</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="links.html">Links</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="trainingprograms.html">Training</a>
   
  <ul>
  
  <li><a href="trainingmethods.html">Methods</a></li>

    <li><a href="whyreinforcement.html">Positive(+R)</a></li>

    <li><a href="class.html">C.L.A.S.S</a></li>
    
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="http://dynamitedogtraining.blogspot.com/">Blog</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="contact.html">Contact</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
  

    <br class="clearFloat" />

 
 </div> <!-- end navMenu -->
 </div> 
<!--end wrapper -->
 
 </td>
 </tr>

And here's the CSS code:


Code:

#navMenu {
    margin:0;
    width:auto;
    background-image: url(images/Home_top_06.jpg);
    padding:0;
}

  #navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    background-color: #333;
    
 }

  #navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;    
}

  #navMenu ul li a {
    text-align:center;
    height:36px;
    width:70px;
    display:block;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    color:#FFF;
    text-shadow:0;
    font-size: 15px;
    font-variant: normal;
}

  #navMenu ul ul {
    visibility:hidden;
    top:32px;
    width: 120px;
    font-style: italic;
    position: absolute;
    margin-left: -20px;
    text-indent: 9px;
    text-align: center;
 }

  #navMenu ul li:hover ul {
    visibility:visible;
    z-index:9999;
    
 }

  /**********************************************/

  /*sets top level hover color*/

  #navMenu li:hover {
    font-weight: bold;
    font-style: italic;
 }

  /*sets link items hover color and background*/

  #navMenu ul li:hover ul li a:hover {
    color:#000;
    background-color: #E71923;
    width: 120px;
 }

  /* Changes text color on hover for main menu hover*/

  #navMenu a:hover {
    color:#FFF;
 } 
  
 /* Contains the Float */

 .clearFloat {
    clear:both; 
    margin:0;
    padding:0;
 }

#navMenu #holder ul li{
    display:inline;
    float:left;
    clear:left;
}

Please if you guys can help it would be awesome thank you

Hi there,

First I should mention, I have been doing a lot of research to learn CSS, and this is basically the first time implementing it for my company's website. I have A LOT to learn still! I'm using Dreamweaver MX and MX 2004 (2004 seems to keep crashing on me today, and i can't run it)...anyways...

I am working on a dropdown menu using pure CSS....WHICH is a library item that I am dropping into a table cell below the top banner on the index page, and others.

However, I'm having problems with some styling and the best way to work some things.

First, if you click he

Interface

I hope someone can help me!! I'm so frustrated!



You can see HOW I want the nav to look.

I seem to have a problem with the aligning of the text, as well as roll over effects: basically, I would like my nav button to turn blue w/ white text. And I'd like to have my buttons closer together, having it look as close as possible to my interface img above.

Also having issues w/ IE...which I assume would happen.

Here is my CSS and HTML code (remember, no body or title tags because it's an lbi item:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;


}

#nav a {
display: block;
width: 10em;
color: rgb(0,50,94);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
}

#nav li {
float: left;
width: auto;


}

#nav li ul {
position: absolute;
background: #C5D1DC;
width: 10em;
left: -999em;
margin: 3px;
border: 1px solid rgb(0,50,94);
padding:5px;

}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

.button {
background-color: #C5D1DC;
padding: 3px;
border-top: 1px solid #003A66;
border-right: 0px solid #003A66;
border-bottom: 1px solid #003A66;
border-left: 0px solid #003A66;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>




<ul id="nav">

<li class="button"><a href="#">Products</a>
<ul>
<li cla><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Home Automation</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">PDF Downloads</a></li>
<li><a href="#">Part Index</a></li>

</ul>
</li>

<li class="button"><a href="#">News and Events </a>

<ul>
<li><a href="#">New Products</a></li>
<li><a href="#">User Profile</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Tradeshows</a></li>
<li><a href="#">Newsletter</a></li>

</ul>
</li>

<li class="button"><a href="#">Order</a>
<ul>
<li><a href="#">Distributor List</a></li>
</ul>
</li>

<li class="button"><a href="#">Corporate</a>
<ul>
<li><a href="#">Company Bio</a></li>
</ul>
</li>

<li class="button"><a href="#">Technical Resources</a>
<ul>
<li><a href="#">Connector Cross Reference</a></li>
<li><a href="#">Wire Gage</a></li>
<li><a href="#">Glossary</a></li>
</ul>
</li>


</ul>



(IF you need me to, I can send you my site files over email) I really really appreciate all the help you guy's can give me! I'm on a tight deadline, and I really want to use CSS. If I can't get this to work, I have to take out the drop down menu all together and go w/ a boring static menu system that will add in numerous extra pages....

THANKS!

Valerie

Hi All,

I seem to have made a mistake in installing a CSS drop-down menu b/c despite my best efforts, I cannot seem to make it work in Internet Explorer.

I am using the Suckerfish method found http://www.alistapart.com/articles/dropdowns

My CSS file is here

And a sample page can be found here

Does anyone see a mistake I made? All other browsers work beautifully, so the problem must lie in the Internet Explorer hack.

Hi All,

You may have come across this several times and may heard of people complain about this several times too. But unfortunately, after browsing 30 websites in my google search, I tried everything and cant seem to get it to work.

Basically, I have a CSS drop down on my website (Site is made up of HTML/CSS and uses nested DIVs throughout). When I have a iframe (width=100%), below the horizontal navigation at the top, it just doesnt hover over it. Part of the drop down menu hides behind the iframe.

I have constantly read to have parent menu item have a z-index as a higher value than all child divs, provided there is a position set (which i do! - position:relative; ).

But still no luck!


My CSS Code:

.menu1 {
float:left;
z-index:30;
margin-top: 0;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
position:relative;

}


.menu1 ul {
margin:0;
list-style-type:none;
z-index:25;




}
.menu1 ul li {
float:left;
position:relative;
background-image: url(../images/layout/img_dash.gif);
background-repeat: no-repeat;
background-position: right;
z-index:20;



}
.menu1 ul li a, .menu1 ul li a:visited {
float:left;
display:block;
text-decoration:none;
color:#fff;
line-height:35px;
padding-top: 0px;
padding-right: 16px;
padding-bottom: 0px;
padding-left: 16px;
z-index:20;
}





My HTML:


<!-- horizontal navigation-->
<div id="menuh-container">
<div class="left">&nbsp;</div>
<div class="right">&nbsp;</div>
<div class="menu1">
<ul>
<li><a class="menu1one" href="index.html">Home </a> </li>
<li><a class="menu1one" href="commsadvisory.html">Comms Advisory </a> </li>
<li><a class="menu1one" href="emailreports.html">Email Reports </a> </li>
<li><a class="menu1one" href="overnightreports.html">Incident Reports </a> </li>
<li><a class="menu1one" href="morninghealthcheck.html">Morning Healthcheck </a> </li>



<li><a class="menu1one" href="#nogo">TOC Tools
<!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>
<td><ul>
<li><a href="#nogo">Autosys</a></li>
<li><a href="#nogo">Bing Web</a></li>
<li><a href="#nogo">Handover</a></li>
<li><a href="#nogo">IPM Search (New Window)</a></li>
<li><a href="#nogo">Sharepoint</a></li>
<li><a href="#nogo">Reserved Bridges</a></li>
<li><a href="#nogo">RSA Console</a></li>
<li><a href="#nogo">Ticket Builders</a></li>
<li><a href="#nogo">Uptime Tool</a></li>
<li><a href="#nogo">User Admin</a></li>

</li>


</ul></td>
</tr>
</table>

<!--[if lte IE 6]></a><![endif]-->

</a> </li>

<li><a class="menu1one" href="#nogo">Contacts
<!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>
<td><ul>
<li><a href="#nogo">Sub Link 1</a></li>
<li><a href="#nogo">Sub Link 2</a></li>
<li><a class="drop" href="#nogo">Sub Link 3
<!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>
<td><ul>
<li><a href="#nogo">Sub sub Link 1</a></li>
<li><a href="#nogo">Sub sub Link 2</a></li>
</ul></td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Sub Link 4</a></li>
<li><a href="#nogo">Sub Link 5</a></li>
</ul></td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>

</div>
</div>
<!-- horizontal navigation end -->


<!-- main - content area-->
<div id="contentBottomNLHS">
<div id="masterContent" class="col3">
<div class="content" >
<div class="tabber">
<div class="tabbertab">
<h2>Start/Close of Day Handover EU-APAC</h2>
<iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/RegionalHandover.aspx" scrolling="auto" height="720px"></iframe>
</div>


<div class="tabbertab">
<h2>Start/Close of Day Handover EU-US</h2>
<iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/EU_USRegionalHandover.aspx" scrolling="auto" height="720px"></iframe>
</div>


<div class="tabbertab">
<h2>EU-Asia Networks Report</h2>
<iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/AsiaEUShiftHandover.aspx" scrolling="auto" height="720px"></iframe>
</div>


<div class="tabbertab">
<h2>EU Daily Network Changes</h2>
<iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/NetworkCHG.aspx" scrolling="auto" height="720px"></iframe>
</div>



<div class="tabbertab">
<h2>US Unix/Linux Report</h2>
<iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/default.aspx" scrolling="auto" height="720px"></iframe>
</div>


<div class="tabbertab">
<h2>Daily Incident Review</h2>
<iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/DIRMM.aspx" scrolling="auto" height="720px"></iframe>
</div>




</div>

-----------------------------------------------------------

My website is internal one for work, and is not uploaded anywhere so unfortunately cannot provide a link for you to view it.

Thanks!

Hi this theme had an old dropdown menu that was acting weird in some browsers so I updated it with a plugin and now to need to customize it to look a certain way.

There are a few stylesheets at work because of the plugin but I am unable to discern why the "Contact Us" text is off-center in the button. I can see that it seems to be too long, but I don't know why it is favoring the right side of the background, instead of being centered in the background. If someone could help me demystify this I would be MUCH obliged.

I will post a link so that it can be inspected... When I am allowed after 4 more posts!

Please inspect the elements (too much code to post with all different style sheets at play!).

Thank you.

EDIT: here is link: http://drewclifton.com/clients/northern-computer/

You can also see that the dropdown under 'Services' looks funky; I'm thinking a 'sliding door' solution would be appropriate yes? Thank you.

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

Hi All,

I have a problem related to float drop, my site uses a liquid layout split 15%:85%, if the browser is wide enough it will look fine, but otherwise the content drops below the nav bar. I don't have any unbreakable text in the content area....

The problem has only been introduced since I added a min-width property to my sidebar.

I have read lots of tutorials on the subject, and have experimented with various clear and overflow properties and extra container divs but to no avail.

Maybe I am approaching the problem in the wrong way, the reason I added min-width to the sidebar is because when the browser is made smaller the menu buttons can overlap onto the main content.

The site is currently hosted on my laptop here. I will try and keep it online as much as possible for a few days.

If anyone can give me some pointers I'd be very grateful.

Jez

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

Yep, another problem with IE6. I figured someone has come across every problem so someone might be able to show me some direction on fixing this.

I have a unique drop down menu which works really well in:

- FF3
- IE8
- IE7
- Safari
- Opera
- Safari (mac)
- FF3 (mac)
- Camino (mac)

However, IE6 never plays well with anything like this. It displays everything correctly with the right styles/etc, but when you mouse over elements in the drop down the drop-down flickers.

I am not using a background-image, only a background colour.

So, can anyone help me out? Perhaps an IE6 bug i haven't come across.

HTML:
Code:

<div class="nav">
<ul>
	<li  style="margin-left: 10px;"><a  href=""><b>menu1</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul style="height:80px;">
			<li><a  href="">sublink</a></li>
			<li><a  href="">sublink</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href=""><b>menu2</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul style="height:40px;">
			<li><a href="">sublink</a></li>
			<li><a href="">sublink</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>			
</ul>
</div>

CSS:
Code:

.nav {
	position:relative; 
	font-size:12px;
	padding-right:10px;
	width: 991px;
}

.nav ul {
	padding:0; 
	margin:0; 
	list-style:none;
	height:32px;
}

.nav ul ul {
	padding:0; 
	margin:0; 
	list-style:none;  
	height:20px;
	width: 981px;
	padding: 10px;
}

.nav table {
	border-collapse:collapse; 
	margin:-1px -5px 0 0; 
	padding:0; 
	width:0; 
	height:0; 
	font-size:1em;
}

.nav li {
	float:left; 
	height:32px; 
	margin: 0;
	padding: 0;
}
.nav li a,.nav li a:hover,.nav li a:active,.nav li a:link,.nav li a:visited {
	float:left; 
	display:block; 
	height:32px; 
	line-height:32px; 
	font-size: 12px;
	color:#ffffff; 
	text-decoration:none; 
	font-family:arial;
	
}
.nav li a b {
	float:left; 
	height:32px; 
	display:block; 
	padding:0 7px 0 7px; 
	cursor:pointer; 
	display:inline; 
	background:#81A3DA; 
	margin-right: 5px;
	
}

.nav li ul{
	position:absolute; 
	top:32px; 
	left:-9999px; 
	z-index:10; 
	background:#81A3DA;
	opacity:0.95;
	/*filter:alpha(opacity=95);*/
	
}

.nav li a:hover {
	cursor:pointer;
}
.nav li a:hover b {
	background: #232323;
}

.nav li:hover > a  {
	cursor:pointer;
}
.nav li:hover > a b {
	background: #232323;
	color:#fff;
}

.nav ul :hover ul {
	left:0; 
	background: #232323;
}

.nav ul :hover ul li{
	height: 20px;	
	float:left;
	cursor: default;
}


.nav ul :hover ul li a, #subnav li a {
	display:block; 
	margin:0; 
	font-size:12px; 
	width:auto; 
	white-space:nowrap; 
	font-weight:normal; 
	border:0; 
	color:#fff; 
	height:20px; 
	line-height:20px;
	text-decoration: none;
	font-family: Arial;
	width: 231px;
	margin-right:10px;
	padding: 0 2px 0 2px;
}

/* this is the one that handles the drop down's colour' */
.nav li a:hover ul li a:hover, .nav li:hover ul li a:hover, .nav li ul li a:hover {
	color:#232323;
	background:#FFFFFF;

}


.nav li.current a:hover ul li a:hover, .nav li.current:hover ul li a:hover, #subnav a:hover, #subnav li a:hover  {
	color:#232323;
background:#a0caf4;
	
}


.nav li.current a:hover ul li a, .nav li.current:hover ul li a, #subnav a {
	color:#fff;
}



.nav li.current a b, .nav li.current ul,  .nav li.current a:hover ul, .nav li.current a:hover b,#subnav {
	background: #5175AF;
	color: #fff;
	
}

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

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

You can view the site http://gator692.hostgator.com/~aopaj/index.php. With versions 7 and above of IE the menu becomes scrambled on the screen. http://clip2net.com/page/m0/5430874

Found the css menu online and just modified in a few ways. If you're wondering how the double drop down / change in direction works it's inline styles printed out using php.

Code:

#menuh-container
	{
	position: relative;
	width: 100%;
	height: 5%;
	}

#menuh
	{
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:center;
	margin-top: 0%;
	height: 0%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
	position: relative;
	top: 0%;

	}
		
#menuh a
	{
	text-align: center;
	display:block;
	border: 1px solid #555555;
	margin:0;
	padding: 1px;
	}
	
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	white-space:nowrap;
	}
	
#menuh a:hover						/* menu on mouse-over  */
	{
	color: #FFFFFF;
	background-color: #6495ED;
	text-decoration:none;
	}	
	
#menuh a.top_parent, #menuh 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;
	}
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#menuh ul
	{
	align:center;
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:20%;
	}

#menuh li
	{
	position:relative;
	min-height: 1px;
	vertical-align: bottom;
	}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-13px 0px 0px -13px;
	width:100%;

	}

#menuh ul ul ul
	{
	top:0;
	left:100%;
	width:100%;
	}
#menuh ul ul ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	margin:-33px 0px 0px -26px;
	width:100%;
	}	

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

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

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

/* End CSS Drop Down Menu */

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>