StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>1.first you should add this css in your page :</p> <pre><code><style> @import url("icons.css"); .menu{display:block;position:relative}.menu,.menu ul{margin:0;padding:0;list-style:none;position:relative}.menu ul a{float:left}.menu ul ul a{float:none}.menu .mega-menu a{float:none;padding:0}.menu ul ul,.menu .mega-menu,.menu .mega-menu ol li{opacity:0;visibility:hidden;display:none ! important/9;-webkit-transition:opacity 150ms ease-in-out;-moz-transition:opacity 150ms ease-in-out;-o-transition:opacity 150ms ease-in-out;-ms-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out}.menu li:hover>ul,.menu li:hover>.mega-menu,.menu li:hover>.mega-menu ol li{opacity:1;visibility:visible;display:block ! important/9}.menu ul:after{content:"";clear:both;display:block}.menu ul li{float:left;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}.menu ul li a{display:block;padding:14px 20px 15px 20px;color:#fff;font-weight:700;text-decoration:none}.menu .arrow:after{content:"";float:right;text-align:right;width:0;height:0;display:block;border-left:3px solid rgba(0,0,0,0);border-right:3px solid rgba(0,0,0,0);border-top:3px solid #fff;top:9px;margin:0 0 0 5px;position:relative;border-left:3px solid transparent/9;border-right:3px solid transparent/9}.menu ul li ul li .arrow:after{border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:3px solid #bbb;margin:-2px 0 0 5px}.menu i{font-size:14px;font-weight:400;font-style:normal;float:left;margin:4px 4px 0 -2px;line-height:14px;padding:0}.menu .right{float:right}.menu .right ul,.menu .right .mega-menu{right:0}.menu ul ul{background:#fff;border:1px solid #e0e0e0;border-top:0;border-bottom:0;position:absolute;top:100%;width:170px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04)}.menu ul ul ul{position:absolute;left:100%;border-top:1px solid #e0e0e0;top:-1px}.menu ul ul li a{font-weight:400;padding:8px 12px;color:#777;border-bottom:1px solid #e4e4e4}.menu ul ul li{float:none;position:relative;-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none}.menu ul ul li a:active,.menu ul ul li:hover{background:#f5f5f5!important}.menu ul ul li{background:#fff!important}.mega-menu{position:absolute;top:100%;padding:18px 11px;background-color:#fff;border:1px solid #e0e0e0;border-top:none;color:#777;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mega-menu ol{list-style:none;padding:0}.mega-menu ol li{width:100%}.mega-menu ol li:hover,.mega-menu ol li a{color:#777;font-size:12px;padding:0;font-weight:400;background-color:#fff;background-image:none}.mega-menu ol li a:hover{color:#505050}.mega-menu div h4{font-size:14px;font-weight:700;color:#404040;border-bottom:1px solid #e4e4e4;padding:0 0 8px 0;margin:0 0 10px 0}.mega-menu .col-1{width:135px}.mega-menu .col-2{width:288px}.mega-menu .col-3{width:441px}.mega-menu .col-4{width:594px}.mega-menu .col-5{width:747px}.mega-menu .col-6{width:900px}.mega-menu .col-1,.mega-menu .col-2,.mega-menu .col-3,.mega-menu .col-4,.mega-menu .col-5,.mega-menu .col-6{float:left;margin:0 9px}.mega-menu.full-width{left:0;width:100%;padding:18px 0}.full-width .col-1{width:14.1%}.full-width .col-2{width:30.4%}.full-width .col-3{width:46.7%}.full-width .col-4{width:63%}.full-width .col-5{width:79.3%}.full-width .col-6{width:95.6%}.full-width .col-1,.full-width .col-2,.full-width .col-3,.full-width .col-4,.full-width .col-5,.full-width .col-6{float:left;margin:0 0 0 2.2%}@media only screen and (max-width: 767px){.menu ul li{width:100%;cursor:pointer}.menu ul li{position:relative}.menu .mega-menu ol li{height:0}.menu li:hover>.mega-menu ol li{height:auto}.mega-menu,.menu ul ul{z-index:100}.menu ul ul{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.menu ul ul ul{left:0}.menu ul ul li:hover>ul{position:relative;border:none;border-top:1px solid #e4e4e4;-webkit-box-shadow:none;box-shadow:none}.menu ul li ul li .arrow:after{border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #bbb;margin:0}.mega-menu{padding:18px 0}.mega-menu ol li:last-child{margin:0 0 20px 0}.menu .col-1,.full-width .col-1,.menu .col-2,.full-width .col-2,.menu .col-3,.full-width .col-3,.menu .col-4,.full-width .col-4,.menu .col-5,.full-width .col-5,.menu .col-6,.full-width .col-6{float:left;margin:0 0 0 5%;width:90%}} .style-1.menu, .style-1.menu ul li { background-color: #2b2a28; background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); } .style-1.menu ul li:hover { background-color: #eb4e01; background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); } </style> </code></pre> <p>and you should make your function that have this out put: </p> <pre><code> <div class="container"> <div class="menu style-1"> <ul class="menu">  <li> <a class="arrow" href="#"> <i class="icon-folder-open"></i> Electronics </a>  <ul> <li> <a href="#">Moble phones</a> </li> </ul> </li> </ul> </code></pre> <p>notice:you should know more about css <a href="http://www.w3schools.com/css/" rel="nofollow">http://www.w3schools.com/css/</a> best regards </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload