how to make a navigation item, 100% as wide as its div, when hovered?

Discussion in 'Web Design and Development' started by theprizefight, Apr 5, 2009.

  1. theprizefight macrumors member

    Joined:
    Oct 29, 2006
    #1
    I have a navigation list, styled in CSS, as follows:
    Code:
    	.navList li {font-size: 85%; color: maroon; margin-left: 0px; padding: 6px; padding-left: 3px; }
    	
    	.navList a:link {padding: 4px; text-decoration: none; color: maroon; text-shadow: 0 1px 3px white; border: 2px solid #fff2f2;}
    	.navList a:visited {padding: 4px; text-decoration: none; color: maroon; text-shadow: 0 1px 3px white; border: 2px solid #fff2f2;}
    	.navList a:hover {text-decoration: none; 
    		color: white; 
    		padding: 4px;
    		background: maroon; 
    		-moz-border-radius: 3px; 
    		-webkit-border-radius: 3px;
    		text-shadow: 0 1px 3px #AEB1F8;
    		border: 2px solid black;
    		}
    	.navList a:active {text-decoration: none; color: black; background: #c9c9c9;}
    and my HTML is as follows:
    HTML:
    <div id="nav">
    		<ul class="navList">
    			<li><a href="index.html">Home</a></li>
    			<li><a href="about.html">About</a></li>
    			<li><a href="philosophy.html">Philosophy</a></li>
    			<li><a href="instruction.html">Instruction</a></li>
    			<li><a href="sample-work.html">Sample Work</a></li>
    			<li><a href="teaching.html">Teaching</a></li>
    			<li><a href="documents.html">Documents</a></li>
    			<li><a href="testimonials.html">Testimonials</a></li>
    		</ul>
    </div>
    Problem is, when hovered on, the link is only as wide as the text (well, a little bit wider, given the padding). My question is, how do I get the link to span across the entire width of the navigation bar? I have tried setting a width on a:link but this doesnt do anything. Any ideas?

    Thanks in advance.
     
  2. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #2
    Add something like this, and tell me if that's what you're looking for...

    Code:
    .navList a{display: block; width:200px;}
     
  3. theprizefight thread starter macrumors member

    Joined:
    Oct 29, 2006
    #3
    yess, thank you sir, that did the trick. I tried the .navList a{width:200px} but forgot to declare block.

    thanks again!
     
  4. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
  5. Got Josh? macrumors member

    Joined:
    Mar 27, 2009

Share This Page