Hi guys hope you are well and can help me with a problem im having with my drop down menu.
I have a horizontal drop down menu that is built using 1 js file, 1 css file, and all the images.
When inserting the menu into a page, for example, index.php, the menu appears fine, that is, the top level horizontal menu appears, but when I hover over each item, nothing is dropped down. It wont drop down any sub-items.
So, because I have another css file that is loaded for the index.php page, I disabled this file to see what would happen. When i did this, the horizontal menu appeared. So, I know there is a problem with the css file that gets loaded, then the second one, for the menu gets loaded, and somehow, the two dont like each other.
The problem is, is that the first css file is setup exactly the way i want it.
And the second one, for the menu, is setup exactly fine as well.
The problem is when I try and load BOTH of them together.
So, im calling on you gurus to help me discover why the two css files cannot coexist.
The css file for the total site is called 'sitewide.css'
The css file for the menu is called 'menu_sitewide.css'.
Here is an example of the structure of my web page ................... eg.index.php
In the <head> section, sitewide.css gets loaded.
In the <body> section, I include sitewide.php, which loads header.php, which includes the css file (menu_sitewide.css) for the menu file.
--------------------------
----------
----------
----------
----------
----------
--------- INDEX.PHP
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en">
<head><!-- Put IE into quirks mode -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="includes/global/css/
sitewide.c
ss" />
<!-- this is for the blumentals menu -->
<link rel="shortcut icon" type="image/png" href="includes/global/favi
cons/music
_2quavers.
ico">
<script src="includes/global/javas
cript/func
tions.js">
</script>
<!-- this is for the blumentals menu -->
<title>Simon | Test | Cross Browser Fixed Header/Footer Layout</title>
</head>
<body>
<?php
include("includes/global/p
hp/sitewid
e.php");
?>
etc etc
........
--------------------------
----------
----------
----------
----------
---- SITEWIDE.CSS (for the entire site)
/* the bit that does the work */
/* --------------------------
----------
----------
----------
--- html global */
html {
overflow: auto;
}
/* ##########################
##########
** ########## HEADER SECTION ##########
** ##########################
##########
*/
/* --------------------------
----------
----------
----------
--- headercontainer div */
#headercontainer {
position:absolute;
top:0;
left:0;
width:100%;
height:84px;
overflow:hidden;
background:black;
border-bottom:2px solid silver;
}
* html #headercontainer {height:84px;background:br
own;margin
-bottom:0p
x; }
/*
#headercontainer ul {
clear:both;
text-align:center;
border-top:1px solid yellow;
}
#headercontainer ul {
margin:0;
padding:0;
list-style-type:none;
background:transparent;
height:3em;
line-height:1.8em;
}
#headercontainer ul li {
display:inline;
color:#73a2bd;
}
*/
/* ##########################
##########
######
** ########## HEADER TOP CONTAINER ##########
** ##########################
##########
###### */
/* --------------------------
----------
----------
----------
--- headertopcontainer div */
#headertopcontainer {
position:relative;
overflow:hidden;
height:55px;
top:1px;
left:0px;
width:100%;
background: black;
margin:1px 1px 1px 1px;
padding:0;
border-bottom:1px solid red;
}
/* --------------------------
----------
----------
----------
--- headerlogo div */
#headerlogo img {
position:absolute;
left:0px;
width:150px;
height:97%;
float:left;
}
/* --------------------------
----------
----------
----------
--- headerpanorama div */
#headerpanorama {
position:relative;
left:153px;
width:87.8%;
height:94%;
background:black;
float:left;
}
/* ##########################
##########
#########
** ########## HEADER BOTTOM CONTAINER ##########
** ##########################
##########
######### */
/* --------------------------
----------
----------
----------
--- headerbottomcontainer div */
#headerbottomcontainer {
height:28px;
overflow:hidden;
left:0;
width:100%;
background: black;
margin-bottom:0px;
}
/* --------------------------
----------
----------
----------
--- headerdatetime div */
#headershowdatetime {
left: 2px;
width:13%;
float:left;
padding-top:3px;
}
#datetimefield {
width:95%;
border-style:none; /* others: solid, dashed, inline, double, ridge, outset, none, groove */
background:black;
color:white;
text-align:left; /* left, center, right */
text-decoration:none; /* underline */
padding-top:1px;
padding-left:5px;
}
/* --------------------------
----------
----------
----------
--- headernavbar div */
#headernavbar {
position:absolute;
left:13%;
width:87%;
padding-top:1px;
background:black;
/* z-index:-1; /* so that the datetime field sits in front of the nav bar. */
}
#headernavbar ul {
text-align:center;
margin:0;
list-style-type:none;
background:transparent;
padding-top:1px;
}
*html #headernavbar ul {
padding-top:4px;
text-align:center;
}
#headernavbar ul li {
display:inline;
color:#73a2bd;
}
/* ##########################
########
** ########## BODY SECTION ##########
** ##########################
######## */
/* --------------------------
----------
----------
----------
--- body section tag */
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#fff;
font-family:arial, verdana, sans-serif;
font-size:76%;
overflow: hidden;
}
/* for internet explorer... this affects IE6 and below only. */
/* adjusting the padding for the body will move the content are up to fit against the headercontainer */
* html body {
padding:85px 0 50px 0; /* the top parameter here will raise the body vertical scroller up higher for IE 6 and below. */
}
/* --------------------------
----------
----------
----------
--- bodycontainer div */
#bodycontainer {
font-family:"times new roman", serif;
color:blue;
font-size: 1.2em;
position:fixed;
top:87px;
left:0;
bottom:50px;
right:0;
overflow:hidden;
background:#fff;
padding:0px 10px 10px 10px;
text-align:center;
z-index:-1;
}
* html #bodycontainer {
height:100%;
width:100%;
padding:0px 10px 10px 10px;
margin-top:-3px;
}
#container img {margin:5px;}
/* ##########################
##########
####
** ########## OTHER DIVs SECTION ##########
** ##########################
##########
#### */
#absolute {
position:absolute;
top:400px;
right:100px;
width:200px;
background:#ddd;
padding:10px;
border:1px solid #000;
}
#left {
float:left;
background:#eee;
padding:10px;
border:1px solid #000;
color:#000;
width:50%;
}
#right {
float:right;
background:#ddd;
padding:10px;
border:1px solid #000;
color:#000;
}
/* --------------------------
----------
----------
----------
--- a href section */
a, a:visited {
font-size:1.1em;
text-decoration:none;
color:#ddd;
}
a:hover {
color:#fff;
font-weight:bold;
text-decoration:underline;
}
a:active {
color:green !important;
text-decoration:none;
}
.grey {color:#888;}
.ltgrey {color:#ddd;}
img#mascot {float:right;}
/* ##########################
##########
#
** ########## CLASSES SECTION ##########
** ##########################
##########
# */
/* --------------------------
----------
----------
----------
--- current_link class span */
.current_link a {
color:red !important;
font-size:1.5em;
font-weight:bold;
text-decoration:none;
}
.current_link a:hover {
color:red !important;
font-weight:bold;
text-decoration:underline;
}
.current_link a:active {
color:green !important;
text-decoration:none;
}
/* --------------------------
----------
----------
----------
--- strike */
.strike {text-decoration:line-thro
ugh;}
.lft {float:left;}
.rgt{float:right;}
/* --------------------------
----------
----------
----------
--- columns */
.columnone, .columntwo {width:31%; float:left; text-align:justify; margin-right:2%;}
.columnthree {text-align:justify; border:1px solid #fff;}
* html .columnthree {border:0;}
hr {clear:both; border:0; height:1px; color:#888; background-color:#888;}
.columnthree a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:underline;
}
.columnthree a:hover {color:#888; text-decoration:none;}
/* ##########################
##########
** ########## FOOTER SECTION ##########
** ##########################
##########
*/
/* --------------------------
----------
----------
----------
--- footer div */
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:45px;
overflow:auto;
text-align:right;
background:#73a2bd;
border-top:5px solid #53829d;
}
* html #footer {height:50px;}
/* end of bit that does the work */
h1 {font-size:4em; margin:0; padding:0;}
#footer p {
color:#fff;
margin:5px 10px 0 10px;
}
/* --------------------------
----------
----------
----------
--- END OF FILE */
--------------------------
----------
----------
----------
----------
----------
----------
----------
- MENU_SITEWIDE.CSS
.ebul_cbmenu_sitewide, .ebul_cbmenu_sitewide ul {
background-color: #CC5664;
border: 1px solid #A3303F;
display: block;
font-size: 1px;
margin: 0px;
overflow: auto;
padding: 0px;
position: absolute;
visibility: hidden;
}
.ebul_cbmenu_sitewide_shad
ow {
background-color: #777777;
display: block;
margin: 0px;
overflow: hidden;
position: absolute;
visibility: hidden;
}
.ebul_cbmenu_sitewide table {
border-collapse: separate;
}
.ebul_cbmenu_sitewide tr {
background-color: #CC5664;
cursor: pointer;
font-size: 1px;
}
.ebul_cbmenu_sitewide td {
border: 1px solid #A3303F;
padding: 4px;
text-align: left;
}
.ebul_cbmenu_sitewide td a {
color: #FCEAEC;
font-family: "Tahoma", serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
.ebul_cbmenu_sitewide tr.hot, .ebul_cbmenu_sitewide tr.expanded {
background-color: #F9887B;
}
.ebul_cbmenu_sitewide tr.hot td, .ebul_cbmenu_sitewide tr.expanded td {
border-color: #A3303F;
}
.ebul_cbmenu_sitewide tr.hot a, .ebul_cbmenu_sitewide tr.expanded a {
color: #FFFFFF;
font-family: "Tahoma", serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-decoration: underline;
}
ul.ebul_cbmenu_sitewide {
position: absolute;
visibility: hidden;
}
--------------------------
----------
----------
----------
----------
----------
----------
----------
----- Display...
INDEX.PHP
--------------------------
----------
----------
----------
----------
----------
----------
-
--------------------------
----------
----------
----------
----------
----------
----------
-
<-------------------------
----------
-Horizonta
l Menu----------------------
-------->
When I click on any of the above menuitems in the menu, the drop downs dont show.
But if I disable SITEWIDE.css, the menus do show.
Problem is, is that the formatting in sitewide.css is exactly what i want, so i need both to coexist.
Something in sitewide.css is STOPPING the dropdown menuitems from being displayed, and i would love your guys kind help on this.
Thank you.
Start Free Trial
