CSS - Alignment In Safari-drop Down Menus

I have added drop-down menus, but they are not appearing directly underneath the originating links. They are WAY off to the right. I can't figure out why for the life of me. Help, please?

http://www.bartlett-family.net/BBCON

Chris

Hi guys,

I recently learned about pure css drop down menus.

Now if you look at my site in FF, and IE, you see in IE, it just doesn't display correctly.

Why is this? Tips on fixing this?

www.projectfinalfantasy.com

Regards,
Joseph Man.

Hi all,

Anyone know of any problems with CSS drop down menus a la suckerfish (www.alistapart.com) and Konqueror?

Here's my CSS for this http://www.nzwebz.com/wikindx2 :

Code:

body {
	background	:	url("paper.jpg");
	font-family	:	sans-serif;
}
ul {
	padding		:	0;
	margin		:	0;
	list-style	:	none;
}
li {
	float		:	left;
	position	:	relative;
}
li ul {
	display		:	none;
	position	:	absolute; 
	top		:	1.1em;
	left		:	0;
	border		:	4px #CCCC99 groove;
	background	:	#ffcc99;
	width		:	7em;
}
li > ul {
	top		:	auto;
	left		:	auto;
	}
li:hover ul, li.over ul{
	display		:	block;
	}

A:visited, A:link, A:active {
	text-decoration	:	none;
	color		:	#666666;
	background	:	transparent;
	display		:	block;
	width		:	7em;
}
A:hover {
	text-decoration	:	none;
	background	:	#ff9900;
	color		:	white;
	display 	:	block;
	width		:	7em;
}
.clear {
	clear		:	both;
}
.titleTable {
	width		:	90%;
}
.menuTable {
	margin		:	0 0 0 5%;
}
.menuli {
	color		:	#ff9900;
}
.mainTable {
	border		:	#ff9900 3px groove;
	width		:	90%;
}
h1, h2, h3, h4	{
	color		:	#ff9900;
}

With the javascript (which needs work I know), it works with IE (with javascript fix), Netscape, Firefox and Mozilla but the drop downs won't work with Konqueror. Javascript is turned on in Konqueror in case it's anything to do with that.

I notice that even the suckerfish pretty example doesn't work in Konqueror (v3.1-12)

Thanks.

Hi

I am following a list aparts suckerfish dropdown tutorial. So far I have managed to get everything working for Mozilla.

The javascript bit at the end, enabling it to work for explorer is troubling me. can anyone help?

Do I put the javascript in the CSS file or the Html? I've tried both but neither seem to work!

Is there a better way to do this?

Thanks

@kravvitz

You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply...

Hi all,

I'm adding drop down menus to my company's site and have it working as I'd like in Firefox and Safari but the drop downs do not appear at all on IE7/Win. I've tried a lot of different things to fix it but I think I am missing some fundamental understanding here so it's all been shots in the dark. Any tips would be greatly appreciated! Thanks in advance.

P.S. I realize the CSS might be a bit confusing at first glance - what it achieves is essentially just changing the positioning of the background image when hovered over to reveal the "hover state" of a particular menu choice.

The menu in question is the horizontal bar near the top (MBA Programs, Faculty & Research, etc.)

URL: http://rady.ucsd.edu/index-dev.html

Relevant HTML:

Code:

<ul id="nav-main" class="home">
			<li id="mba"><a href="/mba/">MBA Programs</a>
				<ul>
					<li class="first-item"><a href="/mba/fulltime/">Full-Time MBA</a></li>
					<li><a href="/mba/flex/">FlexMBA</a></li>
					<li><a href="/mba/admissions/">Admissions</a></li>
					<li><a href="/mba/careers/">MBA Career Connections</a></li>
					<li><a href="/mba/profiles/">Student & Alumni Profiles</a></li>
					<li><a href="/mba/organizations/">Student Organizations</a></li>
					<li><a href="/mba/seminars/">Professional Seminars</a></li>
					<li><a href="/mba/mentors/">Executive Mentors</a></li>
					<li class="last-item"><a href="/mba/speakers/">Executive Speakers</a></li>
				</ul>
			</li>
			<li id="faculty"><a href="/faculty/">Faculty & Research</a>
				<ul>
					<li class="first-item"><a href="/faculty/directory/">Faculty Directory</a></li>
					<li><a href="/faculty/research/">Research Areas</a></li>
					<li><a href="/faculty/seminars/">Research Seminars</a></li>
					<li><a href="/faculty/recruiting/">Faculty Recruiting</a></li>
					<li class="last-item"><a href="faculty/postdoctoral/">Postdoctoral Research</a></li>
				</ul>
			</li>
			<li id="exec"><a href="/exec/">Executive Development</a>
				<ul>
					<li class="first-item"><a href="/exec/custom/">Custom Programs</a></li>
					<li><a href="/exec/open/">Open Enrollment Programs</a></li>
					<li><a href="/exec/learn/">Learning Consortium</a></li>
					<li><a href="/exec/leadership/">Leadership Assessment</a></li>
					<li><a href="/exec/align/">Align Executive Series</a></li>
					<li class="last-item"><a href="/exec/faq/">Frequently Asked Questions</a></li>
				</ul>
			</li>
			<li id="corporate"><a href="/corporate/">Corporate Connections</a></li>
			<li id="news"><a href="/news/">News & Events</a>
				<ul>
					<li class="first-item"><a href="/news/releases/">News Releases</a></li>
					<li><a href="/news/media-coverage/">Media Coverage</a></li>
					<li><a href="/news/faculty-experts/">Faculty Experts</a></li>
					<li class="last-item"><a href="/news/newsletter/">Newsletter</a></li>
				</ul>
			</li>
			<li id="invest"><a href="/invest/">Invest in Rady</a>
				<ul>
					<li class="first-item"><a href="/invest/edge/">Corporate EDGE</a></li>
					<li><a href="/invest/venture-fund/">Dean's Venture Fund</a></li>
					<li><a href="/invest/fellowships/">Endowed Fellowships</a></li>
					<li class="last-item"><a href="/invest/chairs/">Endowed Chairs</a></li>
				</ul>
			</li>
			<li id="alumni"><a href="http://alumni.rady.ucsd.edu">Alumni Relations</a></li>
			<li id="undergrad"><a href="/undergrad/">Undergraduate</a>
				<ul>
					<li class="first-item"><a href="/undergrad/courses/">Courses</a></li>
					<li class="last-item"><a href="/undergrad/course-readers/">Course Readers</a></li>
				</ul>
			</li>
			<li id="about"><a href="/about/">About</a>
				<ul>
					<li class="first-item"><a href="/about/welcome/">Welcome</a></li>
					<li><a href="/about/staff/">Our Staff</a></li>
					<li><a href="/about/campus/">Our Campus</a></li>
					<li><a href="/about/sandiego/">Life in San Diego</a></li>
					<li><a href="/about/dean/">About the Dean</a></li>
					<li><a href="/about/athena/">Athena</a></li>
					<li class="last-item"><a href="/about/beyster/">Beyster Institute</a></li>
				</ul>
			</li>
		</ul>

Relevant CSS:

Code:

	#nav-main { width: 903px; clear: both; list-style: none; padding: 0 0 2em 0; float: left; position: relative; }
	#nav-main.home { padding-bottom: 0; }
	
		#nav-main li { float: left; padding: 0; margin: 0; text-indent: -9000px;}
		
		#nav-main li ul { position: absolute; list-style: none; }
		
		#nav-main li ul li { display: none; text-indent: 0px; }
		
		#nav-main li ul li a { font-size: 11px; line-height: 1.1; height: 20px; padding-left: 9px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }

		#nav-main li:hover ul li { display: block; }
		
		#nav-main ul li a { padding-left: 0px; padding-right: 12px; }
		
		#nav-main li ul li.first-item a { padding-top: 10px; }
		#nav-main li ul li.last-item a { padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
		
		#nav-main li ul a, #nav-main li ul a:hover { width: 150px; background: #fafafa; }
	
		#mba ul li a, #mba ul li a:hover { width: 155px; }
		#faculty ul li a, #faculty ul li a:hover { position: relative; left: 2px; width: 137px; }
		#exec ul li a, #exec ul li a:hover { position: relative; left: 4px; width: 172px; }
		#corporate ul li a, #corporate ul li a:hover { position: relative; left: 2px; width: 200px; }
		#news ul li a, #news ul li a:hover { position: relative; left: 3px; width: 117px; }
		#invest ul li a, #invest ul li a:hover { position: relative; left: 2px; width: 139px; }
		#undergrad ul li a, #undergrad ul li a:hover { position: relative; left: -1px; width: 117px; }
		#about ul li a, #about ul li a:hover { position: relative; left: -73px; width: 107px; text-align: right; }
	
		#mba a, #faculty a, #exec a, #corporate a, #news a, #invest a, #alumni a, #undergrad a, #about a { display: block; height: 34px; background: url(../images/nav.gif) no-repeat 0 0; }

		#mba a { width: 105px; }
		#mba a:hover, #mba.current a { background-position: 0px -34px; }
		#faculty a { width: 127px; background-position: -105px 0; }
		#faculty a:hover, #faculty.current a { background-position: -105px -34px; }
		#exec a { width: 152px; background-position: -232px 0; }
		#exec a:hover, #exec.current a { background-position: -232px -34px; }
		#corporate a { width: 150px; background-position: -384px 0; }
		#corporate a:hover, #corporate.current a { background-position: -384px -34px; }
		#news a { width: 107px; background-position: -534px 0; }
		#news a:hover, #news.current a { background-position: -534px -34px; }
		#invest a { width: 59px; background-position: -641px 0; }
		#invest a:hover, #invest.current a { background-position: -641px -34px; }
		#alumni a { width: 64px; background-position: -700px 0; }
		#alumni a:hover, #alumni.current a { background-position: -700px -34px; }
		#undergrad a { width: 82px; background-position: -764px 0; }
		#undergrad a:hover, #undergrad.current a { background-position: -764px -34px; }
		#about a { width: 57px; background-position: -846px 0; }
		#about a:hover, #about.current a {background-position: -846px -34px; }

I have a problem and I need some help on centering the UL,LI menus instead of having it stick to the left...

Code:

#dmenu 
{
  /* font-family: Arial, Helvetica, Sans-Serif; */
  /* font-size: 12px; */
}
#dmenu li ul 
{ 
  /* top: auto; */
  /* left: auto; */
}
#dmenu li:hover ul
{
  /* lists nested under hovered list items */
  display: block;
}
#dmenu li.over ul
{
  display: block;
}
.xMenuUl
{
  text-align: center;  /* for IE stupidity */
  background-color: #FFFFFF;
  list-style-type: none;  /* hide the bullet icon */
  margin: 0;
  padding: 0;
}
.xMenuLi
{
  list-style-type: none;  /* hide the bullet icon */
  float: left;
}
.xMenuTitle
{
  display: block;
  width: 100px;
  text-indent: 0px;
  text-decoration: none;
  border: 1px solid #000000;
  padding: 4px;
  line-height: 14px;
}
.xSubmenuUl
{
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
  display: none;
  margin-top: -1px;
  background-color: #E7F7FF;
  background-position: top left;
  background-repeat: repeat-x;
  border-top: 1px solid #000000;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  border-left: 7px solid #FF0000;
}
.xSubmenuLi a
{
  padding: 3px;
  text-decoration: none;
  color: #000000;
  display: block;
  width: 250px;
}
.xSubmenuLi a:hover
{
  text-decoration: none;
  background: #336699;
  color: #FFFFFF;
}

Code:

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

<html>
 <head>
 </head>
<body>

This is a test...<br>sdfsdf<br>
<ul class="xMenuUl" id="dmenu">
 <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
   <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
   <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
   <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
   <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
   <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
   <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
   <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
   <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
  </ul>
 </li>
</ul>
this is a test....<br>
asdf<br>

</body>
</html>

Hello All,

I'm having a ton of difficulty on the drop down navigation bar for my site. I used webmonkey's "Add CSS Drop-Down Menus" tutorial

As I wanted a really simple, quick and easy drop down menu especially since the lists that create the menu are populated through php.

Now I found that I had to use z-index so the menu div layed on top of the text div (as other wise the menu div or the text div would overlap and obscure the other)

This all worked fine. Sadly, when I tried to put a form into one page, I realized all the input fields could not be used because of the z-indexes and the menu bar overlaying it. So again I had to find a solution and here's where I'm stuck.

Does anyone know a way I can keep it as is and have the form functional? If not, can anyone help me change the menu bar so that the second level of the list is shown on one line (therefore it won't lay on top of the form causing it to be obstructed). So I'd rollover "Telecommunications" and all the sub-categories are listed on one line

Here's the html code:
Code:

<div id="content">
<ul id=nav>
<li><a href='index.php?id=12'>About ACC</a></li>
<li><a href='index.php?id=13'>Telecommunications</a>
<ul>
<li><a href='index.php?id=6'>Telephone Systems</a>
<li><a href='index.php?id=7'>Voice Over IP Solutions</a>
<li><a href='index.php?id=5'>Local & Long Distance</a>
<li><a href='index.php?id=4'>Conferencing</a>
<li><a href='index.php?id=11'>Internet Access and Bandwidth</a><li><a href='index.php?id=10'>WAN/LAN Networking</a>
<li><a href='index.php?id=9'>Fiber Optics</a></ul></li>
<li><a href='index.php?id=14'>Our Services</a>
<ul>
<li><a href='index.php?id=8'>Cost Consulting & Analysis</a></ul></li>
<li><a href='index.php?id=19'>Contact Us</a></li>
</li>
</ul>

<div id="newscontent">

<table width="100%" border="0">
    <tbody>
        <tr>
            <td>
            <form method="post" action="mailto:spicelmf@gmail.com">
                <b>Test:<b> <br />
                <input type="text" size="71" name="title" /><br />

                <br />
                <input type="submit" value="Submit" /> <input type="reset" value="Try again" /></b> </b>
            </form>
            </td>
        </tr>
    </tbody>
</table></div>
</div>

and here's the css:
Code:

#nav {

        position: relative;

        margin: 0 auto 0 auto;

        top: 67px;

        width: 720px;
        
        left: 50px;

        padding: 0;
        
        height: 400px;
        
        /*list-style-type: none;*/

}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	position: relative;
	float: left;
        min-width: 150px;

}
li ul {
	position: absolute;
	top: 35px;
	display: none;
}
ul li a {
	display: block;
        text-align: center;
	text-decoration: none;
	line-height: 24px;
        font-size: 14px;
        color: #21448c;
	padding: 5px;
	background: #e6e3b8;
	margin: 0 2px;
        border-style: solid;
        border-width: 0 1px 1px 1px;
        border-color: #21448c;
}

ul li a:hover { background: #8da6bc; }
li:hover ul, li.over ul { display: block; }



#content {

  position: relative;
  height: 500px;
  margin: 0 auto 0 auto;
  width: 720px;
  top: 56px;
  padding: 0;      
  font-family: Arial,Helvetica,sans-serif;


}



#newscontent {

  position: absolute;
  margin: 0 auto 0 auto;
  min-height: 380px;
  top: 135px;
  padding: 0px 54px 20px 50px;
  width: 620px; 
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10pt !important;
  z-index: -1;
  background: transparent url(maincontent_bg.png) repeat-y left top;
 
}

Thanks and apologies if this was already covered, I searched for ages and couldn't find what i was looking for.

--------This Part Solved!---------

Hi Guys!

I have a CSS dropdown menu going on, and it's working semi-properly in Firefox, but is stuck behind the content div in IE6/7. I've tried using Z-index but either I'm altering the wrong tag or I'm way off in the wrong direction, as it ain't workin.
Here is the page:
http://www.whitecapgraphics.com/bates/front.php
If you look at it in IE, there's actually no indication that it is dropping down at all, but I know it is as I moved the drop downs up a few pixels and I could see them dropping behind the div.
PS - The Home button does not have a drop down menu.

My CSS:
Code:

#d1 {
	background-color: #003366;
	float: left;
	width: 200px;
	background-image: url(images/header_bg.gif);
	background-repeat: repeat-x;
	height: 107px;
}
#d2 {
	background-color: #1F2935;
	float: right;
	width: 477px;
	background-image: url(images/header_bg.gif);
}
#head_container {
	background-color: #000066;
	float: left;
	background-image: url(images/header_bg.gif);
	height: 107px;
}
#nav_container {
	background-color: #1F2935;
	float: left;
	width: 100%;
	background-image: url(images/nav_bar_bg.gif);
	height: 30px;
}
#page_container {
	margin: auto;
	width: 99.99%;
	height: 100%;
}
#content_container {
	background-color: #e4e4e4;
	float: left;
	width: 100%;
	background-image: url(images/content_blue_column_bg.gif);
	background-repeat: repeat-y;
	background-position: right;

}
#content {
	background-color: #e4e4e4;
	position: relative;
	margin-right:253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #000000;
	padding-left: 10px;
	padding-right: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
}
#right_column {
	background-color: #CC9900;
	float: right;
	width: 253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}












/*____________________________________________________________*/


* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */

/* the horizontal menu starts here */
div#nav {
	width:600px; /* sizes the nav div at a fixed width */
	float:left;
	background-color:#CCF; /* colors the div */
	background-image: url(images/nav_bar_bg.gif);
	z-index:10;
	}
div#nav li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	border:1px solid black; /* creates dividing lines between the li elements */
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	font-weight: bold;
	min-width: 126px;
	text-align:center;
	height:26px;
	}
div#nav li:first-child {
	border-left:1px solid; /*the first vertial line on the menu */
	}

div#nav li:hover { 
	background-color:#D1C9B9; /*sets the background of the menu items */
	}
div#nav a {
	display:block;
	padding:1px 6px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#D1C9B9;	/* sets the type color */
	}
div#nav a:hover {
	color:black;
	}
/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
	margin:0; 
	z-index:20; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
	left:-1px; /*aligns the drop exactly under the menu */
	top:28px;
	}
#pyt ul li {
	background-color:#B3916B;
}
#h ul li {
	background-color:#1F2935;
}
#ri ul li{
	background-color: #827977;
}
#bn ul li{
	background-color: #455D67;
}


div#nav ul li ul li {padding:0;
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid; /*  three sides of each drop-down item */
	border-bottom:1px solid;
	border-right:1px solid;
}
div#nav ul li ul li a {
	padding:1px .5em;
	font-size:small;
	text-align:left;
	vertical-align:middle;}
div#nav ul li ul li:first-child {
	border-top:1px solid; /*the top edge of the dropdown */
	}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}


/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#nav ul li ul {
	border-top:1px solid #069;
	border-left:0px; /* stops the drop inheriting the ul border */
	}

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
	@media all and (min-width: 0px){
   body div#nav ul li ul {padding-bottom:22px;}
   }
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */




#h {
	background-color: #1F2935;
}
#ri {
	background-color: #827977;
	letter-spacing: -.06em;
}

body {
	background-color: #1F2935;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#pyt {
	background-color: #B3916B;
}
#bn {
	background-color: #455D67;
	}

#content #flash_map {
	text-align: center;
	border: 2px solid black;
	width: 660px;
	margin: auto;
}

--------****Still Need Help Here!-----------

Unrelatedly, I'm also experiencing the following quirks that I'm not knowledgeable enough to work out quickly, so tips are aprpeciated:

****1) That menu bar is 26 pixels. Is there a way to vertically center the <a> inside the <li>?

2) The word-wrapped drop down options are extending outside of the menu - which of my styles is causing this? How can I solve it? *SOLVED*

We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc.

Does anyone know how to fix this? You can see what is happening on these pages.

http://www.callan.co.uk/locate_school.php
http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php

You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu.

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any suggestions?

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'm having a problem with my drop menu Code:

#nav ul a:focus

being too wide. It's set at 100%, and will shrink if I set it to 50%, but can't match the different sizes of my menus. Here is the link to the page so you can see when the menu drops, then you hover mouse over one of the links in the list, the image is wider than the box.
http://www.alliancemonterey.org/temp/
Here is the drop menu css. Any help would be appreciated
Code:

#nav,
#nav ul			{ background-image:url(images/button.gif); list-style: none; margin: 0; padding: 0; z-index: 20000; }
#nav			{ font-family: Arial, Helvetica, sans-serif; font-size: 0.855em; /* 14px / 16px */ font-weight: bold; height: 2.286em; /* 32px / 14px */ line-height: 1.5em; /* 21px / 14px */ width: 760px; margin: 0; }
#nav li			{ background-image:url(images/button.gif); float: left; height: 2.286em; /* 32px / 14px */ margin: 0; padding: 0; position: relative; z-index: 10000; }
#nav a			{ color: #c7d0d9; display: block; padding: 0.286em 5px 0.5em; /* 4px 30px 7px */ text-decoration: none; }

#nav a:hover,
#nav a:focus		{ color: #fff; background-image:url(images/button_over1.gif); }

#nav ul			{ background-image:url(images/button_over2.gif); left: 0; font-size: 0.857em; /* 12px / 14px */ line-height: 1.5em; /* 18px / 12px */ position: absolute; top: 2.667em; /* 32px / 12px */ width: 100%; }
#nav ul li		{ background: none; float: none; height: auto; width: 100%; }
#nav ul a		{ background: none; padding: 0.083em 30px 0.25em; /* 1px 30px 3px */ width: 70%; }
#nav ul ul		{ font-size: 1em; }

#nav ul a:hover,
#nav ul a:focus		{ background-image:url(images/button_over1.gif); width: 100%; }
#nav ul.hover		{ background-image:url(images/button_over1.gif); width: 100%; }
#nav ul ul		{ left: 0px; top: 0.5em; /* 6px / 12px */ }

#nav ul,
#nav :hover ul ul,
#nav .hover ul ul	{ margin-left: -9999px; }

#nav li:hover>ul,
#nav li.hover>ul,
#nav a:focus>ul,
#nav ul ul,
#nav .hover a:focus	{ margin-left: 0; }
#nav ul a:focus		{ margin-left: 0; }

Hello,

I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it.

It sits inside a topoptsbox div tag (css below).

Code:

<form name="bpmform">
<label for="bpmfrom" class="bpmddl">BPM From</label>
<select class="bpmddl" id="bpmfrom" name="bpmfrom">
<option id="0from" value="0">0</option>
<option id="50from" value="50">50</option>
<option id="100from" value="100">100</option>
<option id="150from" value="150">150</option>
</select>
</form>

Code:

#topoptsbox {
  border-style: inset;
  border-width: 1px;
  width: 1000px;
  height: 80px;
  float: left;
  display: block;
}

Hi,

I wanted to do a horizontal popout menu. I have the code and it works but I am trying to undertsand it better.
It uses a csshover.htc file which i didn't download but the thing still works fine with a ie sniffer code in it. It doesn't use any javascript which I thought it needed.

There seems a few ways to do expanding menus in css (with/without javascript)?

Menus are more complicated than they look but I would some explanation on the above points before i continue.