I thought that I would have a little fun and create some code that created code. The following is a step-by-step form that prompts a user for some basic selections and then generates the HTML and CSS to create a navigation menu.

HTML
HTML Code:
<form id="msform">

  <ul id="progressbar">
    <li class="active">Orientation</li>
    <li>Menu</li>
    <li>Menu Items</li>
    <li>Code</li>
  </ul>

  <fieldset>
    <h2 class="fs-title">Step-by-Step Menu Maker</h2>
    <h3 class="fs-subtitle">Step 1) Orientation</h3>

    <label>Which direction would you like for the menu to flow?</label>
    <select id="cboOrientation">
      <option>Horizontal</option>
      <option>Vertical</option>
    </select>

    <input type="button" disabled="disabled" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Step-by-Step Menu Maker</h2>
    <h3 class="fs-subtitle">Step 2) Menu</h3>

    <label>What backcolor would you like for the menu to have?</label>
    <input id="txtMenuBackColor" type="color" />

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Step-by-Step Menu Maker</h2>
    <h3 class="fs-subtitle">Step 3) Menu Items</h3>

    <label>What backcolor would you like for the menu items to have?</label>
    <input id="txtMenuItemBackColor" type="color" />

    <label>What forecolor would you like for the menu items to have?</label>
    <input id="txtMenuItemForeColor" type="color" value="#fffff0" />

    <label>What font-family would you like for the menu items to have?</label>
    <select id="cboMenuItemFontFamily">
      <optgroup label="Serif">
        <option>Georgia, serif	</option>
        <option>"Palatino Linotype", "Book Antiqua", Palatino, serif	</option>
        <option>"Times New Roman", Times, serif	</option>
      </optgroup>

      <optgroup label="Sans-Serif">
        <option>Arial, Helvetica, sans-serif	</option>
        <option>"Arial Black", Gadget, sans-serif	</option>
        <option>"Comic Sans MS", cursive, sans-serif	</option>
        <option>Impact, Charcoal, sans-serif	</option>
        <option>"Lucida Sans Unicode", "Lucida Grande", sans-serif	</option>
        <option>Tahoma, Geneva, sans-serif	</option>
        <option>"Trebuchet MS", Helvetica, sans-serif	</option>
        <option>Verdana, Geneva, sans-serif	</option>
      </optgroup>
      
      <optgroup label="Monochrome">
        <option>Consolas, monaco, monospace</option>
        <option>"Courier New", Courier, monospace	</option>
        <option>"Lucida Console", Monaco, monospace	</option>
      </optgroup>
    </select>
    
    <label>What font-size would you like for the menu items to have?</label>
    <div>
      <input id='txtMenuItemFontSize' max='72' min='0' type="number" value="1" />
      <select id="cboMenuItemFontSizeMode">
        <optgroup label="Keywords">
          <option>Small</option>
          <option>Medium</option>
          <option>Large</option>
        </optgroup>
        
        <optgroup label="Fixed Lengths">
          <option>CM</option>
          <option>MM</option>
          <option>IN</option>
          <option>PX</option>
          <option>PT</option>
          <option>PC</option>
        </optgroup>
        
        <optgroup label="Fixed Lengths">
          <option selected="selected">EM</option>
          <option>EX</option>
          <option>CH</option>
          <option>REM</option>
        </optgroup>
      </select>
    </div>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  
  <fieldset>
    <h2 class="fs-title">Step-by-Step Menu Maker</h2>
    <h3 class="fs-subtitle">Step 4) Code</h3>

    <label>HTML Markup</label>
    <textarea id="txtHtml"></textarea>
    
    <label>CSS Styling</label>
    <textarea id="txtCss"></textarea>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input disabled="disabled" type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
</form>
CSS
Code:
/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
	height: 100%;
	background: linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
	font-family: montserrat, arial, verdana;
}

#msform {
	width: 75%;
	margin: 100px auto;
	text-align: center;
	position: relative;
}

#msform fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	box-sizing: border-box;
	width: 80%;
	margin: 0 10%;
	position: relative;
}

#msform fieldset:not(:first-of-type) {
	display: none;
}

#msform label {
  display: block;
  margin-top: .25em;
}

#msform input[type="text"], #msform input[type="number"], #msform textarea, #msform select {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
}

#msform input[type="color"] {
	border-radius: 3px;
	margin-bottom: 10px;
	width: 90%;
	font-family: montserrat;
	font-size: 13px;
}

#msform div {
  display: flex;
}

#msform div select {
  max-width: 7em;
}

#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}

#msform .action-button:disabled {
  background-color: #ff6961;
  box-shadow: none !important;
  cursor: default;
}

#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}

.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}

#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}

#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 25%;
	float: left;
	position: relative;
}

#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}

#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none;
}

#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}
JQuery
Code:
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets

$(".next").click(function(){
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset
  current_fs.hide();
  
  if($('#msform fieldset:last').is(':visible')) {
    createCode();
  }
});

$(".previous").click(function(){
  current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.hide();
});

function createCode() {
  var html = "<ul class='navigation'>\n" + 
      "  <li>\n" +
      "    <a href='#'>Item 1</a>\n" +
      "  </li>\n" +
      "  <li>\n" +
      "    <a href='#'>Item 2</a>\n" +
      "  </li>\n" +"  <li>\n" +
      "    <a href='#'>Item 3</a>\n" +
      "  </li>\n" +
      "</ul>";
  
  $('#txtHtml').val(html);
  
  var ulCSS = ".navigation {\n" +
      "  background-color: " + $('#txtMenuBackColor').val() + ';\n' +
      "  border: 0;\n" +
      "  display: block;\n" +
      "  font-family: " + $('#cboMenuItemFontFamily option:selected').text() + ';\n' +
      "  font-size: " + $('#txtMenuItemFontSize').val() + $('#cboMenuItemFontSizeMode option:selected').text() + ';\n' +
      "  line-height: 1;\n" +
      "  line-style: none;\n" +
      "  list-style-type: none;\n" +
      "  margin: 0;\n" +
      "  padding: 0;\n" +
      "}";
  
  var liCSS = ".navigation li {\n" +
      "  background-color: " + $("#txtMenuItemBackColor").val() + ";\n";
  var aCSS = ".navigation li a {\n" +
      "  color: " + $("#txtMenuItemForeColor").val() + ";\n}";
  
  if($('#cboOrientation').prop('selectedIndex') === 0) {
    liCSS += "  display: inline-block;\n}";
  } else {
    liCSS += "}";
  }
  
  $('#txtCss').val(ulCSS + '\n' + liCSS + '\n' + aCSS);
};
Fiddle: http://codepen.io/anon/pen/LNdgWO

The menu that it creates is very basic, but it does provide the essential markup and styling needed.