[Hỏi đáp] tập làm thanh nav nhưng nó bị lỗi

  Bài viết hay nhất1
hiện tại mình đang học CSS ở w3school nhưng khi học đến phần CSS Navigation Bar , mình thử thêm cái thuộc tính này cùng mấy cái code html thì bị lỗi mất sạch mấy chữ Home, News, Contact; còn mấy chữ About,Login thì trôi qua bên trái cả (trong khi mình dùng thuộc tính [float: right]). Có ai biết cách sửa lỗi như thế nào thì giúp mình với!

Code thêm:

Code:

 position: fixed;
    top: 0;
    width: 100%;


Code gốc:

Code:
<!DOCTYPE html>
<html>
<head>
<style>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a class="active" href="#about">About</a></li>
    <li><a href="#login">Login</a></li>
  </ul>
</ul>

</body>
</html>

Code sau khi sửa:

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a class="active" href="#about">About</a></li>
    <li><a href="#login">Login</a></li>
  </ul>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>
  Bài viết hay nhất2
Đưa link forum đây! Đưa ảnh thì giúp được nhưng hơi bị hạn chế, vì vậy đưa link demo cho mình đi mình xem cho
KLQ: Bạn hãy sửa các thẻ ul, li, li a, ... ở nav thành class của bạn đi vì forum của bạn được dựng sẵn nên các thẻ ul li sẽ bị trùng với mấy cái trên nav làm mất 1 số thứ nên hãy thay đổi thành class hoặc id của bạn
  Bài viết hay nhất3
mình đang tập viết code nên mình ko chèn vào forum mà mình chèn vào cái trang tryit của w3school
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

mà mình ko hiểu sao cái trên thược hiện được bình thường mà cái dưới ko thực hiện được
đây là cái chưa sửa, nó chạy bình thường http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_right
  Bài viết hay nhất4
Link forum của bạn không phải link tut
  Bài viết hay nhất5
Thêm thuộc tính width và thêm margin: 0 auto; nếu muốn căn giữa. Còn position: fixed; thì dùng cho thẻ bao ngoài menu.
  Bài viết hay nhất6
cảm ơn mọi người, mình sửa rồi
You cannot reply to topics in this forum