Hover menu?

  • admiralchip

    (@admiralchip)


    10 years ago

    Hello,

    I’ve asked this question before but I’m not sure if it posted. I’m trying to achieve this hover effect with my main menu (the hover background colour) but for some reason it’s not working. Here is the example of what I want to achieve:

    https://www.develop-a-website.com/csshover/hoverover.html

    How can I achieve this effect? Thanks in advance!

Viewing 1 replies (of 1 total)
  • rdellconsulting

    (@rdellconsulting)

    I used to have a Navbar Guide published but it is not up-to-date and has been removed.

    Try this code but it will really depend on what you have already so will need adapting.

    .navbar .nav > li > a {
border: 1px solid yellow;           /* Add a border */
border-radius: 0px 0px 0px 0px;     /* No Rounded corners */
color: white;                       /* White text */
background-color: black;            /* Change black */
background-image: linear-gradient(to bottom, grey, black);    /* Change grey, black */
background-image: -webkit-linear-gradient (top, grey, black); /* Change grey, black */
background-repeat: repeat-x;        /* Add shading */
}
.navbar .nav > li > a:hover {
border: 1px solid yellow;           /* Add a border */
border-radius: 0px 0px 0px 0px;     /* No Rounded corners */
color: red;                         /* Red Text on hover */
background-color: black;            /* Change black */
background-image: linear-gradient(to bottom, grey, black);    /* Change grey, black */
background-image: -webkit-linear-gradient (top, grey, black); /* Change grey, black */
background-repeat: repeat-x;        /* Add shading */
}
/* Shade the current selected menu item */
.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a {
color: red;                         /* Change Text red */
background-color: black;            /* Change Bgrd black */
background-image: linear-gradient(to bottom, black, black);    /* Change black, black */
background-image: -webkit-linear-gradient (top, black, black); /* Change black, black */
}
Viewing 1 replies (of 1 total)
  • The topic ‘Hover menu?’ is closed to new replies.