I have 5 list elements, want 4 to view and last to be out of picture and scroll to.

Make the container nav with a width of 125% and the child li elements with a width of 20% and floated to the left. This will ensure the last element is always off the screen and must be scrolled to. See my demo on Plunker here. Is this what you wanted to achieve?

Note 1: I set the margins and paddings in my Plunker to 0 for every element to make the calculations easy. If you have padding, border or margin, you can do something like width: calc(20% - padding/border/margin) for the li elements.

Note 2: There are other ways to accomplish this too, but this is the first way that come to mind and probably the simplest.

Aside: You misspelled menubar in your question (you have it as "manubar").

This is hard to accomplish with css alone. You proberaly want to use jQuery as well, so the menu can be like a horizontal scrollable carrousel, triggered by mouse movement.

You could give your menubar large width, larger than the screenwidth and give the container div of your navbar a width of 100%. This way the menubar will be cutt-off by the containing element.

<div id="menubar-container" style="max-width: 100%;">
<div id="menubar" style="width: 2000px;">
<ul class="menu-items">
<li class="menu-item"><a href="index.html">home</a></li>
<li class="menu-item"><a href="about.html">about</a></li>
<li class="menu-item"><a href="contact.html">contact</a></li>
....etc
</ul>  
</div>
</div>

The jQuery part helps the menu to interact with mouse movement when a user hovers over the menu. The menu is a bit more accessible this way and you don't need the horizontal scrollbar anymore.