how to select Menu and submenus using selenium in firefox - html

Below is mentioned HTML source for menu and sub menu,
i want to click on sub menu.
how to do that using selenium Webdriver.
below is HTML information of page.
<div id="topnav" class="row" role="navigation">
<div id="nav" class="row-980">
<div class="region region-nav">
//Top Navigation menu bar
<div id="block-menu-block--navigation-top" class="block block-menu-block">
<div class="content">
<ul class="muchomenu-menu muchomenu-menu-horizontal">
<li class="first leaf has-children active-trail active menu-mlid-838 muchomenu-parent on">
<span class="muchomenu-parent-title">
<div class="muchomenu-bin muchomenu-slots" style="left: 0px; right: auto; top: -9999px;">
</li>
<li class="leaf has-children menu-mlid-859 muchomenu-parent off">
<span class="muchomenu-parent-title">
<div class="muchomenu-bin muchomenu-slots" style="left: 111px; right: auto; top: -9999px;">
<div class="col-2">
<div class="col left margin_0_20_0_0">
<div class="panel-pane pane-menu-tree pane-main-menu">
<ul>
//first menu item in Menu
<li class="pane-title">
<a alignment="left" panel="our_businesses" href="/our-businesses/ukpil- overview">UKPIL</a>
</li>
<li class="first leaf menu-mlid-1195">
<li class="leaf has-children menu-mlid-1250">
<li class="last leaf has-children menu-mlid-976">
</ul>
</div>
</div>
<div class="col left margin_0_20_0_0">
<div class="clear"></div>
</div>
</div>
</li>
<li class="leaf has-children menu-mlid-835 muchomenu-parent special-center off">
<span class="muchomenu-parent-title">
<div class="muchomenu-bin muchomenu-slots" style="left: 0px; right: auto; top: -9999px;">
<div class="col-3">
<div class="col left margin_0_20_0_0">
<div class="panel-pane pane-menu-tree pane-main-menu">
<ul>
<li class="pane-title">
Customer commitment
</li>
<li class="first leaf menu-mlid-982">
<li class="last leaf menu-mlid-983">
</ul>
</div>
<div class="panel-separator"></div>
<div class="panel-pane pane-menu-tree pane-main-menu">
</div>
<div class="col left margin_0_20_0_0">
<div class="col left margin_0_20_0_0">
<div class="clear"></div>
</div>
</div>
</li>
<li class="leaf has-children menu-mlid-853 muchomenu-parent special-center off">
<li class="leaf has-children menu-mlid-860 muchomenu-parent special-center off">
<li class="leaf has-children menu-mlid-858 muchomenu-parent special off">
<li class="last leaf has-children menu-mlid-857 muchomenu-parent special off">
</ul>
</div>
</div>
</div>

Related

Dropdown not showing up using Materialize

I have materialize.min.css included already and everything else on the page is working.
But when I try the dropdown nothing seems to happen. Any help would be appreciated.
The dropdown I am trying to show is dropdown1. First li in nav-content. I tried as you can see to put the dropdown below origin but it did not help.
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav class="nav-extended">
<div class="nav-wrapper">
ASite
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
<li><a class="waves-effect waves-light btn">Register</a></li>
<li><a class="waves-effect waves-light btn">Login</a></li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab"><a class='dropdown-button' href='#' data-activates='dropdown1' data-beloworigin='true'>Drop Me!</a></li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab">Disabled Tab</li>
<li class="tab">Test 4</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>

You must need to include .js file also before ending tag of body. Copy following tag and place it before end tag of body.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

image not looking good in firefox as it looks in chrome

I am having the problem which is the image on my chrome is looking perfectly fine as it is shown in the screenshot given below but in firefox it is not looking fine as it looks like in chrome
This is how it looks in Firefox.
And this is how it looks in Chrome.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
<div class="desti-tab-row col col-sm-12 no-padding">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active safetyandsecurity" data-toggle="tab"
href="#safetyandsecurity">SAFETY AND SECURITY
</a></li>
<li class="nav-item"><a class="nav-link comfortandconvenience" data-toggle="tab"
href="#comfortandconvenience">COMFORT AND CONVENIENCE
</a></li>
<li class="nav-item"><a class="nav-link environmental" data-toggle="tab" href="#environmental">ENVIRONMENTAL</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="safetyandsecurity">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">SAFETY AND SECURITY</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="sec_cam"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-cam.png">
<span>24HR CCTV MONITORING</span>
</li>
<li class="list-item"><img class="cctv"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/cctv.png">
<span>CCTV CONTROL ROOM</span>
</li>
<li class="list-item"><img class="sec_personnel"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-personnel.png">
<span>SECURITY PERSONNEL ON-DUTY AROUND THE CLOCK</span>
</li>
<li class="list-item"><img class="entry_exit"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/entry_exit.png">
<span>ENTRY AND EXIT CONTROLLED BY ACCESS CARD SYSTEM</span>
</li>
<li class="list-item"><img class="heigtened_rail"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heightened-railings.png">
<span>HEIGHTENED RAILINGS</span>
</li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="window_opening"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/windows-opening.png">
<span>RESTRICTED WINDOW OPENING SPACE</span>
</li>
<li class="list-item"><img class="fire_doors"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-dors.png">
<span>FIRE RATED DOORS</span>
</li>
<li class="list-item"><img class="fire_access"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-access.png">
<span>FIRE RATED ACCESS CONTROL PANELS</span>
</li>
<li class="list-item"><img class="fire_furniture"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-furniitiure.png">
<span>FIRE RATED FURNITURE</span></li>
<li class="list-item"><img class="wifi"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/wifi.png">
<span>SECURE ISOLATED NETWORKS FOR WI-FI AND CCTV</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="comfortandconvenience">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">COMFORT AND CONVENIENCE</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="male_female"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/male_female.png">
<span>DEDICATED BLOCKS FOR MALE AND FEMALE RESIDENTS</span>
</li>
<li class="list-item"><img class="sound"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sound.png">
<span>NOISE REDUCING WALLS AND DOORS (STC RATED)</span>
</li>
<li class="list-item"><img class="room"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/room.png">
<span>DEDICATED ACCESS POINTS FOR EACH ROOM</span>
</li>
<li class="list-item"><img class="internet"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/internet.png">
<span>HIGH SPEED INTERNET</span>
<li class="list-item"><img class="sweeper"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sweeper.png">
<span>FULL-TIME SANITARY AND HOUSEKEEPING SERVICES</span></li>
</div>
<div class="col-sm-6">
</li>
<li class="list-item"><img class="digital_notice"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/digital_notice.png">
<span>DIGITAL NOTICE BOARDS ACROSS THE PROPERTY</span>
</li>
<li class="list-item"><img class="residence"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/residence.png">
<span>ON-SITE
RESIDENT SUPPORT – COMMUNITY MANAGEMENT</span>
</li>
<li class="list-item"><img class="water_proof"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/waterproof.png">
<span>WATERPROOF, ANTIFUNGAL AND ANTIBACTERIAL COMFORT SPRING MATTRESSES</span>
</li>
<li class="list-item"><img class="myriad_app"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/myriad_app.png">
<span>THE MYRIAD APP – TO CENTRALISE ADMINISTRATION AND SERVICES SUCH AS BOOKINGS,
PAYMENTS AND NOTICES</span>
</li>
<li class="list-item"><img class="phone"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/phone.png">
<span>IN-ROOM PHONES</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="environmental">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">ENVIRONMENTAL</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="heat"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">
<span>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</span>
</li>
<li class="list-item"><img class="air_window"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png">
<span>DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT</span>
</li>
<li class="list-item"><img class="low_energy"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png">
<span>LOW ENERGY CONSUMING HEAT PUMPS</span></li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="solar_panel"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png">
<span>SOLAR PANELS SPACE</span>
</li>
<li class="list-item"><img class="sensor"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png">
<span>OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN - ROOM AND THROUGHOUT
COMMON AREAS</span>
</li>
<li class="list-item"><img class="shower"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png">
<span>WATER CONSERVING SHOWERHEADS</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Tab end row -->
</div>
CSS
.list-item {
margin-bottom: 20px;
}
.list-item img {
margin-right: 10px;
}
li.list-item {
display: flex;
margin-bottom: 25px;
align-items: center;
}
li img {
margin-right: 21px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
How can i correct the images in Firefox?

You can use css grid for this.
li.list-item {
display: grid;
align-items: center;
grid-template-columns: min-content 1fr;
}
demo

How can I add a submenu to the sidenav in Materialize?

How can I add submenu to the following sidenav?
<ul class="sidenav sidenav-fixed" id="nav-mobile" style="width:250px">
<li> Text here</li>
<li>
<div class="divider"></div>
</li>
<li>
<a onclick="load('home')"><i class="material-icons">home</i>Home</a>
</li>
<li><a onclick="load('intro')"><i class="material-icons">apps</i>Content Table</a></li>
</ul>

MaterializeCSS documentation site uses a collapsible inside the sidenav:
https://materializecss.com/collapsible.html
Collapsible is a separate component that also needs initialising:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
Working codepen:
https://codepen.io/doughballs/pen/RwPWVqy
The actual markup taken from the Materialize doc site is:
<!-- Start nested content -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal" tabindex="0"><i class="material-icons">menu</i>Nested</a>
<div class="collapsible-body">
<ul>
<li>Color</li>
<li>Grid</li>
<li>Helpers</li>
<li>Media</li>
<li>Pulse</li>
<li>Sass</li>
<li>Shadow</li>
<li>Table</li>
<li>Transitions</li>
<li>Typography</li>
</ul>
</div>
</li>
</ul>
</li>

You can do something like below with MaterializeCSS
<div id="slide-out" class="sidenav" style="transform: translateX(0%);">
<ul class="collapsible">
<li class="active">
<div class="collapsible-header">
Group1
</div> <div class="collapsible-body" style="display: block;">
<li>Course 1</li>
<li>Course 2</li>
</div>
</li>
<li class="">
<div class="collapsible-header">
केंद्रीय लोकसेवा आयोग
</div>
<div class="collapsible-body" style="">
</div>
</li>
</ul>
</div>

Fixed position not working in header and navigation menu

I am editing a Joomla template and I want to keep the menu and the header fixed when scrolling. The problem is when I set the position to fixed for both, the menu div moves up to the same position as the header div which is (0,0) and also the header div seems to have a different position than before as there is overlap between it and the slider underneath.
I am new to web development and I don't know why this is happening.
Screenshot 1 : Without setting the #yt_header and #yt_menuwrap to fixed positions.
Screenshot 2: #yt_menuwrap set to position fixed.
Screenshot 3: Both set to position fixed.
Screenshot 4 : #yt_menuwrap and #yt_header set to fixed with a z-index:-99999 for yt_header.Focus on the flag and the sky and compare them with the following screenshots.
#yt_menuwrap {
background: #D3D3D3;
margin: 0;
position: fixed;
z-index: 98;
width: 100%
}
#yt_header {
position: fixed;
z-index: 100;
padding: 0;
background-color: #f9fafc;
background-color: white;
width:100%;
left:0;
top:0;
}
<body id="bd" class="homepage home-layout1 res">
<div id="yt_wrapper" class="layout-wide">
<header id="yt_header" class="block">
<div class="container">
<div class="row">
<div id="search" class="col-md-12">
<form id="mod-finder-searchform" action="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14" method="get" class="form-search">
<div class="finder">
<label for="mod-finder-searchword" class="element-invisible finder">Search</label>
<input type="text" name="q" id="mod-finder-searchword" class="search-query input-medium" size="25" value="" placeholder="Search ...">
</div>
</form>
</div>
<div id="yt_logo" class="col-md-5 hidden-sm hidden-xs">
<a class="logo" href="http://localhost:8888/home/" title="الجامعة التكنولوجيه">
<img data-placeholder="no" src="./UOT_files/uotlogo210new1.png" alt="الجامعة التكنولوجيه" style="width:61px;height:85px;">
</a>
</div>
<div id="title" class="col-md-2">
<!-- BEGIN: Custom advanced (www.pluginaria.com) -->
<div class="namePART1">
<p id="uniNamePART1">UNIVERSITY OF</p>
</div>
<div class="namePART2">
<p id="uniNamePART2">TECHNOLOGY</p>
</div>
<!-- END: Custom advanced (www.pluginaria.com) -->
</div>
<div id="icons-top" class="col-md-4">
<ul class="menu ">
<li class="item-1768"><a class="circle" href="http://localhost:8888/home/index.php/en/site-map">AR</a>
</li>
<li class="item-1770"><a class="circle fa-search" href="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14"> </a>
</li>
<li class="item-1771"><a class="circle fa-graduation-cap" href="http://localhost:8888/home/index.php/en/2016-09-17-19-47-04"> </a>
</li>
</ul>
</div>
</div>
</div>
</header>
<nav id="yt_menuwrap" class="block">
<div class="container">
<div class="row">
<div id="test" class="col-sm-12 hidden-sm hidden-xs">
<ul class="menu ">
<li class="item-1763 active">STAFF
</li>
<li class="item-1764">FACULTY
</li>
<li class="item-1765">RESEARCH
</li>
<li class="item-1766">NEWS
</li>
<li class="item-1767">IMPORTANT SITES
</li>
</ul>
</div>
<div id="yt_mainmenu" class="col-md-12 co-sm-12 ">
<ul id="meganavigator" class="clearfix navi ">
<li class="active level1 first ">
<a title="HOME" class="active level1 first item-link" href="http://localhost:8888/home/"><span class="menu-title">HOME</span></a>
</li>
<li class="level1 havechild ">
<a title="UNIVERSITY" class="level1 havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">UNIVERSITY</span></a>
<!-- open mega-content div -->
<div class="level2 menu mega-content" style="display: none;">
<div class="mega-content-inner clearfix">
<div class="mega-col first one">
<ul class="subnavi level2">
<li class="level2 first havechild ">
<a title="About University" class="level2 first havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">About University</span></a>
<!-- open mega-content div -->
<div class="level3 menu mega-content" style="display: none;">
<div class="mega-content-inner clearfix">
<div class="mega-col first one">
<ul class="subnavi level3">
<li class="level3 first ">
<a title="Mission and objectives of the university" class="level3 first item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/mission-and-objectives-of-the-university"><span class="menu-title">Mission and objectives of the university</span></a>
</li>
<li class="level3 ">
<a title="Members of the University Council" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/members-of-the-university-council"><span class="menu-title">Members of the University Council</span></a>
</li>
<li class="level3 ">
<a title="Organizational Chart" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/organizational-chart"><span class="menu-title">Organizational Chart</span></a>
</li>
<li class="level3 ">
<a title="Laws and regulations" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/laws-and-regulations"><span class="menu-title">Laws and regulations</span></a>
</li>
<li class="level3 ">
<a title="Category university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/category-university"><span class="menu-title">Category university</span></a>
</li>
<li class="level3 ">
<a title="History of the university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/history-of-the-university"><span class="menu-title">History of the university</span></a>
</li>
<li class="level3 ">
<a title="University landmarks" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-landmarks"><span class="menu-title">University landmarks</span></a>
</li>
<li class="level3 last ">
<a title="University logo" class="level3 last item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-logo"><span class="menu-title">University logo</span></a>
</li>
</ul>
</div>
</div>
</div>
</li>

Try this code:
#yt_menuwrap {
background: #D3D3D3;
margin: 0;
position: fixed;
z-index: 999;
width: 100%;
top: 0px;
}

<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if (jQuery(window).scrollTop() >= 300) {
jQuery('#yt_wrapper').addClass('fixed-header');
}
else {
jQuery('#yt_wrapper').removeClass('fixed-header');
}
});
});
</script>
<style>
.fixed-header { position: fixed; top:0; left:0; right: 0; width: 100%; background-color: #fff; z-index: 1010; margin: 0;
}
</style>

Pure CSS Menu Doesn't Work When Image Laid on Top

I have a website made where I want the header to slightly lay on top of my CSS menu. I lose my CSS menu when the image is laid overtop and would like to retain my CSS menu.
I want the CSS menu in the NAVI div to lay underneath the last image in the topLayer div.
Can anyone please explain a solution.
http://jsfiddle.net/hjkopytko/AfWD5/
HTML:
<body>
<div class="wrapper">
<header>
<div class="topLayer">
<a href="https://www.facebook.com/sawascana" target="_blank"><img src="media/images/metalFacebook.png" width="50" height="50"
style="display:block;position:absolute;margin-left:1050px;margin-top:25px;z-index:10" /></a><a href="https://twitter.com/sawascana" target="_blank"><img src="media/images/metal-twitter.png" width="50" height="50"
style="display:block;position:absolute;margin-left:1050px;margin-top:100px; z-index:10"/></a><a href="index.html"><img src="media/images/logoWhiteText.png" width="400" height="103"
style="display:block; position:absolute;margin-left:75px;margin-top:25px;z-index:10;"/></a> <img src="media/images/metalTop.png" width="1200" height="373" style="display:block;auto;z-index:5" />
</div><!-- end of topLayer-->
</header> <!----- end of header-->
<div class="container">
<div class="whiteContainer">
<div id="navi">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<div class="rec">
<ul>
<li class="sa">YOUR SA
<ul>
<li class="sa">Executive Council</li>
<li class="sa">Bylaws</li>
<li class="sa">Minutes</li>
<li class="sa">Mission/Vision</li>
<li class="sa">Reports</li>
<li class="sa">SIAST Board Rep</li>
</ul>
</li>
<li class="campus">CAMPUS LIFE
<ul>
<li class="campus">Blood Clinics</li>
<li class="campus">Campus Policies</li>
<li class="campus">Events</li>
<li class="campus">Fitness Club</li>
<li class="campus">Student Lounge</li>
<li class="campus">Orientation</li>
<li class="campus">Promotions</li>
<li class="campus">Spirit Awards</li>
<li class="campus">S A F E</li>
</ul>
</li>
<li class="service">SERVICES
<ul>
<li class="service">Info</li>
<li class="service">Aboriginal Awareness</li>
<li class="service">AGM</li>
<li class="service">Health & Dental</li>
<li class="service">Advocacy/Rep</li>
<li class="service">Campus Shop</li>
<li class="service">Dean's Interaction</li>
<li class="service">Income Tax Returns</li>
<li class="service">Legal Consultation</li>
</ul>
</li>
<li class="involve">GET INVOLVED
<ul>
<li class="involve">Campus Groups</li>
<li class="involve">Leadership</li>
<li class="involve">Program Rep</li>
<li class="involve">Sub Committees</li>
<li class="involve">Volunteering</li>
</ul>
</li>
<li class="hello">CONTACT
<ul>
<li class="hello">Ad Opportunities</li>
<li class="hello">Contact Form</li>
<li class="hello">Office Info</li>
<li class="hello">Staff</li>
</ul>
</li>
</ul>
</div>
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
</div>
<!-- end of nav -->
<div id="slider" style="top:-125px;"> <!--> <-->
<ul>
<li><img src="media/images/banner1.jpg" /></li>
<li><img src="media/images/banner2.jpg"/></li>
</ul>
</div> <!--end of slider-->
<div id="column">
<p>Left Column</p>
</div>
<div class="column">
<p>right column</p>
</div>
<!--End of white container-->
</div>
<!-- end .container-->
<div class="push"></div>
<!---meant to push content to bottom of page-->
</div>
<footer>
<!---wrapper-->
<img src="media/images/metalBottom.png" width="1200" height="269" style="display:block; margin-left:auto; margin-right:auto ;z-index:10;" /> </footer>
</body>

Check out this question. Click through a DIV to underlying elements
Should fix it for you. Basically add pointer-events:none; to your overlaid image.