Menu list not working when using a style sheet.

ساخت وبلاگ

آخرین مطالب

امکانات وب

Menu list not working when using a style sheet.

I am trying to convert the example given here, to a stylesheet:

https://www.w3schools.com/css/tryit....l_black_fixed2

When I do, it does not work.* Can someone please tell me what I am doing wrong.* Here is the code I am using.

(By does not work, I mean = does not position at bottom, bullets are displayed when they shouldn't be, backgrounds are not as set, etc.)

HTML sheet:

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
</style>
<link type="text/css" rel="stylesheet" href="menutest.css">
</head>
<body>

<ul class="menus">
  <li class="menus"><a class="active" href="#home">Home</a></li>
  <li class="menus"><a href="#news">News</a></li>
  <li class="menus"><a href="#contact">Contact</a></li>
  <li class="menus"><a href="#about">About</a></li>
</ul>

<div style="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the bottom 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>

And here is the stylesheet:

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

.menus li {
    float: left;
}

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

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

.menus:active {
    background-color: #4CAF50;
}
CodingForums...
ما را در سایت CodingForums دنبال می کنید

برچسب : نویسنده : codingforums بازدید : 269 تاريخ : سه شنبه 6 شهريور 1397 ساعت: 7:47

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه