I'm trying to make a image go on top of the background image and both of those underneath the drop down menu.
(ALL IMAGES FOR THIS QUESTIONS ARE FROM GOOGLE SO U CAN SEE)
So in order [TOP TO BOTTOM]
Drop Down
Motorbike
Background
If anyone can help it would be greatly appreciated :D <3
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
padding-right: 5px;
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
/* Background */
.bg-main {
z-index: -2;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>ZeFrolity</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="zeefro">
<img src="http://ambebajaj.com/app/webroot/img/uploads/Homeslider/1458125292bikeprod-img.png" width="100%" height="100%">
</nav>
<nav class="bg-Main">
<img src="http://www.suttontrust.com/wp-content/uploads/2016/08/Coding.jpg" width="100%" height="100%">
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I thought z-index 1,2 and 3 would work cause they work like layers but they didn't if anyone knows the issue please let me know :D
As you can see the png img (the motorbike is on top of the page) and the tech jpg img is underneath it , i want the background of the motorbike to be the tech pretty much
Kind regards
Zefrolity
Negative z-index doesn't really work, but you can achieve the desired effect with some minimal reordering.
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
z-index: 3;
padding-right: 5px;
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
position: absolute;
z-index: 2;
text-align: center;
}
/* Background */
.bg-main {
position:absolute;
z-index: 1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>ZeFrolity</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
<nav class="zeefro">
<img src="http://ambebajaj.com/app/webroot/img/uploads/Homeslider/1458125292bikeprod-img.png" width="100%" height="100%">
</nav>
<nav class="bg-Main">
<img src="http://www.suttontrust.com/wp-content/uploads/2016/08/Coding.jpg" width="100%" height="100%">
</nav>
</body>
</html>
Related
My Dropdown menu opens up but it goes down under behind the screen like unless I increase the navbar height it isn't visible.
here is my code.
I want it to come on top of everything so the user can actually see it.
It goes underneath the nav section, so is not visible.
.sub-menu {
display: none;
margin-top: 0 !important;
}
.navbar-header .navbar-ul .main-menu-items .about-us-menu #about-sub-menu {
z-index: 100;
position: relative;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 150px;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu ul li a {
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.sub-menu ul li {
margin: 15px;
width: 120px;
position: relative;
/* padding: 15px; */
}
.navbar-header .navbar-ul .courses-sub-menu:hover .sub-menu ul li a {
width: 150px;
margin: 0 !important;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.navbar-header .navbar-ul .about-us-menu .sub-menu {
width: 180px;
}
.navbar-header ul li:hover .sub-menu {
display: block !important;
position: absolute;
background: #333333;
margin-top: 15px;
}
.sub-menu ul:hover {
display: block !important;
}
.navbar-header ul li:hover .sub-menu ul {
display: block;
/* margin: 10px; */
}
.sub-menu ul li:hover {
display: block;
background: #f5f5f7;
color: black !important;
}
.sub-menu ul li a {
color: #f5f5f7;
}
.navbar-header ul li:hover .sub-menu ul li {
display: block !important;
color: black;
width: 150px;
padding: 0 !important;
border-radius: 0;
text-align: center;
}
.sub-menu ul li a:hover {
color: black;
}
<div class="navbar-header" style="padding: 0; margin: 0; ">
<ul class="navbar-ul">
<div class="main-menu-items">
<li>
<a routerLink="/home"><img src="../../../assets/xyz" class="navbar-logo" alt=""></a>
</li>
<!-- logo -->
<!-- <li><a routerLink="/home">Home</a></li> -->
<!-- <li><a routerLink="/aboutus">About Us</a></li> -->
<li class="about-us-menu"><a routerLink="#">About Us</a>
<div class="sub-menu">
<ul id="about-sub-menu">
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Blogs
</li>
</ul>
</div>
</li>
<li class="courses-sub-menu"><a routerLink="/courses">Courses</a>
<div class="sub-menu">
<ul>
<li>
Science
</li>
<li>
Physics
</li>
<li>
Biology
</li>
<li>
Mathematics
</li>
<li>
Chemistry
</li>
<li>
Business Studies
</li>
<li>
Accountancy
</li>
<li>
Economics
</li>
<li>
Psychology
</li>
<li>
SAT/ACT
</li>
</ul>
</div>
</li>
Here you go.
Check out these CSS properties to achieve your desired result.
.main-menu-items {
background: none;
color: Black;
padding: 12px 26px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
min-width: 160px;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.sub-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.sub-menu a:hover {background-color: #f1f1f1}
.dropdown:hover .sub-menu {
display: block;
position: absolute;
left: 100%;
top: 0;
}
.nav-wrapper {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navbar-header">
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">About Us</button>
<div class="sub-menu">
Gallery
Testimonials
Blogs
</div>
</div>
</div>
<div class="nav-wrapper">
<div class="dropdown">
<button class="main-menu-items">Courses</button>
<div class="sub-menu">
Science
Physics
Biology
Mathematics
Chemistry
Business Studies
Accountancy
Economics
Psychology
SAT/ACT
</div>
</div>
</div>
</div>
</body>
</html>
CSS submenu no longer appearing
This was working and I did something to it, I dont know if it is a code problem or a css problem. Forgive me if the post is not formatted correctly,
this is my first time posting at Stackoverflow.
html
<nav class='navClass'>
<ul>
<li>Home</li>
<li>Things To Do</li>
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
</li>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>
css
.navClass > ul{
background-color: #e56109;
color:#ffffff;
margin-top: 0px;
font-size: 20px;
font-family: Arial;
}
.navClass > ul li{
list-style-type: none;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
position: relative;
}
.navClass > ul li:hover{
background-color: #212121;
position: relative;
}
ul.sub-menu{
position: absolute;
background-color: #e56109;
list-style-type: none;
width: 200px;
margin-left: -25px;
padding-bottom: 0px;
margin-top: 10px;
opacity: 0;
}
ul.sub-menu li{
padding-left: 25px;
padding-top: 5px;
font-size: 15px;
}
ul.sub-menu li:hover{
color: #ffffff;
display: block;
}
.navClass li:hover .sub-menu{
opacity: 1;
}
The sub-menu items need to drop down from the parent item. In this case, the "Things to Do" item.
There is a simple error in your HTML code.
You have closed the <li> tag before.
Use This:
<nav class='navClass'>
<ul>
<li>Home</li>
<li>Things To Do
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
</li>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>
.navClass > ul{
background-color: #e56109;
color:#ffffff;
margin-top: 0px;
font-size: 20px;
font-family: Arial;
}
.dropdown {
position: relative;
display: inline-block;
}
.sub-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .sub-menu {
display: block;
background-color: #000000;
cursor: pointer;
}
.navClass > ul li:hover{
background-color: #212121;
position: relative;
}
<nav class='navClass'>
<ul class='t'>
<li class='b'>Home</li>
<span class="dropdown">
<li>Things To Do</li>
<span>
<ul class="sub-menu">
<li>Shopping</li>
<li>Attractions</li>
<li>Outdoor Fun</li>
</ul>
<li>Places To Stay</li>
<li>Where to Eat</li>
<li>Contests</li>
<li>History</li>
<li>Events</li>
</ul>
</nav>
I'm trying to make the drop down menu stay top right with the image behind it if anyone could help would be greatly appreciated i tried using z-index but that didn't work out for me !
( using a img off google so u guys can see what im talking about! )
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Either i did something wrong within the z-index unless i don't know whats happening :P
Kind regards
ZeFrolity
You need to put position: absolute to the div with background.
but
if a image is for background, you will usually want to use css background-image attribute instead of <img> tag.
you will also only need one nav tag only
/* Drop Down Menu */
.navClass {
z-index: 999;
float: right;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
position: absolute;
width:100%;
height:100%;
background-image: url("https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg")
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="zeefro">
</div>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
You can absolutely position the menu instead. I also removed the margin from body.
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>STREAMER // DESIGNER // YOUTUBER</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="bg-Main">
<img src="">
</nav>
<nav class="zeefro">
<img src="https://i.ytimg.com/vi/d-zKJCKsoWw/maxresdefault.jpg" text-align: center; >
</nav>
<nav class="navClass">
<ul>
<li>Contact Me</li>
<li>Home</li>
<li>About Me</li>
<li><a href="">Portfolio
<ul class="sub-menu">
<li>Logos</li>
<li>Banners</li>
<li>Twitch</li>
<li>Youtube</li>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li>Graphics</li>
<li>Merch</li>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li>Twitch</li>
<li>Youtube</li>
<li>All</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I'm trying to create a basic drop down menu. I'm having issues with the alignment. How can I get sub menu items to be directly underneath one another? For example, I am trying to get twitter, instagram, and facebook underneath "Social".
Thanks.
https://jsfiddle.net/xalxnder/ostaqgyk/
HTML
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
CSS
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline;
padding-right: 10px;
}
.main-nav .sub {
color: pink;
float: none;
z-index: -200;
}
//** .sub{display: none;
}
.dropdown:hover > .sub {
display: block;
position: absolute;
}
Here's the basics of it.
JSFiddle
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
ul {
list-style-type: none;
color: white;
}
.main-nav >li {
display: inline-block;
position: relative;
padding-right: 10px;
}
.sub {
position: absolute;
top: 100%;
left: 0;
color: pink;
/* display:none */ /* disabled for demo */
}
.dropdown:hover .sub {
display:block;
}
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
Since block-level elements take up their own line, this rule should hold you:
.sub li {
display: block;
}
Add to .main-nav .sub:
position: absolute;
padding: 0;
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline-block;
padding-right: 10px;
}
.main-nav .sub {
position: absolute;
padding: 0;
color: pink;
float: none;
z-index: -200;
}
.sub li {
display: block;
}
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
I have a css drop menu that works in all browsers except IE10...works in IE11 and Chrome, etc. I am using Homestead Intuit as the provider.
How can I get the drop down menu to work in IE10 and all versions?
My problem is the hover drop downs work fine in chrome, IE11, but not in IE10. I need the menu to work across all browsers and versions.
One forum I read mentioned that IE doesn't recognize the hover and you have to use java to get around that, but I am not familiar with java or much html coding beyond the basics.
And by not working, I mean that in IE 10, there are no drop downs from the menu at all and the only link that is clickable is the 'Home' and that is because it is not connected to a hover function.
Here is the link to the page... www.LovingHands.net/basketball.html
Here is the head code...
<head>
<style type="text/css">
<!--
body {
margin: 0;
height: 100%;
width: 100%;
font-family: Arial;
font-size: 16px;
}
img {
border-width: 0;
vertical-align: top;
}
.dfltc {
font-family: Impact;
font-size: 20px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
color: #000000;
}
#Oobj21761 {
position: absolute;
font-size: 10px;
z-index: 1;
text-align: left;
left: 8.90em;
top: 13.40em;
width: 71.30em;
height: 4.40em;
}
#Oobj21763 {
position: absolute;
font-size: 10px;
z-index: 2;
text-align: left;
left: 9.10em;
top: 20.10em;
width: 71.10em;
height: 4.60em;
}
/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {
margin: 0 -200 0 -145px;
}
ul.drop a {
display: block;
color: #fff;
text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #000000;
background: #470001;
color: #fff;
}
ul.drop {
position: relative;
z-index: 597;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 1px 30px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 599;
cursor: default;
font-size:;
background: #000000;
}
ul.drop ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 224px;
background: #FFFFFF;
border: 1px solid #470001;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
visibility: visible;
}
-->
</style>
Here is the css menu...
<div id="Oobj21761">
<div id="Gcode17050" class="dfltc">
<ul id="nav" class="drop">
<li>Home</li>
<li>
About
<ul>
<li>About Us</li>
<li>Meet Our Staff</li>
<li>
Endorsements
<ul>
<li>Official / Legal</li>
<li>Pastors / Ministers</li>
<li>Miscellaneous</li>
</ul>
</li>
<li>Our Support</li>
<li>F.A.Q.</li>
</ul>
</li>
<li>
Admission
<ul>
<li>Admission Info</li>
<li>
Endorsements
<ul>
<li>Official / Legal</li>
<li>Pastors / Ministers</li>
<li>Miscellaneous</li>
</ul>
</li>
</ul>
</li>
<li>
Testimonies
<ul>
<li>Individual</li>
<li>Full Service</li>
<li>Schedule Service</li>
<li>Sermons</li>
</ul>
</li>
<li>
Locations
<ul>
<li>Bradenton/Palmetto</li>
<li>Dade City, FL</li>
<li>India</li>
<li>Miami, FL</li>
<li>Jamestown, IN</li>
</ul>
</li>
<li>
Programs
<ul>
<li>Events & Fundraiers</li>
<li>Loving Hands India</li>
<li>Juggalo Outreach</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Contact Us</li>
<li>Prayer Requests</li>
<li>Join Mailing List</li>
<li>Schedule Service</li>
</ul>
</li>
</ul>
</div>
Thanks!