Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS vertical navigation help

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #43896
    WindberTSA
    Member

    Hey guys,

    I’m tweaking a new navigation to put on the site.

    This is the code pen: [vertical navigation…](http://cdpn.io/vripE “code pen”)

    When I scroll over the smaller list items like the `nav ul li ul li`, I want the text to change from the white to the blue I have on the ` nav ul li` list items.

    I kept trying to adjust different elements but I cannot seem to create the hover effect on those smaller list items.

    #130716
    Paulie_D
    Member

    This

    nav li a:hover {
    color: #06acff;
    }

    is fighting with this

    nav ul li ul li a {
    color: #fff !important;
    }

    You really shouldn’t need to be using `important`. Just remove that line and it’ll be fine.

    #130722
    Paulie_D
    Member

    ..and to be honest this is way too long as a selector

    nav ul li ul li a

    this is better

    nav ul ul a

    …however you might want to look into some other selectors that will help you in proper selections.

    http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

    #130729
    pixelgrid
    Participant

    or giving some classes could reduse the selectors to one

    #130731
    Paulie_D
    Member

    Yes, I add classes to/for each level

    .menu-primary

    .menu-secondary

    .menu-tertiary

    or the like.

    #130830
    WindberTSA
    Member

    okay Thanks! The [Vertical Menu](http://cdpn.io/vripE “Vertical Menu”) now has the hover effect I was looking for. I changed that selector to be shorter.

    To make a class for each level, I would give the `ul` the class that corresponds? I don’t know if I really understand how to do it that way..

    Questions: Why does the length of the selector, err, matter?

    The arrow that appears above the drop down portion, how can I change the color of it?

    And I want the background color of the drop down portion before the hover effect to be a dark grey, how can I change the color of it?

    #130831
    WindberTSA
    Member

    Oh.. When you click that link, it shows the menu as being all blue, but when I edit it on code pen, it is the black color that I want. Do you know why it isn’t coming up that way on the link posted here?

    #130837
    Paulie_D
    Member
    #130838
    Paulie_D
    Member

    >The arrow that appears above the drop down portion, how can I change the color of it?

    You made it…surely you know how to change it?

    Plus it’s actually commented in your CSS!

    #130891
    WindberTSA
    Member

    I didn’t make this menu bar, courtesy of sahil popli. … I do not know enough to create this myself.. I have been editing it a bunch for my purposes. The last time you commented on one of my posts, you had mentioned that you thought a vertical menu would be more realistic on my site. So, since then, I have been searching for a menu bar that I could mimick on my website.

    This website is due in my high school competition on Monday, so I have been rushing to try and finish some changes I wanted to make before it is due. I wish I knew more about CSS and developing websites, but I am very new at this. Only been dabbling for about a year and a half.( Created about 5 okayish websites)

    #130892
    WindberTSA
    Member

    I figured out how to change the pointer tip.!

    But I still would like to change the color of the `nav ul li ul li` elements to dark grey. (The elements that drop down).

    And I want to figure out how to add another list item; so that when I click on, say windber tsa>history> I want more items to slide out to the right.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.