I wrote a code using different internet source and I ran into a problem every object that's in the bottom of the menu parts cannot be interacted the menu interferes everything below him where the dropdown falls . the hitbox of the menu seems to included the dropdown even when its not shown
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Help will be appreciated
edit:
the menu is working but everything below him in the area where the dropdown fals dosent
Related
I have a hoverable drop down menu where sub links are supposed to be open to the right. This code has remained the same for couple of years now and it's been working. Now I added a new sub link and the code broke.
This is menu's code:
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 50px;
}
#divMenu li {
list-style: none;
position: relative;
background: #cfcfcf;
font-size:20px;
}
#divMenu li li {
list-style: none;
position: relative;
background: #C0C0C0;
left: 148px;
top: -27px;
font-size:12px;
z-index: 999;
}
#divMenu ul li a {
width: 148px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#000000;
border:1px solid #2d2d2d;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #C0C0C0;
}
#divMenu ul li:hover ul li a:hover {
background-color: #C0C0C0;
}
#divMenu a:hover {
font-weight: none;
}
<div id="divMenu">
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>Herrat
<ul>
<li><p style="font-size:10px;margin:0px"><a href="hermann.php">Macawi
Mosi Double E´s Xahir</a></p></li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li><a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a></li>
</ul>
</div>
So I've added one more sub-link there and even if I remove it, the code won't work.
Screen cap: the sub links are shown all the time - not with hovering
You have missed the starting <ul> tag after <div id="divMenu"> . Adding <ul> after <div id="divMenu"> shall fix it for you.
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 50px;
}
#divMenu li {
list-style: none;
position: relative;
background: #cfcfcf;
font-size:20px;
}
#divMenu li li {
list-style: none;
position: relative;
background: #C0C0C0;
left: 148px;
top: -27px;
font-size:12px;
z-index: 999;
}
#divMenu ul li a {
width: 148px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#000000;
border:1px solid #2d2d2d;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #C0C0C0;
}
#divMenu ul li:hover ul li a:hover {
background-color: #C0C0C0;
}
#divMenu a:hover {
font-weight: none;
}
<div id="divMenu">
<ul>
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>Herrat
<ul>
<li><p style="font-size:10px;margin:0px"><a href="hermann.php">Macawi
Mosi Double E´s Xahir</a></p></li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li><a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a></li>
</ul>
</div>
you are just missing opening element ul at first. just change your html code to below :
<div id="divMenu">
<ul>
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>
Herrat
<ul>
<li>
<p style="font-size:10px;margin:0px">
<a href="hermann.php">
Macawi
Mosi Double E´s Xahir
</a>
</p>
</li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>
Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>
Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>
Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>
Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li>
<a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a>
</li>
</ul>
</div>
I don't know how to really explain this in a simple question for the title, but I have an example page to show you what I mean at http://www.yenrac.net/test
I am having problems with dropdown menus, as you can see. Whenever I hover over to the next category in the dropdown 'accordion' it jumps back and screws with desktop cursors if they have their browser in a small window. Another thing is that mobile users cannot just click the box link again to close the dropdown, which is something else I would like to fix. Can someone please take a look at this and help me figure out what I am doing wrong?
Here is my HTML: http://pastebin.com/RkFs97wH
<nav>
<ul id="navigation">
<li><a id="current" href="index.html">Home</a></li>
<li>FAQ</li>
<li><a class="dropdown" href="#">Dropdown</a>
<ul>
<li>
<a class="pullout" href="#">Pullout Tab</a>
<ul>
<li>Tier 3 Tab</li>
</ul>
</li>
<li>
<a class="pullout" href="#">Pullout Tab 2</a>
<ul>
<li>Tier 3 Tab</li>
</ul>
</li>
</ul>
</li>
<li>Servers</li>
<li id="last">Contact Us</li>
</ul>
</nav>
Here is my CSS: http://pastebin.com/ttYh0Qz6
/* Set to very large range just for convenience of testing */
#media screen and (max-width: 10000px) {
#postdatemeta {
visibility: visible;
}
.postdate {
visibility: hidden;
}
nav ul {
list-style-type: none;
margin: 0 auto;;
padding: 0;
width: 98%;
}
nav li a {
display: block;
color: #fff;
padding: 1em 0;
margin: 0.3em auto;;
text-decoration: none;
text-align: center;
background: #000;
}
nav ul ul {
position: absolute;
visibility:hidden;
}
nav ul li:hover > ul {
visibility: visible;
position: relative;
}
nav ul ul li a {
background: #999;
}
.pullout:after {
content: "\000020\0025BE";
}
I appreciate any help and feedback you are able to provide me!
You are adding a margin to the a element, but the parent li item ignores these margins currently, so when you mouse over the margins, it recognizes you as moving the mouse off of the li, so the :hover state goes away resulting in a collapsed menu.
Try add the following:
nav li {
width: 100%;
display: inline-block;
}
This allows the li element to wrap the a element including the margins, so when they are moused over, the :hover state remains.
#media screen and (max-width: 10000px) {
nav ul {
list-style-type: none;
margin: 0 auto;
;
padding: 0;
width: 98%;
}
nav li {
width: 100%;
display: inline-block;
}
nav li a {
display: block;
color: #fff;
padding: 1em 0;
margin: 0.3em auto;
;
text-decoration: none;
text-align: center;
background: #000;
}
nav ul ul {
position: absolute;
visibility: hidden;
}
nav ul li:hover > ul {
visibility: visible;
position: relative;
}
nav ul ul li a {
background: #999;
}
.pullout:after {
content: "\000020\0025BE";
}
}
<nav>
<ul id="navigation">
<li><a id="current" href="index.html">Home</a>
</li>
<li>FAQ
</li>
<li><a class="dropdown" href="#">Dropdown</a>
<ul>
<li>
<a class="pullout" href="#">Pullout Tab</a>
<ul>
<li>Tier 3 Tab
</li>
</ul>
</li>
<li>
<a class="pullout" href="#">Pullout Tab 2</a>
<ul>
<li>Tier 3 Tab
</li>
</ul>
</li>
</ul>
</li>
<li>Servers
</li>
<li id="last">Contact Us
</li>
</ul>
</nav>
I am wanting to change some items that I have labeled using ids to one single class so that in my CSS I can refer to them with .sortsubmenu rather than #sortsongmenu, #sortartistmenu, etc.
The problem is that when I change one of them from an id to a class, it messes up the formatting. In the picture below, everything about the songsubmenu and artistsubmenu are exactly the same, only songsubmenu is identified using an id and artistsubmenu is identified using a class.
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu > li {
display: block;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li:hover ul {
display: inline-block;
}
#sortsongmenu, .sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: 100px;
}
#sortsongmenu li, .sortsubmenu li {
display: inline;
}
#sortsongmenu li a:hover, .sortsubmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home
</li>
<li>
Search
</li>
<li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul id="sortsongmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Artist</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Album</a>
</li>
<li>
<a href='#'>Genre</a>
</li>
<li>
<a href='#'>BPM</a>
</li>
<li>
<a href='#'>Release Date</a>
</li>
</ul>
</li>
<li>
Add Song
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
The #mainmenu li rule is getting in your way. It's not overridden by the class-based selector, as it was by the id-based selector.
Keep that positioning / size to the immediate descendants only, that is, change:
#mainmenu li {
to
#mainmenu > li {
and all is well.
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu > li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu > li {
display: block;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li:hover ul {
display: inline-block;
}
#sortsongmenu,
.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: 100px;
}
#sortsongmenu li,
.sortsubmenu li {
display: inline;
}
#sortsongmenu li a:hover,
.sortsubmenu li a:hover {
color: #DB7093;
}
<div id="topbar">
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home
</li>
<li>
Search
</li>
<li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul id="sortsongmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Artist</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a>
</li>
<li>
<a href='#'>Z to A</a>
</li>
</ul>
</li>
<li>
<a href='#'>Album</a>
</li>
<li>
<a href='#'>Genre</a>
</li>
<li>
<a href='#'>BPM</a>
</li>
<li>
<a href='#'>Release Date</a>
</li>
</ul>
</li>
<li>
Add Song
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
I have a css menu and would like to open it without moving the rest of the page.
Here is the current fiddle: http://jsfiddle.net/50c1Lhe7/
HTML
<div class="logo-container large-6 columns">
<div class="large-3 columns">IMAGE</div>
<div class="large-9 columns">
<a href="/" rel="home">
<h1 class="site-title">WORDS</h1>
<div class="site-slogan">MORE WORDS</div>
</a>
</div>
</div>
<nav id="nav" role="navigation">
☰ MAIN MENU
☰ MAIN MENU
<ul id="main-menu" class="main-nav left">
<li class="first leaf" title="">Home</li>
<li class="expanded has-dropdown" title="">About
<ul class="dropdown">
<li class="expanded show-for-small">About</li>
<li class="first leaf">About</li>
<li class="leaf" title="">Our Team</li>
</ul>
</li>
<li class="leaf" title="">Publications</li>
<li class="leaf" title="">Events</li>
<li class="leaf active" title="">Blog</li>
<li class="last leaf">Contact</li>
</ul>
</nav>
SCSS
#nav{
display: none;
width: 45%;
height: 55px;
float: left;
padding: 20px;
#main-menu {
ul { float: none; }
li.expanded.show-for-small { display: none !important; }
}
#main-menu{
margin-top: 21px;
padding: 0;
width: 100vw;
}
}
#nav > a{
display: none;
}
#nav li {
position: relative;
list-style-type: none;
padding-top: 15px;
}
#nav > ul{
height: 3.75em;
}
#nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
#nav li ul{
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul,
#nav li:focus ul { display: block; }
#nav {
position: relative;
z-index: 999;
display: block;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type { display: block; }
#nav > ul {
height: auto;
display: none;
position: absolute;
}
#nav > ul { left: 0; }
#nav:target > ul { display: block; }
#nav > ul > li {
width: 100%;
float: none;
padding: 10px 0 10px 20px;
text-transform: uppercase;
list-style-type: none;
}
#nav > ul > li.first.leaf.active { padding-top: 5px; }
#nav li ul { position: static; }
Since the menu works by targetting the nav id, whenever the menu is clicked to open it drops down to the nav section. How would I change this so that it can be clicked and open without moving to the section? If this can be done easier with javascript please let me know.
The jump is a common problem for using :target for menu, suggest to use checkbox instead, it also works on more browsers. Simplified demo follows.
JSFIDDLE DEMO
/*main menu*/
nav {
margin-top: 100px;
}
.menu-label {
display: block;
background: yellow;
}
.main-nav {
display: none;
}
.menu-checkbox {
display: none;
}
.menu-checkbox:checked + .main-nav {
display: block;
}
/*sub menu*/
.dropdown {
display: none;
}
.main-nav li:hover .dropdown{
display: block;
}
<nav>
<label for="menu-1" class="menu-label">☰ MAIN MENU</label>
<input id="menu-1" class="menu-checkbox" type="checkbox" />
<ul id="main-menu" class="main-nav left">
<li class="first leaf" title="">Home</li>
<li class="expanded has-dropdown" title="">
About
<ul class="dropdown">
<li class="expanded show-for-small">Sub menu 1</li>
<li class="first leaf">Sub menu 2</li>
<li class="leaf" title="">Sub menu 3</li>
</ul>
</li>
<li class="leaf" title="">Publications</li>
<li class="leaf" title="">Events</li>
<li class="leaf active" title="">Blog</li>
<li class="last leaf">Contact</li>
</ul>
</nav>
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>