This is the css for it's navigation. Just one more thing that I would like to add. I would like a box background for each navigation item before the cusor is place on top of the navigation. What else do I need to add in the css. At this point the box background only appear on hover.


style.css

#header ul#navH li a {
	display: inline-block; font: 12px Arial, Serif; color: black;
	text-decoration: none;
	z-index: 1;
	}
					
#header ul#navH li a:link {
	color: grey;
	background-image:url(images/navhover.png);
	background-repeat:none;
	width: 100px;		
	height: 25px;		 
	}
					
#header ul#navH li a:active {
	 background-image:url(images/navhover.png);
	 background-repeat:none;
	 width: 100px;
	 }			
					
#header ul#navH li a:hover {
	color: grey;
	background-image:url(images/navhover.png);
    	background-repeat:none;
	width: 100px;			
         height: 25px;		
}

header.php

<ul id="navH">
     <div id="body">
        
      <li><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/navline.png" /><?php wp_list_pages('sort_column=menu_order&title_li=');?></li>

Recommended Answers

All 3 Replies

Hi davy_yg,

Looking at the CSS, I'm not sure why the link wouldn't display the background, as both your :link and :hover rule declarations are identical

Took a look at the page, and the background displays (nothing pretty though) in chrome,ff,IE9/8/7

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.