CSS только для половины моего списка

Question

Я делаю сайт для своей локальной группы скаутов, и у меня возникают проблемы при создании меню, по какой-то причине я не могу определить, что css не применяется к первым двум элементам , но делает до двух последних. Кто-нибудь может помочь? Я думаю, что это из-за падающего падения, но, как я уже сказал, я не уверен.
Спасибо,
Рошан

Посмотрите на JSFiddle: here
Вот HTML:

<div class="fluid menu" align="right"> 
     <ul> 
      <li> 
       <a href="index.php">Home</a> 
      </li> 
      <li> 
       <a href="sections.php">Sections</a> 
       <ul> 
        <li> 
         <a href="Beavers.php">Beavers</a> 
        </li> 
        <li> 
         <a href="cubs.php">Cubs</a> 
        </li> 
        <li> 
         <a href="scouts.php">Scouts</a>       
        </li> 
       </ul> 
      </li> 
      <li> 
       USA Trip 
      </li> 
      <li> 
       Forum 
      </li> 
     </ul> 
    </div> 

А вот CSS:

.menu { 
    text-align: center; 
    margin: 2em; 
} 
ul { 
    text-align: center; 
    display: inline; 
    margin: 25px 0 27px 0; 
    padding: 0; 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
} 
ul li { 
    font-family: 'Comfortaa', cursive; 
    color: #84a40b; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #fff; 
    cursor: pointer; 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    -ms-transition: all 0.4s; 
    -o-transition: all 0.4s; 
    transition: all 0.4s; 
} 
ul li:hover { 
    background: #4d2177; 
    color: #ffffff; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 27px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.4s; 
    -moz-transition: opacity 0.4s; 
    -ms-transition: opacity 0.4s; 
    -o-transition: opacity 0.4s; 
    -transition: opacity 0.4s; 
} 
ul li ul li { 
    background: #4d2177; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { 
    background: #672c9f; 
} 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 
ul li ul li ul{ 
    padding: 0; 
    position: absolute; 
    top: 27px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.4s; 
    -moz-transition: opacity 0.4s; 
    -ms-transition: opacity 0.4s; 
    -o-transition: opacity 0.4s; 
    -transition: opacity 0.4s; 
} 
ul li ul li ul li{ 
    background: #4d2177; 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
} 
ul li ul li ul li:hover { 
    background: #672c9f; 
} 
ul li ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

Answer 1

Простой, потому что ваши первые два элемента являются ссылками, последние два - нет.

Я думаю, что они должны быть всеми ссылками.

А затем добавьте цвет к ссылкам.

.menu ul li a { 
    color: #84a40b; 
} 

https://jsfiddle.net/q4p1s8yL/3/

Answer 2

CSS-применяет только штрафом. Разница между первым и последним элементами заключается в том, что у вас есть ссылки в первых элементах.

Ссылки уже имеют свой стиль, поэтому вам также нужно будет установить ссылки в списке.

Answer 3

Добавить эту строку в ваш CSS: ul li a{ text-decoration:none; color:#84A40B }. Heres JSfiddle: https://jsfiddle.net/q4p1s8yL/1/

Answer 4

Вам нужно стилизовать <a> не <li>.

Это стиль все якоря, где-то в списке <ul>

ul a { 
    color: YOUR_COLOR; 
} 

Проблема в том, что вы определяете цвет элемента списка <li>. Вы ожидаете, что все в нем будет иметь этот цвет. Однако характерный синий якорь <a> цвет более конкретный. Итак, ваш <a> внутри <li> не получает цвет <li>, так как он имеет собственный синий цвет.

Answer 5

это потому, что два последних элементов списка не имеет якоря, просто добавьте

ul li a{ 
     color: #84a40b; 
     text-decoration:none; 
    } 
ul li a:hover{ 
    color: #ffffff; 
} 

demo here