<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div class="col-lg-12 col-sm-12"> <nav class="nav navbar-default" role="navigation"> <div class="nav navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown show-on-hover"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><br /><center><span class="glyphicon glyphicon-align-justify" style="font-size:22px"></span></center><br /><span class="font-head">محصولات تکمیلی</span><span class="caret"></span></a> <ul class="dropdown-menu text-right" role="menu"> <li><a href="gavsandogh.aspx">گاوصندوق</a></li> <li><a href="satl.aspx">مخازن و سطل زباله</a></li> <li><a href="pelastic.aspx">محصولات پلاستیکی</a></li> <li><a href="mashin.aspx">ماشین آلات برقی</a></li> <li><a href="parcham.aspx">پرچم</a></li> <li><a href="other.aspx">محصولات دیگر</a></li> </ul> </li> <li class="dropdown show-on-hover"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><br /><center><span class="glyphicon glyphicon-cog" style="font-size:22px"></span></center><br /><span class="font-head">خدمات </span><span class="caret"></span></a> <ul class="dropdown-menu text-right" role="menu"> <li><a href="service.aspx">مشاوره و طراحی</a></li> <li><a href="service2.aspx">تعمیرات و قطعات</a></li> <li><a href="service3.aspx">نصبیات</a></li> <li><a href="service4.aspx">خدمات پس از فروش</a></li> </ul> </li> <li><a href="hair.aspx"><br /><center><span class="glyphicon glyphicon-certificate" style="font-size:22px"></span></center><br /><span class="font-head">آرایشگاهی</span></a></li> <li><a href=""><br /><center><span class="glyphicon glyphicon-home" style="font-size:22px"></span></center><br /><span class="font-head"> خانگی </span></a></li> <li class="dropdown dropdown-large text-right show-on-hover"> <a href="office.aspx" class="dropdown-toggle" data-toggle="dropdown"><br /><center><span class="glyphicon glyphicon-list-alt" style="font-size:22px"></span></center><br /><span class="font-head"> اداری </span><span class="caret"></span></a> <ul class="dropdown-menu dropdown-menu-large row"> <li class="col-lg-6 col-md-6 col-sm-6 pull-right"> <ul> <li class="dropdown-header">مبلمان دفتری</li> <li><a href="o_mobl.aspx">مبل اداری</a></li> <li ><a href="o_miz.aspx">میز اداری</a></li> <li><a href="c_sandali.aspx">صندلی گردان</a></li> <li><a href="s_sandali.aspx">صندلی ثابت</a></li> <li><a href="g_sandali.aspx">صندلی گروهی</a></li> <li><a href="fil.aspx">فایل</a></li> <li><a href="lib.aspx">کتابخانه</a></li> <li><a href="f_mobl.aspx">جلو مبلی</a></li> <li><a href="p_miz.aspx">کانتر و میز پذیرش</a></li> <li class="divider"></li> <li class="dropdown-header">اتاق جلسات</li> <li><a href="s-amfi.aspx">آمفی تئاتر</a></li> <li><a href="s-conf.aspx">کنفرانس</a></li> </ul> </li> <li class="col-lg-6 col-md-6 col-sm-6"> <ul> <li class="dropdown-header">تجهیزات مدارس</li> <li><a href="tablo.aspx">تابلو اعلانات</a></li> <li><a href="taghiz.aspx">تجهیزات کلاسی</a></li> <li><a href="nimkat.aspx">صندلی و نیمکت</a></li> <li><a href="tabore.aspx">میز و تابوره مهندسی</a></li> <li class="divider"></li> <li class="boldh"><a href="ketabkhane.aspx">کتابخانه و تجهیزات کتابخانه ای</a></li> <li class="boldh"><a href="mehmansara.aspx">خوابگاهی و مهمانسرایی</a></li> <li class="boldh"><a href="komod.aspx">کمد فلزی و سیستم بایگانی</a></li> <li class="boldh"><a href="talar.aspx">تالار ، رستوران ، کافی شاپ</a></li> </ul> </li> </ul> </li> <li class="activee"><a href="default.aspx"><br /><center><span class="glyphicon glyphicon-home" style="font-size:22px"></span></center><br /><span class="font-head"> خانه </span></a></li> </ul> <ul class="nav navbar-nav navbar-left"> <li><a href="about.aspx"><br /><center><span class="glyphicon glyphicon-info-sign" style="font-size:22px"></span></center><br /><span class="font-head">درباره ما</span></a></li> <li ><a href="contact.aspx"><br /><center><span class="glyphicon glyphicon-phone" style="font-size:22px"></span></center><br /><span class="font-head">تماس با ما</span></a></li> <li class="dropdown nav navbar-nav navbar-right show-on-hover"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><br /><center><span class="glyphicon glyphicon-book" style="font-size:22px"></span></center><br /><span class="font-head">مقالات</span><span class="caret"></span></a> <ul class="dropdown-menu text-right" role="menu"> <li><a href="article1.aspx">مقاله 1</a></li> <li><a href="article2.aspx">مقاله 2</a></li> <li><a href="article3.aspx">مقاله 3</a></li> <li><a href="article4.aspx">مقاله 4</a></li> <li><a href="article5.aspx">مقاله 5</a></li> <li><a href="article6.aspx">مقاله 6</a></li> </ul> </li> </ul> </div> </nav> </div> </div> </div>

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #d1313c; color:#fff; } .navbar-default .navbar-nav > .activee > a, .navbar-default .navbar-nav > .activee > a:hover, .navbar-default .navbar-nav > .activee > a:focus { background-color: none; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { background-color: #fff; } .font-head { font-family:"B Yekan", Tahoma; } .dropdown-large { position: static !important; } .dropdown-menu-large { margin-left: 80px; margin-right: 80px; padding: 20px 0px; } .dropdown-menu-large > li > ul { padding: 0; margin: 0; } .dropdown-menu-large > li > ul > li { list-style: none; } .dropdown-menu-large > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .dropdown-menu-large > li ul > li > a:hover, .dropdown-menu-large > li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu-large .disabled > a, .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { color: #999999; } .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; cursor: not-allowed; } .dropdown-menu-large .dropdown-header { color: #d1313c; font-size: 15px; } @media (max-width: 768px) { .dropdown-menu-large { margin-left: 0 ; margin-right: 0 ; } .dropdown-menu-large > li { margin-bottom: 30px; } .dropdown-menu-large > li:last-child { margin-bottom: 0; } .dropdown-menu-large .dropdown-header { padding: 3px 15px !important; } } .dropdown-menu-large .boldh { font-weight: bolder; font-style: normal; } .show-on-hover:hover > ul.dropdown-menu { display: block; }