Fixing width and other CSS problems in menu navigation

Question

I am coding a very simple CSS navigation menu. I’m trying to stretch the nav to 100% width across the page and set the last menu option to orange background color and white text color to no avail.

Can someone have a look at my CSS code and see where my problem is?

body {
  background: #282828;
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav ul li {
  margin-right: 5px;
  padding: 10px 20px;
  position: relative;
  height: 20px;
  line-height: 20px;
  background-color: #282c2b;
  color: #fff;
}
#nav > ul > li {
  float: left;
  height: 30px;
  line-height: 30px;
  background-color: #282c2b;
  border-left: 4px solid #282c2b;
}
#nav li > ul {
  visibility: hidden;
  position: absolute;
  top: 0px;
  color: #fff;
}
#nav > ul > li > ul {
  width: 100%;
  top: 50px;
  margin-bottom: 10px;
  left: -4px;
}
#nav li:hover {
  background-color: #ffffff;
  color: #282c2b;
  border-left: 4px solid #ff3d00;
}
#nav li:hover > ul {
  visibility: visible;
}
#nav ul li .navOrange {
  background-color: #ff3d00;
}

Here’s a CodePen

I know it might be hard to achieve this with pure CSS but is it possible to make the menu drop down upon clicking or is it just set to rollover without JavaScript?

so i decided to change it up a little and use elements because it suits me better.

so i now have the following;

http://codepen.io/anon/pen/waKENz

when i add around the div elements it doesnt use the style setup in css, why is it doing this?

and is it possible to perhaps have menu option 4 perform a dropdown on rollover as before or not with elements.

Answer 1

You might have to target each navigation item seperately by setting a percentage width for the item and probably a percentage margin also. Make sure they all add up to 100%.

#nav > ul > li {
    margin: 0 1%;
}
.home,
.level-1,
.support,
.sign-up {
    width: 18%;
}
.info {
    width: 20%;
}
.home {
    margin-left: 0;
}
.sign-up {
    margin-right: 0;
}

<div id="nav">
    <ul>
        <li class="home">Home</li>
        <li class="info">Information</li>
        <li class="level-1">Level 1</li>
        <li class="support">Support</li>
        <li class="sign-up">SIGN-UP!</li>
    </ul>
</div>

Here's a demo jsFiddle (not full code).

The last item in the navigation is not turning orange because the selector is incorrect. You have:

#nav ul li .navOrange { background-color: #ff3d00;}

Which says (working right to left), select any element with the class of .navOrange that is a child of any li that is a child of any ul that is a child of #nav. .navOrange is an not a child of an li but on class on an li and also a child of a ul.

Remove li from the selector and it will work.

#nav ul .navOrange { background-color: #ff3d00;}

Answer 2

Please check this code snippet.

body {background: #282828;}
#nav ul{ margin:0; padding:0; list-style:none; }
#nav ul li{ margin-right:5px; padding:10px 20px; position:relative; height:20px; line-height:20px; background-color:#282c2b; color:#fff; }
#nav > ul > li { float: left; height:30px; line-height:30px; background-color:#282c2b; border-left:4px solid #282c2b; }
#nav li > ul{ visibility:hidden; position: absolute; top:70px; color:#fff;
  transition: all 0.2s ease-in;
  opacity: 0;
}
#nav li.have-item:hover ul{
  visibility:visible;
  top:50px;
  opacity: 1;
}
#nav > ul > li > ul{ width:100%; margin-bottom:10px; left:-4px; }
#nav > ul > li > ul li{
  width:100%;
}
#nav li:hover{ background-color:#ffffff; color:#282c2b; border-left:4px solid #ff3d00;  }
#nav li:hover > ul{visibility:visible;}
#nav > ul > li:last-child { background-color:#ff3d00 !important; }

<div id="nav">
	<ul>
    	<li>Home</li>
        
        <li>Information</li>
        
        <li>Level 1</li>
        
        <li class="have-item">Support
        	<ul>
            	<li>FAQ</li>
            	<li>Contact</li>
            </ul>
        </li>
        
        <li class="navOrange">SIGN-UP!</li>
    </ul>
</div>

Answer 3

About the orange background color: you need to remove the space between "li" and ".navOrange" in the last definition. This will make it more specific than the other definitions and be applied later.

Full width can be achieved relatively simply if you know how many options you'll have in the menu with resizing the buttons to an adequate percentage. Though be careful with this - you generally want something less than 20% with 5 buttons because of the margins etc.

The hover menu that you already have is pure CSS, I don't know of a way to make it onclick without JavaScript.