fixing width and other css problems in menu navigation

i am coding a very simple css navigation menu, im trying to the the "nav" div to stretch 100% width across the page, and set the last menu option to orange background and white text to no avail.

can someone have a look at my css code 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; }

also a link to my codepen: http://ift.tt/1QkvlGO

i know it might be hard to achieve with pure css but is it possible to make the manu drop down upon clicking or is it just set to rollover without java script?