www.webdeveloper.com
Results 1 to 5 of 5

Thread: Menu bar hover question

  1. #1
    Join Date
    Oct 2013
    Posts
    9

    Menu bar hover question

    Hi all!

    I am new to this forum. Currently I am learning HTML/CSS/JS

    Now I do have a CSS question. I got a menu bar from the internet and I edited to fit my needs. However when I rolle over a menu button the button turns black (which is fine) and changes in seize (which is not fine). Now I would like the button to change colour while being hovered but not change in seize. Thing is I can't seem to figure out what to change to achieve this. This is the code...I know it probably isn't that hard for you experienced folk but for me it is still quite the challenge. Would be happy if anyone would lend me a hand! Thank you in advance!

    /* Menu */

    #Menu{
    float: right;
    background: transparent;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 33%;
    padding: 0px 0px 0px 0px;
    }

    #mainMenu {
    text-align: center;
    background: transparent;
    list-style: none;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px 0px 0px 0px;
    }

    ul.navmain {
    background: transparent;
    line-height: 31px;
    list-style: none;
    padding: 0 20px;
    font-size: 14px;
    }

    ul.navmain li {
    display: inline;
    padding: 0;
    background: transparent;
    }

    ul.navmain a {
    background: transparent;
    height: 30px;
    font-size: 16px;
    color: #808080;
    padding: 19px 29px 19px 16px;
    text-decoration : none;
    border-top: 2px solid #252525;
    border-bottom: 2px solid #252525;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    }

  2. #2
    Join Date
    Oct 2013
    Posts
    39
    I didn't quite get the code. I expected you'll post the original code and then the one you edited. Also I don't see the hover state.
    But the only attributes that could possibly change the size here are width, height and line-height. If you keep an eye on these while doing the hover state, it should be fine.

  3. #3
    Join Date
    Oct 2013
    Posts
    9
    Thanks for your reply! Sorry I cut of my copy paste to early :

    ul.navmain a:hover {
    border-top: 1px solid #252525;
    border-bottom: 4px solid #000;
    border-left: 1px solid #252525;
    border-right: 1px solid #252525;
    padding: 11px 19px 11px 16px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;


    This is what is below it.

    Anything here?

  4. #4
    Join Date
    Oct 2013
    Posts
    39
    It's because of the padding.. Just remove the padding or add the same padding to both of the states.
    Look here: http://codepen.io/anon/pen/agcsu

    Even though the code looks very strange to me, as well as the outcome, but I guess that's what you are looking for

    And also, if you are doing a navigation bar, it's good to have the list items as 'display:inline-block' and give them a fixed height (line-height) and width. This way you can avoid this kind of weird issues.

  5. #5
    Join Date
    Oct 2013
    Posts
    9
    Ah it does the job, thank you! Well I am building a site for a friend so he gets a site and I can learn the ropes of webbuilding. I must admit I took most of this piece of code from the web. I was that, by changing it I would learn a bit more about what piece of syntax changes what and such. Kinda fun to tinker with so far.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles