Панель навигации и теги <ul><li>

Question

У меня все еще есть несколько трудностей, связанных с тегами "ul" и "li"

На самом деле я бы хотел расположить панель навигации в горизонтальном положении, но она не работает.

Iне понимаю, где моя проблема?

Посмотрите на результат

Здесь мои блоки HTML

<div id="container_menu">
            <ul id="topnav2">
                <li class="active2"><href="index.php">HOME</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">INVESTEMENT PLAN</a></li>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">FAQS</a></li>
                <li><a href="#">RULES</a></li>
                <li><a href="#">CONTACT US</a></li>
            </ul>
        </div>

А вот и мой CSS тоже

#container_menu {
  position: relative;
  margin-top: 30px;
  margin-right:65px;
  width: auto;
  float: right;
  text-align: center;

}

/* Le navigateur */ 

#topnav2 li {
  overflow: hidden;
  vertical-align: baseline;
  letter-spacing: normal;
  word-spacing: 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.333px;
  display: block;

}

/* Navbar links */

#topnav2 li a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

#topnav2 li a:hover {
  background-color: white;
  color: black;
}

.active2 {
  background-color: #C52E1E;
  color: white;
}

У вас есть идея?Большое спасибо за ответ

С уважением

Answer 1

Это может решить вашу проблему, если вы используете inline-block вместо block в #topnav2 li.

#topnav2 li {
  overflow: hidden;
  vertical-align: baseline;
  letter-spacing: normal;
  word-spacing: 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.333px;
  display: inline-block;
}

Answer 2

Переместите свой поплавок: влево;от " # topnav2 li a " до " # topnav2 li ".Это должно работать.

/* Le navigateur */ 

#topnav2 li {
    overflow: hidden;
    vertical-align: baseline;
    letter-spacing: normal;
    float: left;
    word-spacing: 0px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13.333px;
    display: block;

}

/* Navbar links */

#topnav2 li a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}