<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2></h2> <div class="container"> <div class='row' id='cssmenu'> <ul class="col-lg-12 list-inline"> <li class='active'><a href='#'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Products</span></a> <ul class="col-lg-12 list-inline"> <li><a href='#'><span>Product 1</span></a></li> <li><a href='#'><span>Product 2</span></a></li> <li class='last'><a href='#'><span>Product 3</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>About</span></a> <ul> <li><a href='#'><span>Company</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div> </div> </div> </div> <br><br> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend align="center">פרטי מוזמן</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="first_name">שם פרטי</label> <div class="col-md-4"> <input id="first_name" name="first_name" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ךשדא_משצק">שם משפחה</label> <div class="col-md-4"> <input id="ךשדא_משצק" name="ךשדא_משצק" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="tel">טלפון</label> <div class="col-md-4"> <input id="tel" name="tel" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="city">עיר מגורים</label> <div class="col-md-4"> <input id="city" name="city" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="invites_side">צד המוזמן</label> <div class="col-md-4"> <select id="invites_side" name="invites_side" class="form-control"> <option value="1">חתן</option> <option value="2">כלה</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="count">כמות מגיעים</label> <div class="col-md-4"> <select id="count" name="count" class="form-control"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="">6</option> <option value="">7</option> <option value="">8</option> <option value="">9</option> <option value="">10</option> <option value="">11</option> <option value="">12</option> </select> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="comment1">הערות 1</label> <div class="col-md-4"> <textarea class="form-control" id="comment1" name="comment1">default text</textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="comment2">הערות 2</label> <div class="col-md-4"> <textarea class="form-control" id="comment2" name="comment2">default text</textarea> </div> </div> </fieldset> </form>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); #cssmenu { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 10px; line-height: 15px; text-transform: uppercase; text-align: left; } #cssmenu > ul { width: auto; list-style-type: none; padding: 0; margin: 0; background: #ffffff; border: 1px solid #ece6e8; border-bottom: 3px solid #d9ced2; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } #cssmenu > ul li#responsive-tab { display: none; /* Hide for large screens */ } #cssmenu > ul li { display: inline-block; *display: inline; zoom: 1; } #cssmenu > ul li.right { float: right; } #cssmenu > ul li.has-sub { position: relative; } #cssmenu > ul li.has-sub:hover ul { display: block; } #cssmenu > ul li.has-sub ul { display: none; width: 250px; position: absolute; margin: 0; padding: 0; list-style-type: none; background: #ffffff; border: 1px solid #ece6e8; border-bottom: 3px solid #d9ced2; border-top: 0 none; } #cssmenu > ul li.has-sub ul li { display: block; } #cssmenu > ul li.has-sub > a { background-image: url('images/caret.png'); background-repeat: no-repeat; background-position: 90% -95%; } #cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.has-sub > a:hover { background: #d80041 url('images/caret.png') no-repeat; background-position: 90% 195%; } #cssmenu > ul li a { display: block; padding: 12px 24px 11px 24px; text-decoration: none; color: #747474; text-shadow: 0px 1px 0px #fff; } #cssmenu > ul li a.active, #cssmenu > ul li a:hover { background: #d80041; color: #fff; text-shadow: 0px 1px 0px #000; } @media (max-width: 600px) { #cssmenu > ul { width: 100%; } #cssmenu > ul li#responsive-tab { display: block; } #cssmenu > ul li#responsive-tab a { background: url('images/menu.png') no-repeat; background-position: 95% -35%; } #cssmenu > ul li#responsive-tab a:hover { background-color: #d80041; background-position: 95% 135%; } #cssmenu > ul li { display: none; } #cssmenu > ul li.right { float: none; } #cssmenu > ul li.has-sub { position: relative; } #cssmenu > ul li.has-sub ul { display: block; position: static; width: 100%; background: #ffffff; border: 0 none; } #cssmenu > ul li.has-sub ul li { display: block; } #cssmenu > ul li.has-sub ul li a span { display: block; padding-left: 24px; } #cssmenu > ul li.has-sub > a { background-image: none; } } /* Make sure they show even if hidden in mobile view by JS */ @media (min-width: 600px) { #cssmenu > ul > li.collapsed { display: inline-block !important; *display: inline; zoom: 1; } #cssmenu > ul ul li.collapsed { display: block !important; }