Jump to content


Photo

Can't get my a:hover styled right


Best Answer cyberRobot, 06 September 2013 - 12:23 PM

Now I didn't look at all the CSS, but the menu seems to work with the following changes:

  • Under ".dropdown-menu li a", add "width:205px;"
  • Under "#menu a", change the text-align property to "left"
  • Add a ".dropdown-menu li a:hover" option and add "width:205px;"

Note that I don't know what that does with the rest of the website. You'll have some cleaning up to do...and some testing.

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 vincej

vincej

    Advanced Member

  • Members
  • PipPipPip
  • 153 posts
  • LocationCalgary , Canada

Posted 02 September 2013 - 12:44 PM

Attached File  Capture.PNG   4.72KB   0 downloads

 

Hi - I'm normally pretty good with css, but this time I am defeated. All I want is the white background behind the Navigation label extends right across the dropdown box. I have done the usual: checked the padding and margin. Also tried extending the width of the a tag and nothing works. When I make changes to these css selectors in Firebug they get crossed through. However, I can not see any other active value in the Firebug css listing which impacts the background color. 

 

Ok - you can not see the rest of the css style sheet, but under normal conditions what usually works  given that each Nav label is slightly different in length ?? 

 

Many Many Thanks ! 



#2 fastsol

fastsol

    Advanced Member

  • Members
  • PipPipPip
  • 491 posts
  • LocationMinnesota

Posted 02 September 2013 - 12:53 PM

Can we have a link to the page in question?  Otherwise you'll need to provide the code so we can take a look.  First guess is that you need to apply the background color to the <li> and not the <a>.


You never know everything, I learn everday!

http://amecms.com

http://amewebdesigns.com


#3 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,723 posts

Posted 03 September 2013 - 07:11 AM

For the fly-out menu links (the bulletin, etc.), have you tried adding the "display:block;" declaration. You'll also need to define the width so the anchor tag doesn't exceed the underlying box. This should expand the clickable area so visitors don't need to click the text.


Blogging about PHP and other web development topics at ScorpBytes.com

#4 vincej

vincej

    Advanced Member

  • Members
  • PipPipPip
  • 153 posts
  • LocationCalgary , Canada

Posted 06 September 2013 - 11:52 AM

Hi Guys - Many thanks for your advice so far. But sadly I continue to fail in getting it right. I have just today put the pre-production site up on a subdomain: 

http://parish.jacobs...eanddesign.com/

 

Can you have a look at the drop down "the parish" and see what stupid thing I am misssing on the sub menu - all I want is that the white background extends across the width of the dropdown when you hover over it. 

 

Many Many Thanks !! 



#5 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,723 posts

Posted 06 September 2013 - 12:23 PM   Best Answer

Now I didn't look at all the CSS, but the menu seems to work with the following changes:

  • Under ".dropdown-menu li a", add "width:205px;"
  • Under "#menu a", change the text-align property to "left"
  • Add a ".dropdown-menu li a:hover" option and add "width:205px;"

Note that I don't know what that does with the rest of the website. You'll have some cleaning up to do...and some testing.


Edited by cyberRobot, 06 September 2013 - 12:24 PM.

Blogging about PHP and other web development topics at ScorpBytes.com

#6 vincej

vincej

    Advanced Member

  • Members
  • PipPipPip
  • 153 posts
  • LocationCalgary , Canada

Posted 06 September 2013 - 01:16 PM

YOU ARE A MEGA STAR - THANK YOU SO MUCH !! 

 

Part of my problem was that I was use % widths rather than an absolute width.

 

So far I have not seen any adverse effects needing tidying up . 

 

Cheers !  



#7 cyberRobot

cyberRobot

    Advanced Member

  • Gurus
  • 1,723 posts

Posted 06 September 2013 - 01:57 PM

No problem, glad to help.  :happy-04:

 

Note that I marked the topic as solved. If you need further assistance, please mark it as unsolved or start a new thread.


Blogging about PHP and other web development topics at ScorpBytes.com




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com