CSS - Css Menu Help! Targetting The Correct Li Link?

Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css.

I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link.

but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions.

PHP code:
Code:

<?php

$block = ( is_front_page() ? 'h1' : 'div' );

// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable

?>

<?php echo "<$block class='blog-title'>"; ?>
	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>

<p class="description"><?php bloginfo('description'); ?>


<ul id="menu">
   <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
		 <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
         <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
         <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>

CSS code:
Code:

#menu {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#menu li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#menu li.last { padding: 0; }

		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }	

			ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }

			ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }

			ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }

				ul#menu li#home a:hover { background-position: 0 -30px; }

				ul#menu li#archives a:hover { background-position: -84px -30px; }

				ul#menu li#news a:hover { background-position: -168px -30px; }

				ul#menu li#contact a:hover { background-position: -252px -30px; }

			.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }

			.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }

			.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }

			.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }

i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem.

thank you for any single suggestions and comments.

I have a menu where the submenu li's have a blue/darker blue background color and hover color.

I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up

Here's the part of my styles for the list that I'm trying to change..
Code:

/* original backgrounds for the menu */
ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

Is it the way I tried to rename the style?
Code:

/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
  background: #afe4bf;
  color: #000;
  padding-left: 20px;
}

.green ul.menu li ul li a:hover {
  background: #88b796;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

thanks in advance for any help, Kathy

Hi,

I need to adjust only the 1st link(for 1st menu item) of my main menu. I have used pat pat template and have managed to apply a background image for the first item. Here is the css:

Code:

#first-suckerfish-vertical{
background:url(../images/menutop.jpg) no-repeat;
height:75px;
margin-top:-2.5px !important;
margin-top:-3px;
position:relative;
}

Now to apply style on the main menu item, i use a.mainlevel.
but i cant use the a.mainlevel..coz it will adjust all the links. I need to apply style only to the first link of my menu.

I am wondering if there's a way in css to access a class from another class or id. I already have this style(#first-suckerfish-vertical) for the 1st menu item. is it possible now to access the a.mainlevel from it..

Thx

Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css).

Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script:

http://javascript-array.com/scripts...drop_down_menu/

And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code:

Code:

<html>
	<head>
		<style> 
			<!--


				#sddm a
				{	display: block;
				}



				#sddm span
				{	position: absolute;
					visibility: hidden;
					margin: 0;
					padding: 0;
					background: #3D97D6;
					border: 1px solid #5970B2}
					

					#sddm span a
					{	position: relative;
						display: block;
						margin: 0;
						padding: 5px 10px;
						width: auto;
						white-space: nowrap;
						text-align: left;
						text-decoration: none;
						background: #3D97D6;
						color: #FFF;
						font: 11px arial}

					#sddm span a:hover
					{	background: #2875DE;
						color: #FFF}

			-->
		</style>
		<script type="text/javascript">
			// Copyright 2006-2007 javascript-array.com

			var timeout	= 500;
			var closetimer	= 0;
			var ddmenuitem	= 0;

			// open hidden layer
			function mopen(id)
			{	
				// cancel close timer
				mcancelclosetime();

				// close old layer
				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

				// get new layer and show it
				ddmenuitem = document.getElementById(id);
				ddmenuitem.style.visibility = 'visible';

			}
			// close showed layer
			function mclose()
			{
				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
			}

			// go close timer
			function mclosetime()
			{
				closetimer = window.setTimeout(mclose, timeout);
			}

			// cancel close timer
			function mcancelclosetime()
			{
				if(closetimer)
				{
					window.clearTimeout(closetimer);
					closetimer = null;
				}
			}

			// close layer when click-out
			document.onclick = mclose; 

		</script>

	</head>



	<body>

		<span id="sddm">
			<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
			<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
				<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
				<a href="#">Add as Friend</a>
				<a href="#">Send message</a>

				<a href="#">View Profile</a>
				<a href="#">Report</a>
			</span>		
		</span>

		this text comes after the username
	</body>

</html>

So i hope its clear what i wanna do, i always find it hard to explain things

I got this snippet from the Whateverhover website ... Code:

li.folder:hover   { z-index: 10 }		
ul ul, li:hover ul ul   { display: none }
li:hover ul, li:hover li:hover ul   { display: block }

I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox.

Here's how I've used it: Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body		{ margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
*		{ font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif; font-size: 10px }
table.nav	{ border-width: 1px; border-color: #000000; background-color: #FFFFFF }
td.links	{ vertical-align: top; width: 155px }
ul,li,a		{ margin: 0; padding: 0; border: 0 }
ul		{ width: 155px; background-color: #E2E2EF; list-style: none }
li		{ position: relative; border: 1px solid #FFFFFF; text-indent: 3px; padding: 1px; z-index: 9 }
li.folder	{  }		
li.folder ul	{ position: absolute; left: 150px; /* IE */ top: 0px }		
li.folder>ul	{ left: 145px /* others */ }
a		{  }
a.submenu	{  }
li>a		{ width: auto } /* others */
li a.submenu	{  }
/* regular hovers */
a:hover		{ color: #FFFFFF; letter-spacing: 1px; font-variant: small-caps }
li.folder a:hover	{ background-color: #000080 }
/* hovers with specificity */
li.folder:hover				{ z-index: 10 }
ul ul, li:hover ul ul			{ display: none }
li:hover ul, li:hover li:hover ul	{ display: block }</style>
</head>

<body>
<table class="nav">
   <tr>
      <td class="links">
      <!-- Start Navigation Menues -->
      <table>
         <tr>
            <td nowrap>
            <ul>
               <li class="folder">
               <a class="submenu" href="#">Kitchenware ></a> 
               <ul>
                  <li class="folder">
                  <a href="#" class="submenu">Cutlery ></a> 
                  <ul>
                     <li><a class="submenu" href="#">Cased Sets</a> </li>
                     <li><a class="submenu" href="#">Poultry Shears</a> </li>
                     <li><a class="submenu" href="#">Scissors</a> </li>
                     <li><a class="submenu" href="#">Sets</a> </li>
                  </ul>
               </li>
               </ul>
            </li>
            </ul>
            </td>
         </tr>
      </table>
      </td>
   </tr>
</table>

</body>
</html>

I've replace the URLs with #s for readbility. How can I make it so that Netscape knows the mouse pointer is over the line item when it's hovering the anchor?

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

Issue resolved using forum search.

Thanks for having such great resources - I just had to search for a while.

Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use.

Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders.

Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white.

Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover.

Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation.

Hi guys,

I've used a Dynamic Drive CSS script to create a drop down menu for my website... everything was working fine but now I've noticed that the script is now opening all links within the menus in a new browser window.

I need to make sure all links open in the same window... other links within the pages that aren't part of the menu are working fine and not opening new windows... I'm not sure what I did to make this happen but I'm pretty sure this wasn't happening before. Any help would be greatly appreciated!!


Thanks!

On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code:
Code:

.homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}

.homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}

.homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}

.homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}

.homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}

Thank you

<p>All-in-one solution for all your Web site needs <i>and</i> wants <ul>
<li>Subscriptions and Web alerts</li>
<li>Web site replication</li>
<li>Integrated Document Management</li>
<li>Next-generation HTML Form support</li></ul>


What the question is is if it is correct to mix text (inline) with a <ul> element (block-level).

Thank you

XHTML strict (no inline elements in <form)

Code:

<form ...>
<div>
<input ... />
<input ... />
</div>
</form>

Is the empty div element acceptable?

Thank you

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc

A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now.

Someone said something about problems with floats but i didnt quite udnerstand it