Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Creating Stylish CSS Menu

    Hi,

    Could someone please tell me how i can create a simple Menu like this.

    http://www.bbc.co.uk/sport/0/

    As you can see when someone hovers over News/Sports there a bottom border. Which changes color.

    Can someone show me how to do this?

    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello KKHAN,
    Look at this demo - http://nopeople.com/CSS%20tips/css%2...age/index.html

    You'd just need to make up an image that would work.
    You could also do it very easily with a bottom-border on :hover instead of the image approach.

    Have a look at how the page you linked to does it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2013
    Location
    Ontario Canada
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    You could also look at the post I entered a little earlier labelled CSS nesting. I think it does what you are looking for short and all the HTML and CSS is in the post. There is a small bug though so you will need to watch for the answer also.

  • #4
    New Coder
    Join Date
    Mar 2013
    Location
    Ontario Canada
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    If you look at the thread mentioned there is code there that works. Just change the reference to the class "Menu" to "menu" in the html and you are good to go.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •