Код Navbar не работает

Сегодня я пытался сделать простую навигационную панель CSS, и вы знаете, ничего не работает, я просто застрял! Нет кода работает, даже заполнение не работает. Любая помощь?

https://codepen.io/anon/pen/gxYdPx << demo

Дополнительно Мой код,

style.css

    body {
     margin: 0;
    }
    .navigation {
     background-color: #ecf0f1;
     width: 100%;
     height: 90px;
    }
    .navigation ul {
     overflow: hidden;
     list-style-type: none;
     margin: 0;
     padding: 0;
    }
    
    .navigation li {
     float: right;
    }
    
    .navigation li a {
     display: block;
        color: white;
        text-align: center;
    
    
        text-decoration: none;
    }
index.html

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>ZadxHost - The Best You Can Imagine!</title>
 </head>
 <body>
  <!-- Navigation Bar -->
  <div class="navigation">
   <h1>ZadxHost</h1>

   <ul>
    <a href="#"><li>Home</li></a>
    <a href="#"><li>Panel</li></a>
    <a href="#"><li>Pricing</li></a>
    <a href="#"><li>Contact Us</li></a>
   </ul>
  </div>

 </body>
</html>

Источник

1 ответ

Решение

Вам нужно поставить a элементы внутри li элементы, а не наоборот.

Так...

    <ul>
        <li><a href="#">Home</a></li>
        //.....
    </ul>

На данный момент ваш CSS ориентирован .navigation li a который не будет работать с вашей текущей структурой.

Источник
Другие вопросы по тегам