CSS - Css Drop Down Navigation Not Working In Ie

Hi there,

I'm haing a problem getting my navigation to appear correctly in Mac IE 5.2 and Safari 2.0.1. The dates on the right are supposed to pop you down to the date in the central box.

It works correctly on a PC, all browsers.

I replaced NAME with ID.

Thanks for any help or suggestions!

http://www.cofc.edu/~finchj/timeline_not_template.html

http://www.cofc.edu/~finchj/style_timeline.css

Jannette

I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px.

I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions.

Thanks for your help!

Open in FF to see how it's supposed to work:
Open in IE to see problem.

Here's the HTML

Code:

<div id="Menu">
<div id="nav_header">

   <div id="text">

            
		    Admissions & Financial Aid

            </div>


</div>

<ul id="nav_level_1">

         <li id="submenu"><a href="../index.php">Applying to Union</a></li>

			<ul id="nav_level_2">

               <li id="nav_active"><a href="index.php">Types of Admission</a></li>

			<ul id="nav_level_3">

               <li><a href="Transfer.php">Transferring to Union</a></li>

         <li><a href="Early.php">Early Decission</a></li>


         <li><a href="Regular.php">Regular</a></li>

         <li><a href="international.php">International Admission</a></li>

         <li><a href="aop_heop.php">AOP/HEOP</a></li>

         <li><a href="Medical.php">Eight-year Medical</a></li>

         <li><a href="Law.php">Six-year Law</a></li>

         <li><a href="MBA.php">Five-year MBA</a></li>


         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

			<li><a href="../Applications.php">Apply Online</a></li>

         <li><a href="../Forms/index.php">Download Application Materials</a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

            <li><a href="../../FAQs/index.php">Have a Question?</a></li>


         <li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>

         <li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>

         <li><a href="../../interviews.php">Interviews</a></li>

         <li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>

         <li><a href="../../About/index.php">Admissions Staff</a></li>


         <li><a href="../../AlumniAdmissions/index.php"></a></li>

         <li><a href="../../Media/index.php"></a></li>

         <li><a href="/union/admissions/Viewbook/index"></a></li>

         <li><a href="/union/admissions/Alumni/index"></a></li>

         <li><a href="../../sample.php"></a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

   

</div>

Here is the pertinent CSS

Code:

/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_2 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_3 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#e5dece;
    line-height:17px;
    word-wrap: break-word;
}
/* End unordered list base styles */

/* To get indented, wrapping, text that's cross browser compatible
   we need to additionally style the unordered lists and line items under each top <ul>
*/

#nav_level_1 li {
    margin-left:20px;
}

#nav_level_1 li ul {
    margin-left:-20px;
}

#nav_level_2 li {
    margin-left: 40px;
}

#nav_level_2 li ul {
    margin-left:-40px;
}

#nav_level_3 li {
    margin-left:60px;
}

#nav_level_1 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 4px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 20px;
}

#nav_level_2 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 24px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 40px;
}

#nav_level_3 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 44px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 60px;
}

#Menu #submenu {
    list-style-type: circle;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#submenu2 {
    list-style-type:circle;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

Hi, I am designing this site for my Web Design class, and have made the big mistake of working only in FF and not checking IE until the end. The problem is with the Navigation.

It is a UL-based Navigation with 5 items. The text of each LI is made "invisible" by using text-indent -9999px in CSS. I have 5 images that have 2 states used for each button.

Here is the CSS code for the whole Navigation:

#nav {list-style-type: none;
margin: 0;
padding: 0;
background: #fff;
width: 934px;
height: 62px;
position: absolute;
top: 0;}

#nav a {float: left;
height: 62px;
text-indent: -9999px;
overflow: hidden;}

#nav #home a {background: #fff url(home.jpg) no-repeat;
height: 62px;
width: 194px;
float: left;}

Here is the CSS that is used for the header and logo:


#header {height: 62px;
padding-bottom: 231px;}

#logo {position: relative;
top: 62px;
left: 95px;}


Here is the XHTML:

<div id="container">

<div id="header">
<img id="logo" src="logo.gif" width="740" height="231" alt="Justin Cener Designs Logo 2008" />
<ul id="nav">
<li id="home"><a href="index.htm">Home</a></li>
<li id="about"><a href="about.htm">About</a></li>
<li id="services"><a href="services.htm">Services</a></li>
<li id="portfolio"><a href="portfolio.htm">Portfolio</a></li>
<li id="contact"><a href="contact.htm">Contact</a></li>
</ul>
</div>...............other code follows

The above is then repeated for each button and again for each hover state. The problem seems to be in the first part of code. In FF, the buttons make up a full navigation bar and are flush next to each other. This is the way I want it to come out.

Then, in IE 7, there are 2 huge differences.

1) The whole Navigation starts on the right of the header logo.
2) Each button drops down maybe 3-5 px from the next (see picture attached)

I don't understand why it is like this? Can anyone point me in the right direction? Thanks!

Sorry, screen caps don't work here.

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

Hello, and thanks so much in advance for any assistance you could offer.

Let me start by stating that I have limited computer knowledge. I'm having problems with a drop-down menu, but if you really don't think the drop-down menu is good (I got it from somewhere else and then tweaked it through guess-and-check work), then I'll listen if you can recommend me a better one. But I'm afraid to spend the high amount of hours it would take me to switch to a different type of drop-down menu, only for someone else to tell me the new one isn't good, so please don't suggest an alternative unless you're positive it's much better.

The problem with my drop-down menu is that it doesn't work well in IE9. Note that it's designed to work when you hover over an image, as opposed to over text, and I'd like to keep it this way. The problem is that only the first item on the first drop-down level appears in IE9. Or, if you're in compatibility view, everything works except the margin or padding seems to throw off the background-color highlight when you hover over with your cursor, instead of highlighting the whole item it just gives a bar of highlight at the top of the item. I'm not overly concerned about the highlighting issue, but I realize many people won't have compatibility mode on in their browsers, so it won't work for them at all.

Here is the CSS code for the drop-down menu, followed by an example of it in use:

Code:

ul#css3menu,ul#css3menu ul{
	list-style:none;border-width:0px;}
ul#css3menu ul{
	display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;background-color:transparent;}
ul#css3menu ul ul{
	position:absolute;top:-2px;right:100%;}
ul#css3menu{
	display:block;font-size:0;float:left;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0;}
ul#css3menu ul>li{
	margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;text-align:right;font:bold 15px "arial narrow";color:#FF0000;background-color:#0D0D0D;border-width:0px;border-style:none;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:right;padding:3px 0px 3px 0px;background-color:#0D0D0D;border-width:0px;border-style:none;font:bold 15px "arial narrow";color:#FF0000;padding-right:6px;padding-left:6px;}
ul#css3menu li:hover>a{
	background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu span{
	display:block;overflow:visible;}
ul#css3menu ul li:hover>a{
	background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu._>li>a{
	padding:0;}

So here is an example of the drop-down menu. This is only part of it, as the whole thing is very long. I think you can understand how it works like a tree, but let me know if you want more details.

Code:

<div style="position:absolute; top:53px; right:130px; z-index:6;">
<span class="menu"><ul id="css3menu">
	<li class="toplast"><span><a class="noyellow" href="http://www.themetaldiscourser.com/aggregator/index.php"><img src="http://www.themetaldiscourser.com/images/menulink-aggregator-2.png" style="filter:alpha(opacity=90); opacity:0.90; width:123px; height:18px;"></a></span>
	<ul>
		<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/business-career-and-technology-index.php">Business, career & technology</a></span></a>
		<ul>
                        <li><a href="#"><span><a href="/aggregator/accolades.php">Accolades</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/charity.php">Charity</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/instructional.php">Instructional</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/legal-controversy.php">Legal controversy</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/miscellaneous-business-and-career.php">Miscellaneous business and career</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/live-performance.php">Live performance</a></span></a>
                                <ul>
                                <li><a href="#"><span><a href="/aggregator/incidents.php">Incidents</a></span></a></li>
                                </ul>
                        </li>
			<li><a href="#"><span><a href="/aggregator/marketing.php">Marketing</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/popularity.php">Popularity</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/technology.php">Technology</a></span></a>
			        <ul>
                                <li><a href="#"><span><a href="/aggregator/instrumentation.php">Instrumentation</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/internet.php">Internet</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/production.php">Production</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/radio.php">Radio</a></span></a>
                                        <ul>
                                        <li><a href="#"><span><a href="/aggregator/internet-radio-stations.php">Internet radio stations</a></span></a></li>
                                        </ul>
			        <li><a href="#"><span><a href="/aggregator/video.php">Video</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/video-games.php">Video games</a></span></a></li>
                                </ul>
                        </li>
			<li><a href="#"><span><a href="/aggregator/stores.php">Stores</a></span></a>
                                <ul>
			        <li><a href="#"><span><a href="/aggregator/store-reviews.php">Store reviews</a></span></a></li>
                                </ul>
                        </li>
		</ul>
		</li>

		<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/genre-qualification-and-discourse-index.php">Genre qualification & discourse</a></span></a>
		<ul>
			<li><a href="#"><span><a href="/aggregator/academia.php">Academia</a></span></a>

I then bring in this drop-down menu on every page with:

Code:

<?php include("header.html"); ?>

I'm really so grateful for any suggestions. I recall the drop-down menu had problems in earlier versions of IE, which I managed to fix thanks to the help of others, so I though the problems were settled. I definitely don't have enough knowledge to fix this on my own, but if you truly believe I should switch to a new type of drop-down menu then I'm very willing to take your advice about that and put in the work. Ideally I already have a good drop-down menu that just needs to be tweaked, but hey, who knows.

PS - I do have this at the top of my page, which in similar situations I see is often cited as being the problem if it's missing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Hi, I'm totally new to css so all help appreciated

First, here's my site: www. hornet .edu .hk /dev

As you can probably see, I'm trying to edit a template for joomla. The drop down menu for 'Test 1' is split up, so once I hover beyond 'Sub Test 1' the menu disappears. I want my submenu items to stick together so that it'll work, but I don't know where to start. can anyone help? thanks!

templace.css:
/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
height: 100%;
margin-bottom: 1px;
}

form {
display:inline;
}

body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background:url(../images/bg_page.png) #DDDDDD top repeat-y;
}

body, td{
font-family: "Trebuchet MS";
font-size: 13px;
color: #000;
line-height: 1.3em;
}

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}

input.button { cursor: pointer; }
input.inputbox{
background:#FFF;
font-size: 11px;
color: #000;
border: 1px solid #DBDBDB;
height: 17px;
padding:2px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
}

p { margin-top: 0; margin-bottom: 5px; }

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

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 0px;
margin: 0px;
}

div#top_menu{
height:54px;
margin:0px auto;
width: 980px;
}

#topnav{ height: 54px; width:980px; margin: 0px; padding:0px; margin-top:8px; font-weight: bold; text-transform:uppercase; }
#topnav ul { margin: 0px; padding: 0px 20px; width: auto; float: left; list-style-type:none; }
#topnav ul li{ margin: 0px; padding: 0px; height: 42px; float: left; position: relative; margin-top:7px; margin-left:7px; }
#topnav ul li a{ color: #000; font-weight: bold; text-decoration: none; padding: 0px 12px 0px 12px; height:42px; line-height:35px; display: block; float: left; -webkit-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; }
#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
#topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
#topnav ul li li { width:auto; height: 30px; margin-left:0px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
#topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 277px; border-left: 0px; padding: 0px 10px 0px 10px; height:30px; line-height:30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
#topnav ul li li a:hover{ background: none; background-color: #FFFFFF; left: 0; width: 277px; padding: 0px 10px 0px 10px; height:30px; }
#topnav ul li ul { left: -999em; top: 26px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; padding-left:0px; }
#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }
#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }

#topnav ul.menu li{
background-image:none;
}

div#main_bg{
margin:0px auto;
width: 980px;
text-align:left;
}

div#h_area{
margin:0px auto;
width: 980px;
height:559px;
text-align:left;
padding-top:10px;
}
div#h_area img{
margin-left:14px;
}
.logo{
display: block;
float:left;
padding-top:5px;
margin-bottom:10px;
margin-left:10px;
width:520px;
}
a.logo,a.logo:link,a.logo:hover, a.logo:visited{
font-size:37px;
line-height: 58px;
color:#000;
text-decoration:none;
font-weight:normal;
font-family: "Trebuchet MS";
}

div#position0{
float:right;
text-align:left;
margin-right: 20px;
margin-top: 10px;
}

div#position0 div.search{
width: 222px;
height:46px;
text-align:left;
background: url(../images/search_bg.gif) top left no-repeat;
}
div#position0 div.search .inputbox {
background:#FFF;
width: 156px;
height: 17px;
font-size: 11px;
color: #000;
margin:10px 0px 0px 50px;
border: 1px solid #DBDBDB;
padding:5px 2px 2px 4px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
}
div#position0 label{
display:none; /* joomla 1.6 update */
}



#leftcolumn{
margin-left:9px;
padding:0px;
width:205px;
float:left;
}
#rightcolumn{
margin-right:9px;
padding:0px;
width:205px;
float:right;
}

#maincolumn{
width:520px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_middle{
width: 730px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_big{
width: 957px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}

div.path{
margin:10px 0 0 0px;
padding: 5px;
padding-left:30px;
background:url(../images/breadcrumbs_bg.png) top left no-repeat;
}

div.nopad {
float:left;
padding:0 0px 15px 0px;
}

div.nopad ul {
clear: both;
}

/*joomla 1.6 update start */
.item-separator {
height:10px;
line-height:10px;
}
.items-more {
border:1px solid #0F0;
}

table.category{
border:1px solid #CCC;
width:100%;
text-align:center;
}
table.category th,table.category td{
padding:2px 6px;
}
table.category thead{
background:#EEE;
}
.jcat-children ul,.jcat-children li{
margin:0;
list-style:none;
}
.jcat-children li a{
background:url(../images/bullet_green_arrow.png) no-repeat 0 12px;
display:block;
padding:5px 5px 5px 15px;
font-size:0.9em;
}
.image-left
{
float:left;
margin:0 15px 5px 0;
}
/*joomla 1.6 update end */

#leftcolumn div.moduletable_menu, #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, /* joomla 1.6 update */
#leftcolumn div.module_menu, #leftcolumn div.module{
margin: 10px 0px 0px 0px;
padding:0px;
width: 205px;
}
.article_column {
padding-right:10px;
}
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
margin: 10px 0px 0px 0px;
padding: 0px 0px 3px 0px;
width: 205px;
}
div.bannergroup_text {
margin:0px 13px 15px 13px;
}
.bannerheader {
font-weight:bold;
margin-bottom:10px;
}
.banneritem_text {
margin-bottom:10px;
}
.bannerfooter_text {
margin-bottom:10px;
}
#leftcolumn div.module_menu, #rightcolumn div.module_menu, /* joomla 1.6 update */
#leftcolumn div.moduletable, #rightcolumn div.moduletable, /* joomla 1.6 update */
#leftcolumn div.moduletable_menu, #rightcolumn div.moduletable_menu, /* joomla 1.6 update */
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div div,
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
background: url(../images/rub_bottom.png) center bottom no-repeat;
}
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div{
margin: 0px;
padding: 0px;
padding-bottom:5px;
width: 205px;
height:auto;
}

#leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{
background: none;
padding:4px 8px;
}
#leftcolumn h3,
#rightcolumn h3{
text-align: left;
padding-left:15px;
height: 42px;
width: 190px;
line-height: 40px;
color:#FFFFFF;
font-size:19px;
margin:0px;
font-weight:normal;
text-shadow: #1F1616 1px 1px 1px;
}
table.poll thead td {
text-align: left;
padding-left:10px;
}
table.poll td {
text-align: left;
}
#leftcolumn ul.menu li ul{
list-style: none;
}
.pollstableborder {
margin: 5px 0px 10px 0px;
}
.poll td div{
display:inline;
}


/* forms

#leftcolumn .moduletable ul,
#rightcolumn .moduletable ul {
margin: 6px 0;
list-style: none;
}

#leftcolumn .moduletable ul li,
#rightcolumn .moduletable ul li {
margin: 0;
padding: 0 2px;
}
.moduletable ul {
padding:5px 10px 5px 12px;
margin:0px;
}

.moduletable ul li {
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}*/
#leftcolumn ul.menu li#current ul li,
#rightcolumn ul.menu li#current ul li {
margin: 0px;
padding: 0px;
}
ul.menu {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.menu li{
padding:0px 10px 5px 15px;
margin:0px;
}

ul.menu li ul {
padding:0px 0px 5px 0px;
margin:0px;
}
ul.menu li ul li{
padding:0px 0px 0px 15px;
border:none;
}
ul.menu li#current ul li a{
margin-left:15px;
text-decoration:none;
}
ul.mostread {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.mostread li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
ul.latestnews, ul.weblinks {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.latestnews li, ul.weblinks li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
div.componentheading{
font-size:16px;
font-size:19px;
margin:7px auto;
}
td.contentheading{
font-weight:normal;
vertical-align:top;
font-size:19px;
height:30px;
color:#363636;
background: url(../images/contentheading_ico.png) left top no-repeat;
}
table.contentpaneopen td.contentheading{
padding-left:34px;
}
table.contentpaneopen{
border-collapse: collapse;
margin-left:5px;
}
td.buttonheading{
padding:0px 2px 0px 2px;
}
table.contentpaneopen td{
padding:0px;
}
.contentpaneopen p{
line-height:22px;
}
span.small, td.createdate, td.modifydate{
font-size:11px;
color:#999999;
}
span.pagination span, span.pagination a{
padding:5px;
}

form#login-form { /* joomla 1.6 update */
padding: 0px;
margin: 0px;
}
fieldset.userdata { /* joomla 1.6 update */
border: none;
margin: 0px;
padding:10px 10px 10px 20px;
}

form#login-form ul { /* joomla 1.6 update */
margin:0px 0px 20px 0px;
width:120px;
}
form#login-form ul li{ /* joomla 1.6 update */
padding: 0px;
margin: 0px;
list-style: disc;
background-image:none;
}

form#login-form ul li a { /* joomla 1.6 update */
text-align: left;
font-size: 10px;
color: #858585;
}
#login-form #modlgn-username, #login-form #modlgn-passwd{
width:150px;
}
div#bottom {
width:100%;
margin:0px auto;
background:#000000;
float:left;
}

div#f_area{
background:#757575;
margin:0px auto;
width: 960px;
text-align:left;
margin-bottom:3px;
}

#f_area div.newsflash {
color:#FFF;
padding:5px 10px;
}
#f_area div.moduletable, #f_area div.moduletable_menu{
float: left;
margin:10px 5px 10px 5px;
width: 309px;
}
#f_area h3{
text-align: left;
vertical-align:bottom;
height: 35px;
width: 294px;
color:#FFFFFF;
font-size:21px;
font-family:"Trebuchet MS", Tahoma, Verdana;
font-weight:normal;
margin:0px;
padding-left: 10px;
padding-top:15px;
}

/* joomla 1.6 update start */
/* pagenav */
#main ul.pagenav {
list-style-type:none;
padding:0;
overflow:hidden
}
ul.pagenav li
{
display:inline-block;
padding:0px;
margin:0;
}
#main ul.pagenav li
{
line-height:2em
}
ul.pagenav li a
{
border: 1px solid #ccc;
display:inline;
background:#eee;
padding:2px;
text-decoration:none
}
ul.pagenav li.pagenav-prev {
float:left
}
ul.pagenav li.pagenav-next {
float:right
}

.article-info
{
margin:10px 0 10px 0px;
font-size:0.9em;
}

.article-info-term
{
display:none
}

/* ++++++++++++++ icons ++++++++++++++ */

ul.actions
{
text-align:right;
padding:0 ;
width:100%;
margin:0
}

ul.actions li
{
display:inline
}

ul.actions a
{
text-decoration:none
}

/* ++++++++++++++ items more ++++++++++++++ */

.items-more
{
padding-top:10px;
}

.items-more h3
{
font-weight:normal;
margin:0;
padding:5px 5px 5px 5px;
font-size:1.4em
}

.items-more ol
{
line-height:1.3em;
list-style-type:none;
margin:0;
padding:10px 0 10px 2px;
}

.items-more ol li
{
padding:2px;
}

.items-more ol li a
{
display:inline;
margin:0;
font-weight:normal;
padding:5px 5px 5px 20px;
}

.items-more ol li a:hover,
.items-more ol li a:active,
.items-more ol li a:focus
{
font-weight:normal;
padding:5px 5px 5px 20px;
text-decoration:none
}


/* ++++++++++++++ pagination ++++++++++++++ */

#main .pagination
{
margin:10px 0 ;
padding:10px 0 10px 0px;

}

#main .pagination ul
{
list-style-type:none;
margin:0;
padding:0;
text-align:left;
}

#main .pagination li
{
display:inline;
padding:2px 5px;
text-align:left;
border:solid 0px #eee;
margin:0 2px
}

.pagenav
{padding:2px}

#main .pagination li.pagination-start,
#main .pagination li.pagination-next,
#main .pagination li.pagination-end,
#main .pagination li.pagination-prev
{border:0}

#main .pagination li.pagination-start ,
#main .pagination li.pagination-start span
{
padding:0

}
p.counter
{
font-weight:bold;
}

/* ++++++++++++++ blog ++++++++++++++ */

.cols-1
{
display: block;
float: none !important;
margin: 0 !important;
}

.cols-2 .column-1
{
width:46%;
float:left;
}

.cols-2 .column-2
{
width:46%;
float:right;
margin:0
}

.cols-3 .column-1
{
float:left;
width:46%;
padding:0px 5px;
margin-right:4%

}
.cols-3 .column-2
{
float:right;
width:46%;
margin-left:0;
padding:0px 5px
}
.cols-3 .column-3
{
float:left;
width:100%;
padding:0px 5px
}

.items-row
{
overflow:hidden;
margin-bottom:10px !important;
}

.column-1,
.column-2,
.column-3
{
padding:10px 5px
}

.column-2
{
width:55%;
margin-left:40%;
}

.column-3
{
width:30%
}

.blog-more
{
padding:10px 5px
}

/* ++++++++++++++ readmore ++++++++++++++ */
.readmore a:link,.readmore a:visited,a.readmo link,a.readmo visited
{
color: #ccc;
background: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: none;
padding:4px 8px;
margin-top:10px;
}

.readmore a:hover,.readmore a:active,.readmore a:focus,a.readmore a:hover,a.readmore a:active,a.readmore a:focus
{
background: #333;
color: #fff;
}

a.readmo hover,a.readmo active,a.readmo focus {
background: #333;
color: #fff;
}


/* joomla 1.6 update end */

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

#syndicate{
float:left;
padding-left: 25px;
}




/* --- slider --- */
#slider{
width: 960px;
height:415px;
margin-top:5px;
margin-left:10px;
background:url(../images/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:860px;
bottom:10px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(../images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

/* --- end slider --- */

dawuster.com/test/index2.htm

I can't figure out why my "Manufacturers" css drop menu on the left side doesn't work. It works it its own .htm document when i was developing it but once I stick it in to a pre-existing page, it won't function. Thanks in advance!

Hello, I am a javascript noob trying to do a javascript dropdown and this does not seem to be working at all. When ever I add in the list for the drop down, everything gets pushed to the left and where ever the list begins, every link after that just disappears. I'm pretty sure the link is being put inline instead of block like I wanted it to but i'm not sure how to correct it and I am getting completely frustrated doing it. I was wondering if anyone could tell me what I was doing wrong. Also, I used the suckerfish method for the drop down.

HTML Code:
Code:

<div id="nav">
        <ul>
          <li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
          <li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></li>
          <li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
          <li><a href="distribution.html" id="nav_distribution" class="" title="Distribution">DISTRIBUTION</a></li>
          <ul id="break"><li id="first">
            <li><a href="case_studies.html" id="nav_casestudies" class="casestudies" title="Case Studies">CASE STUDIES</a></li>
            
            <li><a href="#" id="nav_blog" class="" title="Blog">BLOG</a></li>
            <ul>
              <li><a href="#">Search Engine Marketing</a></li>
              <li><a href="#">Pay Per Click Management</a></li>
              <li><a href="#">Lovcal Search Marketing</a></li>
              <li><a href="#">Contextual Marketing</a></li>
              <li><a href="#">Shopping Comparison</a></li>
              <li><a href="#">Paid Inclusion</a></li>
              <li><a href="#">Search Engine Optimizaiton</a></li>
            </ul>
            </li>
          </ul>
        </ul>
      </div>
[\code]

JavaScript Code:
[code]
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("break");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

Here is the part of the css I created but i'm not sure how it's all supposed to go together since I'm a javascript noob.
CSS:
Code:

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	float:right;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #7d6340;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

#break a {
	font-weight: bold;
	color: green;
}

#break a {
	text-decoration: none;
}

#break li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

#break li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #7d6340;
	border-width: 0 5px;
}

#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
	background-image:url(images/agency2.gif);
	border:0px;
	width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
	background-image: url(images/agencyup2.gif);
	border: 0px;
	width: 54px;
	
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
	background-image: url(images/services2.gif);
	border:0px;
	width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
	background-image: url(images/expandedservice2.gif);
	border: 0px;
	width: 56px;
}

#nav ul li a#nav_technology,
#nav ul li a:visited#nav_technology{
	background-image: url(images/technology2.gif);
	border:0px;
	width: 76px;
}
#nav ul li a:hover#nav_technology,
#nav ul li a#nav_technology.active,
#nav ul li a:visited#nav_technology.active {
	background-image: url(images/technology2up.gif);
	border: 0px;
	width: 76px;
}
#nav ul li a#nav_distribution,
#nav ul li a:visited#nav_distribution {
	background-image:url(images/distribution2.gif);
	border:0px;
	width: 72px;
}
#nav ul li a:hover#nav_distribution,
#nav ul li a#nav_distribution.active,
#nav ul li a:visited#nav_distribution.active {
	background-image: url(images/distributionup2.gif);
	border: 0px;
	width: 72px;
}

#nav ul li a#nav_casestudies,
#nav ul li a:visited#nav_casestudies {
	background-image: url(images/casestudies2.gif);
	border:0px;
	width: 72px;
}
#nav ul li a:hover#nav_casestudies,
#nav ul li a#nav_casestudies.active,
#nav ul li a:visited#nav_casestudies.active {
	background-image: url(images/casestudiesup2.gif);
	border: 0px;
	width: 72px;
}
#nav ul li a#nav_blog,
#nav ul li a:visited#nav_blog {
	background-image: url(images/blog2.gif);
	border:0px solid black;
	width: 27px;
}
#nav ul li a:hover#nav_blog,
#nav ul li a#nav_blog.active,
#nav ul li a:visited#nav_blog.active {
	background-image: url(images/blogup2.gif);
	border: 0px;
	width: 27px;
}

Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included?

This is nice, but the css in too messy.

http://www.bluescopesteel.com

If you have any betterones please tell me.

Cheers

I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted.

The double row drop down menu bar looks like this:
[menu1][menu2][menu3]
[menu4][menu5][menu6]
............................[menu6a]
............................[menu6b]

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

Hello all,

I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site

Hey guys ,
I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" .
The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated ,

Code:

ul#css3menu,ul#css3menu ul{
	margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
	display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;}
ul#css3menu ul ul{
	position:absolute;left:98%;top:-2px;}
ul#css3menu{
	padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0 0 0 6px;}
ul#css3menu ul>li{
	margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:left;}
ul#css3menu li:hover>a{
	background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g  radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
	border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
	width:16px;height:16px;}
ul#css3menu img.over{
	display:none;}
ul#css3menu li:hover > a img.def{
	display:none;}
ul#css3menu li:hover > a img.over{
	display:inline;}
ul#css3menu ul span{
	background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
	background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
	background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end  Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
	border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;} 
ul#css3menu li.sublast>a{
	border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}

And here is the html
Code:

<ul id="css3menu">
	<li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a>
	<ul>
		<li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 1"><span>Item 0 1</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 2"><span>Item 0 2</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 3"><span>Item 0 3</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 4"><span>Item 0 4</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 5"><span>Item 0 5</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 6"><span>Item 0 6</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 7"><span>Item 0 7</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 8"><span>Item 0 8</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 9"><span>Item 0 9</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 10"><span>Item 0 10</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 11"><span>Item 0 11</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li>
		</ul>

		</li>
		<li><a href="#" title="Item 0 12"><span>Item 0 12</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li>
		</ul>

		</li>
		<li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a>
		<ul>
			<li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li>
		</ul>

		</li>
	</ul>

	</li>
</ul>

This is probably a tall order any advice is appreciated , TYVM

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'm pretty new to CSS, but I've managed to put together a website based from a psd, that validates and everything has gone well.

My menu, however, is pretty shoddy. I have everything positioned the way I want it, but what I want to do is convert the lists inside from dropping down to being horizontal parallell to the nav bar itself.

From:
--- --- --- ---
|
|
To:
_ _ _
--- --- --- ---



The site is here. Ignore the issues with the absolute positioning; its because of the ads at the top, and it doesn't affect the nav bar.


I am desperatefor some help, it is ridiculous to figure out. Anyone who can help me, I would be crazy grateful. Thanks,

Tom

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
	<style type="text/css">
/*BEGINNING OF CSS*/

body{
	padding: 0px;
	background-color: #000000;
	font-family: Verdana;
	color: #FFFFFF;
	text-align: center;
	}
	
	
div.container	{
	margin: 0 auto;
	padding: 0px;
	width: 1024px;
	text-align: left;
	}

div.left {
	float: left;
}

div.right {
	float: right;
}
	
div.logo {
	margin: 0 auto;
	background-position: top center;
	text-align: center;
	}
	
div.header {
	text-align: center;
	padding-top: 0px;
}

div.navigation	{
	background-color: #000000; 
	background-image: url(http://i39.tinypic.com/igm16v.jpg);
	overflow: auto;
}

div.content	{
	background-color: #000000;
	background-image: url(http://i39.tinypic.com/2ce2qus.jpg);
	overflow: auto;
	height: 525px;
	margin: 0 auto;
}

div.footer	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/2vjsbrp.jpg);
	overflow: auto;
	height: 290px;
	padding: 0px;
	margin: 0 auto;
}
	
p.head	{
	text-align: left;
	font-size: 24px;
	}
	
p.content	{
	position: relative;
	font-size: 12px;
}

a.main	{
	text-decoration: none;
	font-size: 18px;
	padding: 8px;
	color: #FFFFFF;
	background-color: transparent;
	}
	
a.sub	{
	font-size: 16px;
	line-height: 150%;
	text-align: left;
	text-decoration: none;
	color: #999999;
	background-color: transparent;
	}
	
a.plain	{
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	background-color: transparent;
	}
	
a.plainfoot	{
	text-decoration: none;
	font-size: 12px;
	color: #959595;
	opacity: 90%;
	background-color: transparent;
	border-bottom: 1px solid #0d0f10;
	opacity: 100%;
	}
	
#nav, #nav ul {
	margin: 0 auto;
	padding: 0px;
	list-style: none;
}

#nav a.main {
	display: block;
	margin-left: 5px;
}

#nav a.sub {
	display: block;
	width: 150px;
	margin-left: 5px;
}


#nav li {
	float: left;
	width: 5em;
}
#nav li ul {
	position: absolute;
	width: 1em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

#nav li ul {
	position: absolute;
	padding: 7px;
	width: 1em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	font-family: lucida grand;
}

h1.footer	{
	position: relative;
	font-size: 18px;
	color: #123712;
	margin-bottom: 0%;
	margin-left: 50px;
}

p.footer	{
	font-size: 12px;
	color: #909090;
	margin-left: 50px;
	max-width: 200px;
	text-decoration: none;
}

h1.main	{
	font-size: 28px;
	font-weight: 200;
	margin-left: 140px;
	padding: 0;
	text-shadow: #959595;
}

p.content	{
	font-size: 12px;
	color: #FFFFFF;
	line-height: 130%;
	margin-left: 140px;
	max-width: 450px;
	text-decoration: none;
	
}

div.date	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/xnc3de.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	margin-top: 17px;
	margin-left: 0px;
}

h1.main2	{
	font-size: 28px;
	font-weight: 200;
	margin-left: 140px;
	text-shadow: #959595;
}

p.content2	{
	font-size: 12px;
	line-height: 130%;
	margin-left: 140px;
	max-width: 450px;
	text-decoration: none;
}

div.date2	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/xnc3de.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	min-height: 100px;
	margin: 0px;
}

div.sidebar	{
	background-color: transparent;
	background-image: url(http://i41.tinypic.com/2r76kpu.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	padding: 0px;
	min-height: 200px;
	margin-top: 15px;
	margin-right: 15px;
}



div.datetext1	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 12px;
	font-weight: 200;
	color: #FFFFFF;
	left: auto;
	top: 382px;
	padding-top: 262px;
	padding-left: 44px;
}
div.dateid1	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #123712;
	left: auto;
	top: 382px;
	padding-top: 281px;
	padding-left: 47px;
}
div.datetext2	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 12px;
	font-weight: 200;
	color: #FFFFFF;
	left: auto;
	top: 382px;
	padding-top: 44px;
	padding-left: 44px;
}
div.dateid2	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #123712;
	left: auto;
	top: 382px;
	padding-top: 63px;
	padding-left: 47px;
}
div.sidebarhead	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 18px;
	font-weight: 200;
	color: #123712;
	text-align: center;
	left: auto;
	top: 400px;
	padding-top: 15px;
	padding-left: 630px;
}
div.sidebartext	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	line-height: 130%;
	text-align: left;
	max-width: 168px;
	left: auto;
	top: 400px;
	padding-top: 50px;
	padding-left: 610px;
}




	
/*END OF CSS*/
	</style>
	<script type="text/javascript">
	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>
	
<title>Obsidian Recording Front Page</title>
	</head>
<body>
						
<div class="container">
	
	
	<div class="left">
	<img src="http://i39.tinypic.com/14j6nsz.jpg" alt="left column"/>
	</div>
	
	
	<div class="right">
	<img src="http://i40.tinypic.com/b4yir5.jpg" alt="right column"/>
	</div>
	
	
	<div class="logo">
	<img src="http://i40.tinypic.com/2u77lua.jpg" alt="logo"/>
	</div>
	
	
	<div class="header">
	<img src="http://i41.tinypic.com/1178qo6.jpg" alt="header"/>
	</div>
	
	<div class="navigation">
	
	
<ul id="nav">
	
	<li><a class="main" href="http://www.obsidianrecording.com">Home</a></li>
	<li><a class="main" href="#">Music</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/featured">Featured</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/artists">Artists</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/artists/thisisthefall">My Band</a></li>
		</ul>
		</li>
	<li><a class="main" href="http://www.obsidianrecording.com/design">Design</a></li>
	<li><a class="main" href="#">Store</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/recording">Recording</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/design">Design</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/music">Music</a></li>
		</ul>
	</li>
	<li><a class="main" href="#">About</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/rates">The Rates</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/studio">The Studio</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/tomhoneyman">Tom Honeyman</a></li>
		</ul>
	</li>
</ul>	

	</div>
	
	<div class="content"
		<div class="date">
		
		<div class="sidebar"
		<h1 class="main">Cast into Shadows</h1>
		<p class="content">The first band ever to record at Obsidian Recording was Cast into Shadows. I'd like to shout out to Donnie, Evan, Josh, Brian, and J.T. for being the first group to come through here and for making a kickass record along the way. You can find more about them in the Artists section of the site.</p>
		</div>
		</div>
		
		<div class="date2">
		<h1 class="main2">Website Launched!</h1>
		<p class="content2">After a looong time working on this site, I've finally finished just in time for summer!  What you can expect is a lot of updates on what artists who record here are doing, free downloads, cool videos of their shows, special rates just for people who visit the site, and more.  If you'd like  to contact me, all my information and more is in the About section of the site. <br /><br /> Thanks for visiting, and I hope you enjoy!</p>
		</div>
		<div class="datetext1">Jun</div>
		<div class="dateid1">1</div>
		<div class="datetext2">Jun</div>
		<div class="dateid2">7</div>
		<div class="sidebarhead">New Website!</div>
		<div class="sidebartext">Welcome to the all-new Obsidian Recording site! I will regularly update with news, special rates, videos, featured free downloads, and more.</div>
		</div>
	
	<div class="footer">
	<br /><br /><br />
	<h1 class="footer">Recent Projects</h1>
	<p class="footer"><a class="plainfoot" href="www.obsidianrecording.com/artists/castintoshadows">Cast into Shadows</a><br /><br /><a class="plainfoot" href="http://www.obsidianrecording.com/artists/thisisthefall">This is the Fall</a></p>
	</div>

</div>							
</body>
</html>