Here's to hoping someone else sees this and can help. This snippet of code works in every browser except for IE. The menu doesn't fade in, it just appears and it looks ugly.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Kentucky Appalachian Rural Rehabilitation Network</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="jquery.js">
</script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show submenu
$('ul', this).animate({opacity: "show", }, "slow");
},
function () {
//hide submenu
$('ul', this).fadeOut(250);
}
);
})
</script>
<body><div id="centerColumn">
<div id="header"></div>
<input type="hidden" name="arav" /><ul id="nav">
<li> Home
</li>
<li> Who We Are
</li>
<li> Other box
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</li>
<li> Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</li>
<li> Menu
<ul>
<li>State Level</li>
<li>National Level</li>
<li>Community Level</li>
</ul>
</li>
<li> Research</li>
<li> Contact Us
</li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="container">
<div id="footer">
Footer<a href="#"/>
</div></div></div></body></html>
css
body {
margin:1em;
padding:0;
height:100%;
background-color:#cccccc;
color:#000000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
border-style: thin;
}
.img{
float right;
padding-left: 3em;
border:thin black ;
}
#reg{font-family:"Palatino Linotype";
}
#centerColumn {
margin: 0 auto;
padding: 1em;
width: 50em;
text-align: left;
vertical-align: bottom;
background-color: #ffffff;
border: 1px solid #999999;
}
#header {
border-style: thin;
background-position: center;
margin: -1em -1em 0 -1em;
padding: 0 0 0 0;
height: 15.5em;
background-color: #ffffff;
background-attachment: scroll;
background-repeat:no-repeat;
}
#footer {
position:relative;
bottom:0;
margin:4em 0 0 0;
padding: 1em 1em 1em 1em;
height:5em;
line-height:4em;
text-align:center;
font-size:.8em;
background-color:#cccccc;
border-top:1px solid #999999;
}
/*****remove the list style****/
#nav {
margin:0;
padding:0;
list-style:none;
}
/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:7em;
background:#0063dc;
position:relative;
z-index:500;
margin:0 1px;
}
/*****parent menu*****/
#nav li a {
display:block;
padding:5px 5px 5px 5px;
font-weight:700;
height:38px;
text-decoration:none;
color:#696969;
text-align:center;
color:#ffeecc;
}
#nav li a:hover
{
color:#eeeeee;
}
/* style for default selected value */ #nav a.selected {
color:#6699FF;
}
/* submenu */ #nav ul
{
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li
{
width:7em;
float:left;
overflow:hidden;
border-top:1px solid #eeeeee;
}
/* display block will make the link fill the whole area of LI */
#nav ul a
{
display:block;
height:32px;
padding: 7px 4px;
color:white;
}
#nav ul a:hover
{
text-decoration:none;
padding-left:none;
}
If you are trying to animate between two images, like a hover effect on your navigation, then I suggest using jQuery Blend plugin. It works in IE and is very well developed, I haven't found any bugs in it.
Related
I'm sure this is a common problem with pure css navbar. I have a navbar created with ul and li's but I can't get the menus to stay up when I hover. I know that the problem is that the menu is opening ONLY when I'm hovering over the link but I'm not sure how to get it work. I tried jQuery mouseover but it wasn't working for me:
#font-face{
font-family: Bebas;
src:url(BEBAS.TTF);
}
body{
margin:0 auto;
height:500px;
font-family: Bebas;
}
.header{
top:0;
position:absolute;
left:0;
right:0;
background:#ff6200;
height:50px;
width:100%;
color:white;
font-family: Bebas;
}
.header .call{
line-height:50px;
}
.call{
width:60%;
margin:0 auto;
}
.login{
float:right;
}
.callme, .loginme{
color:#AF2626;
}
.signup{
margin-left:10px;
}
.number{
margin-left:10px;
}
.navbar{
margin-top:50px;
right:0;
left:0;
position:relative;
height:130px;
width:100%;
background:#F7F7F7;
border-radius:0px;
padding:0px;
}
.inside-navbar{
line-height:130px;
width:60%;
margin:0 auto;
font-size:40px;
}
.logo{
color:#FF6200;
}
#navsman{
font-size:16px;
float:right;
display:inline-block;
min-width:300px;
position:absolute;
padding-right: 20%;
}
#navsman li{
display:inline;
position:relative;
padding-left:15px;
line-height:1.4;
}
#navsman li ul{
position:absolute;
display:none;
}
#navsman li:hover > ul.firstmenu{
display:block !important;
margin-top: -50px;
}
#navsman li ul li{
position:relative;
padding-left:15px;
}
#navsman ul.secondmenu{
margin-left: 40px;
padding-top:15px;
padding-top: 30px;
z-index: 2;
width: 120px;
display:none;
}
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
#navsman ul.firstmenu li:hover ul.secondmenu{
display:block !important;
margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<div class="headwrapper">
<div class="header">
<div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span>
<span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span>
</div>
</div>
<div class="navbar">
<div class="inside-navbar">
<span>YOUR<span class="logo">LOGO</span></span>
<ul id="navsman">
<li>Title1</li>
<li class="title2">Title2
<ul class="firstmenu">
<li>SUBMENU1</li>
<li>SUBMENU2</li>
<li>SUBMENU3
<ul class="secondmenu">
<li class="secondli-first">Sub link 1</li>
<li class="secondli-second">Sub link 1</li>
</ul>
</li>
</ul>
<li>Title3</li>
<li>Title4</li>
<li>Title5</li>
<li>Title6</li>
<li>Title7</li>
</div>
</ul>
</div>
</div><!--Navbar end-->
</div>
Replace:
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
With:
#navsman > li:hover > ul li {
left: auto;
padding-top: 5px ;
min-width: 100%;
height: 10px;
margin-top:-15px;
padding-left: 10px;
}
Close the gap mentioned by #James Montagne
navsman li ul{
position:absolute;
display:none;
top:70px; <-- new line of code
}
I am trying to add a dropdown navigation on my navigation links so far it has been great but the only issue now which I can't work out the contact is not staying next to the Community instead it's going down one line how can i force it to stay inline with everything else?
and the drop is floating to the left for some reason so how can I bring that under the dropdown (I plan to add multiple drop downs)
<style>
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
float:right;
z-index:1;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
</style>
<style type="text/css">
ul {
list-style: none;padding: 0px;margin: 0px;
}
ul li {
display: block;position: relative;float: left;border:1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;
}
ul li a:hover {
background: #f00;
}
li:hover ul {
display: block; position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Static Navigation</title>
</head>
<body>
<div id="navigation">
Home
About
Social
Community
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</div>
</body>
I added everything on one page so you can easily look at it and help with the problem
Thanks ;)
Add display: inline-block to your <li>.
JSfiddle Example
Well, if you are sure about width of navigation then dont go with "width:100%; " try to give width exactly where it supposed to be fit. Ex. Width: 900px;
You should put the all navigation links inside li tags,
<body>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Social
</li>
<li>Community
</li>
<li>Contact
<ul>
<li>General Inquiries
</li>
<li>Ask me a Question
</li>
</ul>
</li>
</ul>
</div>
</body>
JSFiddle Example
My header is set to a width of 100%, yet on the left side of the page there is a big gap although this isn't present on the right side of the page. Any thoughts?
Here is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GS4 Concept Home Page</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="Script/jquery.js"></script>
<script src="Script/main.js"></script>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="navigation">
<li>Home</li>
<li>Galaxy S4
<ul>
<li>Verizon</li>
<li>ATT</li>
<li>Sprint</li>
<li>T-Mobile</li>
<li>International</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
#header{
position:fixed;
text-align:center;
background-color:#474747;
margin:auto;
width:100%;
height:50px;
display:block;
min-width:1000px;
}
#container{
background-color:#FFF;
margin:auto;
width:70%;
}
.nav{
text-align:center;
background-color:#999;
}
.navigation {
position:fixed;
display:block;
margin-top:15px;
padding:0;
list-style:none;
}
.navigation li {
float:left;
width:150px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #666;
border-bottom:1px solid #666;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#666;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:1px solid #666;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px solid #666;
}
.navigation ul a:hover {
color:#666;
}
JavaScript (If it matters..?):
// Executes the function when DOM will be loaded fully
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
$('.navigation li').hover(
// When mouse enters the .navigation element
function () {
//Fade in the navigation submenu
$('ul', this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$('ul', this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
You need to remove the default margin on the body by adding margin:0:
body {
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
margin:0;
}
jsFiddle example
Try setting *{margin: 0; padding: 0;} to remove any padding/margin the browser automatically puts on elements.
you are using a padding and margin on body element the sum is 30 px
delete the padding and margin or make it 0
to fill the width
How can I create a dropdown menu similar to xenforo, which will automatically close after 2 seconds?
I've tried searching but unfortunately couldn't find any proper solution.
But I don't know how to and what code to put to achieve like; 1. The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds. 2. The drop down closes if the mouse cursor is away from the drop down for 2 seconds.
Thanks!
Here is Jsfiddle;
Try this:
$(document).ready(function(){
$("#sub-menu li").hide(); // Hide in order to fadeIn to work
$("#main-menu ul").hover(
function(){
$("#sub-menu li").fadeIn(slow);
},
function(){
$("#sub-menu li").fadeOut(slow);
});
});
You can use jquery to use this functionality. Instead of waiting for 2 seconds you can use fade out slow so that users can know something will happen.
$(document).ready(function(){
$("#sub-menu").hide(); // Hide in order to fadeIn to work
$("#main-menu").hover(
function(){
$("#sub-menu").fadeIn(slow);
},
function(){
$("#sub-menu").fadeOut(slow);
});
});
<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}
.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}
.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}
.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}
.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}
.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}
.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}
.dd_menu li:hover ul li {
height:18px;
border:none;
}
.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
<li>Main Menu <span class="smallesttext">▼</span>
<ul>
<div align="left">
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
</div>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dd_menu li a").hover(
function(){
$(".dd_menu li ul div li a").hide().fadeIn('slow');
},
function(){
});
$("ul div li").hover(
function(){
$(".dd_menu li ul div li a").show();
},
function(){
;
});
});
</script>
</body>
</html>
Try this. Similarly add what you want on mouse out. If it helped think about accepting the answer.
How to define that by default there should be shown the content of "submenu11" under ther "menu1"?
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="css3menu1" class="menu">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul>
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
<div id='submenu11'>
<p> Content </p>
</div>
<div id='submenu12'>
<p> Content </p>
</div>
<div id='submenu13'>
<p> Content </p>
</div>
<div id='submenu14'>
<p> Content </p>
</div>
<script>
$('ul.menu').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function() {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e) {
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
</script>
</body>
CSS stylesheet:
html,body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ffffff;
width: 100%;
margin: 0px auto;
}
p {
margin: 0 0 2em;
}
h1 {
margin: 0;
font:bold 12px Arial;
}
h2 {
margin:0;
color: #55aaff;
font:bold 12px Arial;
}
h3 {
margin:0;
font:normal 10px Arial;
}
h4 {
margin:0;
font:normal 12px Arial;
}
a {
color: #339;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div#header {
padding:1em;
background:#00557f 100% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font:normal 10px Arial;
text-align:right;
color:#b7ddf2;
margin:0;
}
div.scrollbar {
height: 300px;
overflow: auto;
border: solid 1px #000;
padding: 5px;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
padding:1em;
background:#ddd 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#footer p {
font-style:italic;
font-size:1.1em;
margin:0;
}
/* ----------- Menu ----------- */
ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
background-color:#FFFFFF;border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#d4d4d4;
padding:0 10px 10px;
}
ul#css3menu1 li:hover>*{
display:block;
}
ul#css3menu1 li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu1 li:hover{
z-index:1;
}
ul#css3menu1{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
*display:inline;
}
ul#css3menu1>li{
margin:0;
}
* html ul#css3menu1 li a{
display:inline-block;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;
}
ul#css3menu1 a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 12px Arial;
color:#000000;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:10px;
background-color:#ebf4fb;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#C0C0C0;
}
ul#css3menu1 ul li{
float:none;
margin:10px 0 0;
}
ul#css3menu1 ul a{
text-align:left;
padding:4px;
background-color:#FFFFFF;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:11px Arial;
color:#000;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
background-color:#b7ddf2;
border-color:#C0C0C0;
border-style:solid;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
background-position:0 100px;
}
ul#css3menu1 img{
border:none;
vertical-align:middle;
margin-right:10px;
}
ul#css3menu1 img.over{
display:none;
}
ul#css3menu1 li:hover > a img.def{
display:none;
}
ul#css3menu1 li:hover > a img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.def{
display:none;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#b7ddf2;
background-position:0 100px;
border-style:solid;
border-color:#C0C0C0;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#FFFFFF;
background-image:none;
color:#868686;
text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu1 li.toplast>a{
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
/* --------- End of Menu --------- */
EDIT1: I included the script and stylesheet.
EDIT2: Please look at the picture. It should clarify the issue.
The problem is in this line:
$active = $links.first().addClass('active');
It takes the first link in your menu and makes it active. Your first <a> tag in the ul with class menu is not the first menu item, but:
<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
So you need to make sure you target the first menu item. You can for example assign an id to it:
<li>SUBMENU11</li>
and then you have to rewrite that line of javascript to:
$active = $('#submenu-default').addClass('active');
That should do the trick. Obviously you can use any other way to locate that link.
EDIT: Maybe even better solution would be to rewrite your html as follows:
<ul id="css3menu1">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul class="menu">
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
This way you don't have to change the javascript, as the first link in the menu now indeed is the first item of the menu. I leave it for you to find out what works best for you.
I guess you want something like this: http://www.cssmenus.co.uk/dropdown.html
If you show an example or drawing we could help you even better.