Jump to content
helpneeded22

Menu List not working when using a stylesheet

Recommended Posts

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

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_fixed2

(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.)
 

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

HTML sheet:

<!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:

.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;
}

 

Edited by helpneeded22

Share this post


Link to post
Share on other sites
.menus ul

Refers to an parent element that surrounds the ul element, of which UL is a child element. Any space after a selector means it transversing down its child or children, as in   

ul li {...}

What you should have is class applied to ul element only

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

Remove all classes of "menus" from li elements, and it should now follow the style rules you currently have.

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

This is wrong also

.menus:active {
    background-color: #4CAF50;
}

:hover, :active, :link only target anchor elements. So this either needs to be

.menus li a:active {
background-color: #4CAF50;
}

OR possibly

.menus li a.active {
background-color: #4CAF50;
}

 

 

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Your alternative is to directly link menus to elements by referencing them correctly.

 

Your code refers to situations such as

<div class="menus">
  <ul>
    <li>Stuff to write</li>
    <li>More stuff</li>
  </ul>
</div>

If you change it to this you'll find that your code mostly works except for your last css block which should change to
 

.menus a.active {
  background-color: #4CAF50;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×