Элементы стиля с CSS

Question

Я создаю приложение AngularJS. У меня возникают следующие трудности с оформлением страницы. Вот скрипка: https://jsfiddle.net/9ooa3wvf/

1) При наведении курсора Я хочу изменить цвет вложенных li элементов (имя класса nested). Я пробовал несколько разных подходов, но ничего не работает.

2) Я хочу, чтобы вертикально выровнять вложенные li элементы в center со ссылками About и Services. Они выровнены так:

Я хочу, чтобы они были выровнены так:

На рисунке выше, Our Team не на той же строке, 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

Следующий код решить эту проблему. Я добавил span на элементах li, которые я хотел по вертикали выровнять.

<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

Update:

Существует одна вещь, не хватает для идеального вертикального выравнивания: line-height собственность! Когда он не установлен, особенно в такой ситуации, с большим количеством вложенных, встроенных, UL и LI, каждый браузер может вести себя по-другому ...

Here - более чистая версия, стараясь следовать за лучшими практики создания CSS:

1. Определите стили по умолчанию. Я видел в вашем CSS. Вы устанавливаете кучу раз того же свойства и значения для одного и того же элемента. Все ваши UL s имели list-style:none;, так зачем писать 3 раза то же самое?Гораздо проще записать значение по умолчанию: ul{list-style:none}, а затем, при необходимости, переопределить это значение по умолчанию: ul.ULThatIsVeryDifferent{list-style:circle outside none;}.

2. Вы заметите, что я установил как UL и LIfont-size и line-height свойства вместе, даже ULs не уважая font-size. Я сделал это, потому что оба свойства связаны в этом сценарии, поэтому, если вы измените font-size на LI, вы также измените line-height, а также UL'sline-height. Когда все вместе, их намного легче поддерживать.

3. В правилах :hover вы заметите, что я не использовал a в конце селектора. Почему это не нужно сейчас? Потому что нет другого более конкретного селектора, устанавливающего color для нашего a. Но только это не заставит наши ссылки правильно окрашиваться. Зачем? Поскольку a s не наследует некоторые свойства от своих родителей, и один из этих свойств - color. Таким образом, даже если мы устанавливаем цвет на LI, наша ссылка имеет, естественно, более специфический селектор (определенный по умолчанию браузером), устанавливающий color. Чтобы переопределить это поведение, вы увидите, что в первых строках я установил некоторые свойства по умолчанию для a s, а один из них - color:inherit. Таким образом, когда мы меняем color нашего LI, наш a также получит этот новый цвет.

Посмотрите внимательно в обновленном JsFiddle и как я структурировал CSS и свойства.

Если у вас есть другие сомнения, я был бы рад помочь. Кроме того, я буду очень рад, если вы подумаете, что мой ответ теперь достоин вашего продвижения.

Для справки, есть последний CSS предложил:

/*------- 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; 
} 

Оригинал Ответ:

1 - В вашем коде, вы установили: #buttonDisplayContent ul ul a{color:lightgray;} , Если мы установим .nested li:hover{color:yellow}, самое конкретное правило будет первым, потому что оно непосредственно устанавливает наш элемент a, а также потому, что его степень специфичности (насколько глубока селектор). Если мы установим .nested li:hover a{color:yellow;}, он также не будет работать из-за степени специфичности снова. Таким образом, у нас есть два варианта:

1. Использование более конкретный селектор CSS: #buttonDisplayContent .nested li:hover a{color:yellow;}

2. Используйте !important, чтобы переопределить какой-то более конкретный селектор CSS, который не Используйте !important тоже: .nested li:hover a { color: yellow !important; } ,

В зависимости от вашей реальной ситуации может быть подход лучше/чище использовать более конкретный селектор, это хорошая практика, но есть исключения ... Также, Here is a great article about CSS Selector Specificity, действительно стоит его прочитать :).

2 - Элементы с display: inline; не учитывают верхние и нижние поля и прокладки и не могут иметь ширину и высоту. (http://www.w3.org/TR/CSS21/visuren.html#inline-formatting). Таким образом, чтобы убедиться, что ваши настройки верхних и нижних прокладок будут соблюдаться, но соблюдение «inline behave» установлено display:inline-block.

С большой ответ здесь на StackOverflow (CSS display: inline vs inline-block, а также What is the difference between display: inline and display: inline-block?):

Встроенные элементы:

1. уважение осталось & правое поля и отступы, но не сверху & снизу
2. не может иметь ширину и высоту
3. позволяют другим элементам сидеть слева и справа.

Блок элементы:

1. уважаю все из этих
2. силы разрыва строки после элемента блока

Инлайн-блочные элементы:

1. позволяют другие элементы сидеть слева и справа
2. уважать & верхние нижние поля и отступы
3. высота уважение и ширина

Рабочая JsFiddle здесь с предложенными изменениями: https://jsfiddle.net/9ooa3wvf/18/

Answer 2

Для первого вопроса используют это,

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

жаль использовать важно, так как у вас уже есть цвет для этого так!.

Для второй точки, могли бы вы объяснить немного больше, так что я могу обновить свой ответ и может дать вам решение ...

Опять извиняюсь за один ответ, но немного более подробно и даст вам ответ как можно скорее. .

Answer 3

Я просто добавил пару строк CSS и он работает

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

Проверить это fiddle

добавить Также этот CSS

ul li { 
    display: table-caption; 
}