Well hello there, I have this problem that has been bugging me for more than a year now without a solution. Thought it shouldnt be that bad, but I just cant seem to find a way. On my site I have this dropdown menu using a css file as below, note I am not the one who designed the css:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.ddmenu {width:100%; position:relative; z-index:100;}
.ddmenu ul li a, .ddmenu ul li a:visited {display:block; text-decoration:none; font-size:12px; color:#000;width:182px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#222; line-height:20px; overflow:hidden;}
.ddmenu ul {padding:0; margin:0; list-style: none;}
.ddmenu ul li {float:left; position:relative;}
.ddmenu ul li ul {display: none;}
/* specific to non IE browsers */
.ddmenu ul li:hover a {color:#fff; background:#acacac;}
.ddmenu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:182px;}
.ddmenu ul li:hover ul li a.hide {background:#222; color:#fff;}
.ddmenu ul li:hover ul li:hover a.hide {background:#222; color:#000;}
.ddmenu ul li:hover ul li ul {display: none;}
.ddmenu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.ddmenu ul li:hover ul li a:hover {background:#ededed; color:#000;}
.ddmenu ul li:hover ul li:hover ul {display:block; position:absolute; left:182px; top:0;}
.ddmenu ul li:hover ul li:hover ul.left {left:-182px;}
And then I have an ajax profile tab for user profile pages, and the tabs css will make the dropdown menu disappear completely, nowhere to be find. I tried to alter the loading sequence of dropdown menu and profile tabs css, and it aint making any differences. I dont understand at all… Heres the ajax tab css, again I was not the designer of this css:
*
body { }
html { overflow-y: scroll; }
a { text-decoration: none; }
a:focus { outline: 0; }
p { margin: 0 0 20px 0; }
#page-wrap { width: 640px; margin: 30px;}
h1 { font: bold 40px Sans-Serif; margin: 0 0 20px 0; }
/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }
/* Specific to example one */
#profile { background: #eee; padding: 10px; margin: 0 0 20px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }
#profile .nav { overflow: hidden; margin: 0 0 10px 0; }
#profile .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#profile .nav li.last { margin-right: 0; }
#profile .nav li a { display: block; padding: 5px; background: #959290; color: white; text-align: center; border: 0; }
#profile .nav li a:hover { background-color: #111; }
#profile ul { list-style: none; }
#profile ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#profile ul li a:hover { background: #fe4902; color: white; }
#profile ul li:last-child a { border: none; }
#profile ul li.nav0 a.current, #profile ul.visitormessage li a:hover { background-color: #0575f4; color: white; }
#profile ul li.nav1 a.current, #profile ul.aboutme li a:hover { background-color: #d30000; color: white; }
#profile ul li.nav2 a.current, #profile ul.adopts li a:hover { background-color: #8d01b0; color: white; }
#profile ul li.nav3 a.current, #profile ul.friends li a:hover { background-color: #FE4902; color: white; }
#profile ul li.nav4 a.current, #profile ul.contactinfo li a:hover { background-color: #Eac117; color: white; }
I am completely stuck, and totally out of idea on how I can possibly fix it. I’d appreciate it very much if anyone of you can point out where the problem is and what I should do to fix it. If the worst came to worst, I may have to get rid of the tab css, although it will be a painful loss…