Style elements with CSS

Question

I am building an AngularJS app. I am having the following difficulties styling the page. Here is a fiddle: https://jsfiddle.net/9ooa3wvf/

1) On hover I want to change the color of the nested li elements (Class name is nested). I have tried several different approaches, but nothing seems to work.

2) I want to vertically align the nested li elements in the center with the links About and Services. They are being aligned like so:

I want them to be aligned like so:

In the above picture, Our Team is not on the same line as About.

HTML

<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
          <ul>
            <li class = "normal"><a href = "#"> Home </a></li>
            <li class = "subLi"><a href = "#">About </a>
              <ul class = "nested">
                <li> <a href = "#"> Our Team </a> </li>
                <li> <a href = "#"> Our efforts </a> </li>
              </ul>
            </li>
            <li class = "nextToNested"><a href = "#"> Blog </a></li>
            <li class = "subLi"><a href = "#"> Services </a>
              <ul class = "nested">
                <li> <a href = "#"> Design </a> </li>
                <li> <a href = "#"> Web </a> </li>
                <li> <a href = "#"> Learn </a> </li>
                <li> <a href = "#"> Invent </a> </li>
              </ul>
            </li>
            <li class = "nextToNested"><a href = "#"> Portfolio </a></li>
            <li class = "normal"><a href = "#"> Contact </a></li>
          </ul>
        </div>

CSS

#buttonDisplayContent ul {
   list-style-type:none;
   padding:0px
}

#buttonDisplayContent ul ul {
   list-style-type:none;
   padding:0px
}

#buttonDisplayContent ul a {
   text-decoration:none;
   color:#fff;
   font-size:50px;
   font-weight:bold
}

#buttonDisplayContent ul ul a {
   text-decoration:none;
   color:lightgray;
   font-size:40px;
   font-weight:bold
}

#buttonDisplayContent li {
   margin-bottom:0.1%
}

.subLi{
   margin:0px;
   padding:0px;
   list-style-type:none
}

.nested {
   margin-left:0px;
   display:inline
}

.nested li {
   display:inline;
   padding-bottom:6px;
   padding-right:1%;
   padding-left:1%;padding-top:8px
}

#buttonDisplayContent ul li:hover {
    background-color:black
   }

UPDATE

The following code solved the problem. I added a span on the li elements I wanted to vertically align.

<div ng-show = "buttonDisplay" id = "buttonDisplayContent" class = "cssFade" >
  <ul>
    <li class = "normal"><a href = "#"> Home </a></li>
    <li class = "subLi"><a href = "#">About </a>
      <span>
        <ul class = "nested">
          <li> <a href = "#"> Our Team </a> </li>
          <li> <a href = "#"> Our efforts </a> </li>
        </ul>
      </span>
    </li>
    <li class = "nextToNested"><a href = "#"> Blog </a></li>
    <li class = "subLi"><a href = "#"> Services </a>
      <ul class = "nested">
        <li> <a href = "#"> Design </a> </li>
        <li> <a href = "#"> Web </a> </li>
        <li> <a href = "#"> Learn </a> </li>
        <li> <a href = "#"> Invent </a> </li>
      </ul>
    </li>
    <li class = "nextToNested"><a href = "#"> Portfolio </a></li>
    <li class = "normal"><a href = "#"> Contact </a></li>
  </ul>
</div>

CSS:

#buttonDisplayContent ul {
       list-style-type:none;
       padding:0px
    }

    #buttonDisplayContent ul ul {
       list-style-type:none;
       padding:0px
    }

    #buttonDisplayContent ul a {
       text-decoration:none;
       color:#fff;
       font-size:50px;
       font-weight:bold
    }

    #buttonDisplayContent ul ul a {
       text-decoration:none;
       color:lightgray;
       font-size:40px;
       font-weight:bold
    }

    #buttonDisplayContent li {
       margin-bottom:0.1%
    }

    span .nested li {
        display:inline-block
        vertical-align:middle
    }

    .subLi{
       margin:0px;
       padding:0px;
       list-style-type:none
    }

    .nested {
       margin-left:0px;
       display:inline
    }

    .nested li {
       display:inline;
       padding-bottom:6px;
       padding-right:1%;
       padding-left:1%;padding-top:8px
    }

    #buttonDisplayContent ul li:hover {
        background-color:black
       }

Answer 1

For first question use this,

.nested li a:hover{color:red !important;}

sorry to use !important as you already have color for that so.

For second point, can you please explain little bit more so i can update my answer and can give you solution...

Again sorry for one answer but little bit more detail and will give you answer asap..

Answer 2

Update:

There is one thing missing for perfect vertical alignment: line-height property! When not set, especially in a situation like that, with a lot of nested, inline, ULs and LIs, every browser can behave in an different way...

Here is a more clean version, trying to follow some best practices on creating a CSS:

1. Define default styles. I saw in your CSS You setting a bunch of times the same property and value, for the same element. All your ULs had list-style:none;, so why write 3 times the same thing? It's a lot easier write a default: ul{list-style:none} and then, if needed override this default: ul.ULThatIsVeryDifferent{list-style:circle outside none;}.

2. You will notice that I've set both UL and LI font-size and line-height properties together, even ULs doesn't respecting font-size. I made it because both properties are related in this scenario, so if you change the font-size for your LI, You would also change the line-height, and also, the UL's line-height. When everything is together, it's a lot easier to maintain.

3. In the :hover rules, You will notice that I've not used the a in the end of selector. Why it's not needed now? Because there is not any other more specific selector setting some color for our a. But only this will not make our links get colored properly. Why? Because as doesn't inherit some properties from its parents, and one of this properties is color. So, even We setting a color on LI, our link has naturally a more specific selector (defined by default by browser) setting a color. To override this behavior, You will see that in the first lines, I set some default properties for as, and one of them is color:inherit. Thus, when We change the color of our LI, our a will also get this new color.

Take a look with care in the updated JsFiddle, and how I've structured the CSS and properties.

If You have any other doubts, I'd be glad to help. Also, I'll be very happy if You think that my answer is now worthy of your upvote.

For reference, there is the last CSS proposed:

/*-------  Defaults  -------*/
*{
    vertical-align: middle;
    line-height: normal;
    font-
}
ul{
    list-style: none outside none;
    padding: 0;
    margin: 0;
}
li{
    display:inline-block;
}
a{
    text-decoration:none;
    font-weight:bold;
    color:inherit;
}

/*-------  Parent List  -------*/
div#buttonDisplayContent > ul,
div#buttonDisplayContent > ul > li{
    font-size:34px;
    line-height:34px;
}
div#buttonDisplayContent > ul > li{
    display: list-item;
    color:#eee;
}
div#buttonDisplayContent > ul > li:hover{
    background-color:#000;
}

/*-------  Nested Lists  -------*/
div#buttonDisplayContent > ul > li > ul{
    display: inline-block;
}
div#buttonDisplayContent > ul > li > ul,
div#buttonDisplayContent > ul > li > ul > li{
    font-size: 14px;
    line-height:14px;
    color: #ccc;
    margin: auto 10px;
}
div#buttonDisplayContent > ul > li > ul > li:hover{
    color: yellow;
}

Original Answer:

1 - In your code, you set: #buttonDisplayContent ul ul a{color:lightgray;}. If We set .nested li:hover{color:yellow}, the most specific rule will be the first one, because it sets directly our a element, and also because its degree of specificity (how deep the selector goes). If We set .nested li:hover a{color:yellow;}, it also will not work, because of the degree of specificity again. Thus, We have two choices:

1. Use a more specific css selector: #buttonDisplayContent .nested li:hover a{color:yellow;}

2. Use the !important, to override any more specific css selector that doesn't use the !important too: .nested li:hover a { color: yellow !important; }.

Depending on your real situation can be a better/cleaner approach use a more specific selector, it's a good practice, but there is exceptions... Also, Here is a great article about CSS Selector Specificity, really worth read it :) .

2 - Elements with display: inline; doesn't respect top and bottom margins and paddings, and cannot have a width and height set. (http://www.w3.org/TR/CSS21/visuren.html#inline-formatting). Thus, to make sure your settings of top and bottom paddings will be respected, but keeping the "inline behave" set display:inline-block.

From a great answer here of StackOverflow (CSS display: inline vs inline-block, and also What is the difference between display: inline and display: inline-block?):

Inline elements:

1. respect left & right margins and padding, but not top & bottom
2. cannot have a width and height set
3. allow other elements to sit to their left and right.

Block elements:

1. respect all of those
2. force a line break after the block element

Inline-block elements:

1. allow other elements to sit to their left and right
2. respect top & bottom margins and padding
3. respect height and width

Working JsFiddle here with suggested changes: https://jsfiddle.net/9ooa3wvf/18/

Answer 3

I just added couple of lines of css and it seems to work

.nested li a:hover{
    color:red !important;
}

Check this fiddle

Also add this css

ul li {
  display: table-caption;
}