for some reason my menu bar (its fixed) is in 2 lines in chrome browser and normal in all other browsers. Any idea why or how to fix it? I tried to figure it out but i didnt fix it. Is it a problem with browser default block height or what? I need to make it work on chrome and on all other browsers too.
JsFiddle: https://jsfiddle.net/wkupr9L6/1/
HTML:
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 65) {
$("nav").css("opacity", "0.2");
}
else {
$("nav").css("opacity", "1");
}
});
</script>
</head>
<body>
<!--MENU BAR!-->
<nav class="navig">
<span class="nadpis"> RPO </span>
<ul class="nav">
<li class="prve">Dátumy
<ul>
<li>1-7/7/2016
<ul>
<li>1/7/2016</li>
<li>2/7/2016</li>
<li>3/7/2016</li>
<li>4/7/2016</li>
<li>5/7/2016</li>
<li>6/7/2016</li>
<li>7/7/2016</li>
</ul>
</li>
<li>8-14/7/2016
<ul>
<li>8/7/2016</li>
<li>9/7/2016</li>
<li>10/7/2016</li>
<li>11/7/2016</li>
<li>12/7/2016</li>
<li>13/7/2016</li>
<li>14/7/2016</li>
</ul>
</li>
<li>15-21/7/2016
<ul>
<li>15/7/2016</li>
<li>9/7/2016</li>
<li>10/7/2016</li>
<li>11/7/2016</li>
<li>12/7/2016</li>
<li>13/7/2016</li>
<li>14/7/2016</li>
</ul>
</li>
</ul>
</li>
<li class="druhe">☰
<ul>
<li> FLV
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> FLC
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> QUA
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> HFX
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> PDT
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul></li>
<li> RSH
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> BUR
<ul>
<li>meno1 </li>
<li>meno2 </li>
<li>meno3 </li>
<li>meno4 </li>
<li>meno5 </li>
</ul>
</li>
<li> SUHRN </li>
<li> INCI </li>
<li> JIRA </li>
<li> CHGT </li>
<li> TASK </li>
<li> VRS </li>
</div>
</ul>
</li>
</ul>
</nav>
CSS:
body, nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #111;
vertical-align: top;
top: -1px;
opacity: 1;
transition: 0.3s;
}
nav:hover {
opacity: 1!important;
background-color: #111;
transition: 0.3s;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav{
vertical-align: top;
display: inline-block;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
margin-right: 1px;
}
.nav li:hover > a {
transition: 0.3s;
background-color:#3a3939;
color: #40d23b;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
background-color: #000;
border: 2px solid #81D4FA;
border-top: none;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top:-1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
.prve{
max-width:125px;
min-width: 90px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
.druhe {
max-width: 14px;
min-width: 110px;
border-right: 2px solid #81D4FA;
}
span {
float:left;
margin-left: 3px;
}
span a{
text-decoration: none;
color:#2670CF;
background-color:#111;
font-family: 'Helvetica Neue', sans-serif;
font-size: 30px;
font-weight: bold;
}
Thanks for help
This doesn't seem like a browser issue. You have .nav set to display: inline-block; but nothing on the two inner <li> elements to force them onto the same line.
I added this:
.nav > li {
display: inline-block;
}
And it works for me in Chrome. See here:
https://jsfiddle.net/tobyl/wkupr9L6/6/
Related
Im having some problems with CSS, sub sub (third, fourth level) menus don't work and can't make it work I already tried everything I could think off. Anybody have the time to look at my code, please. I played with the code and tried all sorts of thing just nothing works.
I tried with
.navigation-1 ul li ul li ul li
but can't find the problem. I guess my css skills are not that good, lol :P
.navigation-1{
float: left;
width: auto;
margin-right: 0px;
}
.navigation-1 ul > li{
float: left;
width: auto;
position: relative;
}
.navigation-1 li:last-child{
margin-right: 0px;
}
.navigation-1 ul > li > a{
display: inline-block;
padding: 26px 30px;
font-size: 15px;
text-transform: capitalize;
/*font-family: 'Exo', sans-serif;*/
}
.navigation-1 > ul > li:after,
.navigation-1 > ul > li:before{
position: absolute;
content: "";
top:50%;
left: 0px;
bottom: 0px;
height: 10px;
width: 2px;
margin: 15px auto 0px;
right: 0px;
opacity: 0;
}
.navigation-1 > ul > li:before{
padding: 0px 5px;
border-left: 2px solid #2f3539;
border-right: 2px solid #2f3539;
opacity: 0;
}
.navigation-1 > ul > li:after{
border-right: 2px solid #2f3539;
height: 15px;
width: 2px;
opacity: 0;
}
.navigation-1 ul li ul{
position: absolute;
left: 0px;
right: 0px;
top:100%;
width: 195px;
background: #171e22;
visibility: hidden;
opacity: 0;
overflow: hidden;
z-index: 9999;
}
.navigation-1 ul li ul li{
float: left;
width: 100%;
}
.navigation-1 > ul > li.active:after,
.navigation-1 > ul > li.active:before,
.navigation-1 > ul > li:hover:after,
.navigation-1 > ul > li:hover:before{
opacity: 1;
}
nav.navigation-1 ul li:hover ul{
visibility: visible;
opacity: 1;
}
nav.navigation-1 ul li ul li a{
border-bottom: 1px solid #2f3539;
color: #fff;
display: inline-block;
padding:9px 15px;
position: relative;
width: 100%;
}
.navigation-1 ul li ul li:hover a{
background: #dc1937;
border-color: #dc1937;
color:#fff !important;
}
<nav class="navigation-1">
<ul>
<li class="active">home
<ul class="sub-menu children">
<li>Home Light</li>
</ul>
</li>
<li>artist
<ul class="sub-menu children">
<li>artist</li>
<li>artist 02</li>
<li>artist 03</li>
<li>dj</li>
</ul>
</li>
<li class="menu-item ">
event
<ul class="sub-menu children">
<li>
event list
</li>
<li>
event list 02
</li>
<li>
event list 03
</li>
<li>
event detail
</li>
</ul>
</li>
<li class="menu-item ">music
<ul class="sub-menu children">
<li>
dj
</li>
<li>
video
</li>
<li>
video list
</li>
<li>
video detail
</li>
<li>
mp3 list
</li>
<li>
music artist albums
</li>
<li>
music albums
</li>
<li>
masonry gallary
</li>
</ul>
</li>
<li class="menu-item ">blog
<ul class="sub-menu children">
<li>
blog detail
</li>
<li>
blog left sidebar
</li>
<li>
blog right sidebar
</li>
<li>
blog full
</li>
<li>
blog medium
</li>
<li>
blog small
</li>
<li>
masonry small
</li>
</ul>
</li>
<li class="menu-item ">
page
<ul class="sub-menu children">
<li>
shop
</li>
<li>
shop items
</li>
<li>
shop listing
</li>
<li>
headers
</li>
</ul>
</li>
<li>contact us</li>
</ul>
</nav>
Here is the original HTML code (without sub sub menus, as I already have my navigation managed through my CMS)
Thank you
R
when over menu the menu slips in HTML.
Codes and view:
https://codepen.io/anon/pen/XvrJpx
Demo:
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover>ul {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
Menu C and menu Bebek have submenu. When over menu the menu slips. I doesn’t would slip.
How I can resolve this problem?
I need your help.
All you have to do is remove the browsers default ul styles, as it is adding 40px of padding to the left, and position the sub-menu items absolutely.
In your case, this will work:
ul li ul {
padding: 0;
position: absolute;
}
To make the sub-menu easier to read, I would recommend having a background and some sort of border. eg:
ul li ul {
padding: 0;
position: absolute;
background: white;
border: 1px solid black;
}
Remove > ul from
.menuu li:hover {
display: block;
}
so that menu doesnt slip
Hope this is what you need
.menuu {
position: absolute;
z-index: 1;
}
.menuu ul {
text-align: center;
}
.menuu>ul>li {
list-style: none;
float: left;
margin: 5px;
}
.menuu>ul>li>a {
text-decoration: none;
text-transform: uppercase;
background-color: white;
padding: 5px;
font-weight: 600;
font-size: 16px;
}
.menuu ul li a:hover {
color: white;
background-color: black;
}
.menuu ul li ul {
display: none;
}
.menuu li:hover {
display: block;
}
.menuu ul li ul li a {
text-decoration: none;
}
.menuu>ul>li>ul>li {
list-style: none;
text-align: center;
margin: 5px;
padding: 5px;
}
.icerik {
position: absolute;
top: 75px;
}
<div class="menuu">
<ul>
<li>
Anasayfa
</li>
<li>
c
<ul>
<li>
c1
</li>
</ul>
</li>
<li>
a
</li>
<li>
Programlama
<ul>
<li>
<a>Android</a>
</li>
<li>
Java
</li>
<li>
Php
</li>
<li>
Html
</li>
<li>
Css
</li>
<li>
Javascript
</li>
</ul>
</li>
<li>
Turizm
</li>
<li>
Origami
</li>
<li>
Bebek
<ul>
<li>
Bebeklerin Aylık Gelişimi
</li>
</ul>
</li>
<li>
İletişim
</li>
</ul>
</div>
<div class="icerik">Önceden İçerik Aşağı kayıyordu email de dediğiniz gibi projeme position absolute ekledim kaymıyor. Teşekkür ederim. Şimdi Tek sorun Bebek Bölümü ve C bölümü üstüne gelince yana kayıyorlar ve yanındakini de kaydırıyorlar</div>
.
This is what i am trying to achieve
I want the separator to be extended to full height. that is, it should cover the entire nav bar's height.
Html markup is as follows.
.mynav li {
list-style: none;
display: inline;
border-left: 1px solid white;
padding: 10px;
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Since OP has updated his question this would be the solution
.mynav ul {
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
.mynav li {
list-style: none;
display: inline
}
.mynav a {
padding: 10px;
display: inline-block;
font-size: 10px
}
.mynav li:not(:last-child) a {
box-shadow: 1px 0 red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
you can use pseudo element
.mynav li {
list-style: none;
display: inline;
padding: 10px;
position:relative
}
.mynav li:not(:last-child):before{
content:'';
position: absolute;
right: 0;
top:0;
bottom: 0;
width: 1px;
background: red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Alternatively, you can use box-shadow
.mynav li {
list-style: none;
display: inline;
padding: 10px;
position:relative
}
.mynav li:not(:last-child){
box-shadow: 1px 0 red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Your css should be display: inline-block if you wish to add padding to the top/bottom of your <li> element.
Try to set the padding to the A tag instead of Li tag :
.mynav li {
list-style: none;
display: inline;
border-left: 1px solid white;
}
.mynav li a {
padding: 10px;
}
In your CSS add width:13%; or something which will fit your width.
Check the code here
I have learnt CSS online and I am new to web designing. Need some expert opinion here, I may have written something wrong or stupid. Please forgive that as I am a beginner.
Here are my CSS and HTML codes:
#menu {
float: left;
width: 1000px;
height: 30px;
background-color:#0066FF;
border-bottom: 1px solid #333;``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li{
display:inline;
}
li ul {display: none;}
li:hover ul {display: block; position:relative;}
li:hover li a{background: #0066FF;}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover, #menu li .current{
color: #FFFF00;
}
#menu ul li:hover ul{
width: 150px;
white-space: nowrap
height: 10px;
text-align: center;
background:#0066FF;
}
<div id="menu">
<ul>
<li>Home</li>
<li>Quran
<ul>
<li>Translation</li>
<li>Tajweed</li>
<li>Tafseer</li>
<li>Qoutes</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari</li>
<li>Sahih Muslim</li>
<li> Sunan Abu-Dawud</li>
<li>al-Tirmidhi</li>
<li>al-Nasa'i</li>
<li>Ibn Maja </li>
</ul></li>
<li>Wazaif
<ul>
<li>Allah's help</li>
<li>Rizzaq</li>
<li>Aulaad</li>
<li>Marriage</li>
</ul></li>
<li>Rights & Duties
<ul>
<li>As Parents</li>
<li>As Husband</li>
<li>As Wife</li>
<li>As Son</li>
<li>As Daughter</li>
</ul></li>
<li>Videos
<ul>
<li>Molana Tariq Jameel</li>
<li>Dr Zakir Naik</li>
<li>Dr Farhat Hashmi</li>
<li>Naat videos</li>
</ul></li>
<li>Quran & Science</li>
<li>Library
<ul>
<li>Masnoon Duain</li>
<li>Tib-e-Nabvi</li>
<li>Tafseer</li>
<li>Islamic comerace</li>
</ul></li>
<li>FAQs</li>
<li>Blogs</li>
<li>Contacts</li>
</ul>
</div>
It looks like the problem is that you haven't positioned the sub-menus properly.
Because the sub-menu have not been given position:absolute they remain in the documents flow and so disturb other elements when shown.
Adding position:absolute removes them from the flow and solves the problem.
In order to be positioned according to the parent li, that li needs to be a block (hence display:inline-block)(you could float the li too if that's your choice) and be given position:relative.
Here's a suggestion that should help you along the way.
#menu ul li {
display:inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top:100%;
left:0;
}
li:hover ul {
display: block;
}
JSfiddle Demo
#menu {
float: left;
width: 1000px;
height: 30px;
background-color: #0066FF;
border-bottom: 1px solid #333;
``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li {
display: inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover ul {
display: block;
}
li:hover li a {
background: #0066FF;
}
#menu ul li a {
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover,
#menu li .current {
color: #FFFF00;
}
#menu ul li:hover ul {
width: 150px;
white-space: nowrap height: 10px;
text-align: center;
background: #0066FF;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>Quran
<ul>
<li>Translation
</li>
<li>Tajweed
</li>
<li>Tafseer
</li>
<li>Qoutes
</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari
</li>
<li>Sahih Muslim
</li>
<li> Sunan Abu-Dawud
</li>
<li>al-Tirmidhi
</li>
<li>al-Nasa'i
</li>
<li>Ibn Maja
</li>
</ul>
</li>
<li>Wazaif
<ul>
<li>Allah's help
</li>
<li>Rizzaq
</li>
<li>Aulaad
</li>
<li>Marriage
</li>
</ul>
</li>
<li>Rights & Duties
<ul>
<li>As Parents
</li>
<li>As Husband
</li>
<li>As Wife
</li>
<li>As Son
</li>
<li>As Daughter
</li>
</ul>
</li>
<li>Videos
<ul>
<li>Molana Tariq Jameel
</li>
<li>Dr Zakir Naik
</li>
<li>Dr Farhat Hashmi
</li>
<li>Naat videos
</li>
</ul>
</li>
<li>Quran & Science
</li>
<li>Library
<ul>
<li>Masnoon Duain
</li>
<li>Tib-e-Nabvi
</li>
<li>Tafseer
</li>
<li>Islamic comerace
</li>
</ul>
</li>
<li>FAQs
</li>
<li>Blogs
</li>
<li>Contacts
</li>
</ul>
</div>
I want to make this navigation that it looks like in tiled format. But here some white spaces coming at the end of the one row. Is it possible to make it form like a border surrounded by navigation & inside it navigation looks like proper tiles instead of some white space..
My Code..
.nav {
width: 960px;
margin: 50px auto;
border: 1px solid #06c;
display: table
}
.nav ul {
padding: 0;
margin: 0
}
.nav ul li {
list-style: none;
float: left;
border: 1px solid #06C;
font-family: Swis721 Cn BT;
font-weight: bold;
display: block
}
.nav ul li a {
text-decoration: none;
color: #06C;
padding: 10px 20px 10px 12px;
display: block
}
.nav ul li a:hover {
color: #fff;
background: #06c
}
<div class="nav">
<ul>
<li>ALL
</li>
<li>AGENCY
</li>
<li>AUTOMOBILES
</li>
<li>BANKING
</li>
<li>CONSUMER DURABLE & FMCG
</li>
<li>CONSULTING
</li>
<li>EDUCATIONAL
</li>
<li>FINANCIAL SERVICES
</li>
<li>HOSPITALITY
</li>
<li>INFRASTRUCTURE & REAL ESTATE
</li>
<li>INTERNATIONAL
</li>
<li>IT
</li>
<li>LEGAL
</li>
<li>MANFACTURING
</li>
<li>MARINE
</li>
<li>MEDIA
</li>
<li>OIL & GAS
</li>
<li>ONLINE
</li>
<li>OTHERS
</li>
<li>PHARMA
</li>
<li>RETAIL
</li>
<li>THEME PARK
</li>
</ul>
</div>
Probably this will work as i have given some special styles (css) to some 'li' however this will not provide 100% output as you want but still effective in such case..
.nav {
width: 970px;
margin: 50px auto;
border:0px solid;
display: table
}
.nav ul {
padding: 0;
margin: 0
}
.nav ul li {
list-style: none;
float: left;
border: 1px solid #06C;
font-family: Swis721 Cn BT;
font-weight: bold;
display: block;
min-width:5%;
width:auto;
text-align:center
}
.nav ul li a {
text-decoration: none;
color: #06C;
padding: 10px 20px 10px 12px;
display: block
}
.nav ul li a:hover {
color: #fff;
background: #06c
}
<div class="nav">
<ul>
<li>ALL
</li>
<li>AGENCY
</li>
<li>AUTOMOBILES
</li>
<li>BANKING
</li>
<li>CONSUMER DURABLE & FMCG
</li>
<li>CONSULTING
</li>
<li style="width:25%">EDUCATIONAL
</li>
<li>FINANCIAL SERVICES
</li>
<li>HOSPITALITY
</li>
<li>THEME PARK
</li>
<li>INTERNATIONAL
</li>
<li>IT
</li>
<li>LEGAL
</li>
<li>MANFACTURING
</li>
<li style="width:15%">MARINE
</li>
<li>MEDIA
</li>
<li>OIL & GAS
</li>
<li>ONLINE
</li>
<li>OTHERS
</li>
<li>PHARMA
</li>
<li>RETAIL
</li>
<li style="width:45%">INFRASTRUCTURE & REAL ESTATE
</li>
</ul>
</div>
Note : Keep in mind the output will be different in such case like change of fonts, or any navigation position change other than it is written now..
you can use this
.nav{
border:0px solid;
}
.nav ul li{
width:25%;/*according to your need you can increase or decrease*/
}
.nav ul {
padding: 0;
margin: 0
}
.nav {
width: 960px;
margin: 50px auto;
border: 1px solid #06c;
display: table;
padding: 0px 0px;
font-size: 100%;
}
.nav ul li {
list-style: none;
float: left;
border: 1px solid #06C;
font-family: sans-serif;
font-weight: bold;
min-width: 7.8%;
width: auto;
font-size: inherit;
text-align: center;
}
.nav ul li a {
text-decoration: none;
color: #06C;
adding: 10px 12px 10px 12px;
display: list-item;
WIDTH: AUTO;
min-width: 100%;
box-sizing: border-box;
}
.nav ul li a:hover {
color: #fff;
background: #06c
}
<div class="nav">
<ul>
<li>ALL
</li>
<li>AGENCY
</li>
<li>AUTOMOBILES
</li>
<li>BANKING
</li>
<li>CONSUMER DURABLE & FMCG
</li>
<li>CONSULTING
</li>
<li>EDUCATIONAL
</li>
<li>FINANCIAL SERVICES
</li>
<li>HOSPITALITY
</li>
<li>INFRASTRUCTURE & REAL ESTATE
</li>
<li>INTERNATIONAL
</li>
<li>IT
</li>
<li>LEGAL
</li>
<li>MANFACTURING
</li>
<li>MARINE
</li>
<li>MEDIA
</li>
<li>OIL & GAS
</li>
<li>ONLINE
</li>
<li>OTHERS
</li>
<li>PHARMA
</li>
<li>RETAIL
</li>
<li>THEME PARK
</li>
</ul>
</div>