cataclysmsedgeHey folks!
Wonder if anyone can help shine some light on this:
My site over at http://www.cataclysmsedge.com is having some trouble with a drop down menu. However it only really experiences the problem in Internet Explorer. Firefox, Safari and Chrome all work great.
The problem is the drop down menu doesn't keep itself hidden when you first load the page. Hovering over the menu link at the top of the hierarchy tree makes the navigation menu work well. It's when the cursor isn't on the navigational menu that the problem occurs.
I'm guessing the problem is down to CSS but I really can't pin point the problem (it really is not my strong point).
The link in question is the "Expansion" menu link.
Here's the CSS
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
strong {
font-weight: bold;
}
body {
background: #000 url(../img/background.jpg) top center no-repeat;
font-family: "Lucida Grande", Calibri, Helvetica, Arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
text-align: center;
color:#ddd;
text-shadow: 1px 1px 1px #000;
}
p {
}
a {
color:#ddd;
text-decoration:underline;
}
a:hover {
color:#fff;
text-decoration:none;
}
#page {
margin: 0 auto;
text-align: left;
width: 960px;
}
h1, h2, h3, h4, #header strong {
padding: 0;
margin:0px;
font-size:24px;
line-height:30px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
p, li, td {
line-height: 150%;
}
ul, ol, dl, p {
margin: 0 0 10px 0;
padding: 0;
}
li {
margin: 0 0 5px 30px;
}
input, textarea, select {
font-family: "Lucida Grande", Calibri, Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 4px;
}
textarea {
width:558px;
background: url(../img/title.png);
border:1px solid #666;
margin: 10px 0 10px 0;
color:#ddd;
}
a, a:visited {
}
.clear {
clear: both;
display: block;
float: none;
}
hr {
border: 0;
border-top: 1px solid #ccc;
height: 0;
margin: 20px 40px;
}
hr.divider {
clear: both;
float: none;
padding: 0 20px;
visibility: hidden;
}
.loading {
background: url(../img/spinner.gif) 10px 17px no-repeat;
clear: both;
height: 50px;
}
.loading span {
display: block;
padding: 17px 32px 0;
}
.under {
margin-top: 20px;
}
.close {
margin-bottom: 40px;
}
.close a, .close a:visited {
font-size: 11px;
}
#content {
float: left;
width:570px;
margin-left:30px;
}
#sidebar {
float: right;
width: 300px;
margin-right:30px;
}
#top a {
display: none;
}
#header, #footer {
}
#blog-title a, #blog-title a:visited {
float:left;
font-size: 50px;
line-height:60px;
font-weight:bold;
text-decoration: none;
}
#blog-description {
font-size:12px;
line-height:12px;
margin:0;
float:left;
clear:both;
}
#content .entry-content h1, #content .entry-content h2, #content .entry-content h3, #content .entry-content h4 {
margin: 20px 0 10px;
padding: 0;
}
#content .notification {
background: #ddd;
font-size: 11px;
padding: 7px;
}
#content div.hentry.post {
margin-bottom: 40px;
}
#content .entry-title, #content .entry-title a, #content .entry-title a:visited {
text-decoration: none;
}
#content .entry-title a:hover {
text-decoration: underline;
}
#content div.entry-content {
margin-bottom: 10px;
}
#content .entry-content blockquote {
border-left: 1px solid #ddd;
margin: 0 0 10px 20px;
padding: 7px 10px;
}
#content div.entry-content ol, #content div.entry-content ul {
margin: 0 0 10px 30px;
padding: 0;
}
#content div.entry-content ul {
list-style: disc;
}
#content div.entry-content li, #content ol.archive div.entry-content li {
margin: 0 0 5px 0;
padding: 0;
}
#content .comments-link {
float:right;
line-height:30px !important;
margin:0;
}
#content p.comments-link a, #content p.comments-link a:visited {
}
#content .by-line, #content .filed {
font-size: 11px;
margin-bottom: 8px;
margin-top: -5px;
}
#content .page .by-line {
margin-top: 30px;
}
#content .by-line a, #content .by-line a:visited,
#content .filed a, #content .filed a:visited {
}
#content .by-line {
float:left;
text-align:right:
line-height:20px;
width:100%;
}
#content .by-line address {
display: inline;
font-style: normal;
}
#content .entry-editlink, #content .comment-editlink {
visibility: hidden;
float: right;
}
#content .hentry:hover .entry-editlink, #content .hentry:hover .comment-editlink {
visibility: visible;
float: right;
}
#content .comment-feed {
padding-top: 5px;
float: right;
text-align:right;
width:100%;
}
#content a.comment-feed, #content a.comment-feed:visited {
font-size: 12px;
}
#content h2.comments {
margin-bottom: 10px;
}
#content h3.pings {
margin-top: 40px;
}
#content form.comment-form {
margin-bottom: 20px;
}
#content form.comment-form label em {
font-size: 11px;
font-style: normal;
}
#content .some-html-is-ok {
font-size: 11px;
font-style: normal;
}
#content .comment-form-trackback, #content .comment-form-trackback a, #content .comment-form-trackback a:visited {
font-size: 11px;
}
#content ol.comments {
margin: 0 0 20px 0;
padding: 0;
}
#content ol.comments li {
list-style: none;
margin: 0;
padding: 0;
}
#content ol.comments .depth-2 {
margin-left: 20px;
}
#content ol.comments .depth-3 {
margin-left: 40px;
}
#content ol.comments .depth-4 {
margin-left: 60px;
}
#content ol.comments .depth-5 {
margin-left: 80px;
}
#content ol.comments .entry-content {
}
#content ol.comments .meta {
font-size: 11px;
height: 25px;
line-height: 25px;
margin-bottom: 20px;
position: relative;
}
#content ol.pings .meta {
height: 20px;
line-height: 20px;
padding-left: 0;
}
#content ol.comments .avatar {
float:left;
margin-right:20px;
}
#content ol.comments .meta a, #content ol.comments .meta a:visited {
}
#content ol.comments .meta .author {
font-size: 13px;
font-weight: bold;
}
#content ol.comments .meta .author a, #content ol.comments .meta .author a:visited {
}
#content ol.comments .meta .comment-reply-link, #content ol.comments .meta .comment-reply-link:visited {
}
#content .pagination {
margin: 40px 0;
}
#content .pagination a, #content .pagination a:visited {
}
#content .pagination .next {
float: right;
}
#content ol.archive {
list-style: none;
margin: 0;
padding: 0;
}
#content ol.archive li {
margin: 0 0 20px;
padding: 0;
}
#content ol.archive .meta, #content ol.archive .meta a, #content ol.archive .meta a:visited {
font-size: 11px;
}
#content ol.archive li.search h3, #content ol.archive li.search p {
line-height: 130%;
margin-bottom: 5px;
}
#content ol.archive li.search .meta {
line-height: 100%;
}
#content ol.archive .entry-title {
}
#content ol.archive .hentry {
margin-bottom: 0;
}
#sidebar {
}
#sidebar h2 {
font-size: 18px;
margin-top:10px;
margin-bottom:10px;
}
#sidebar .widget ul {
margin: 0;
padding: 0;
border-top:1px dotted #333;
}
#sidebar .widget ul li {
list-style:none;
font-size: 12px;
line-height:29px;
border-bottom:1px dotted #333;
padding: 0;
margin:0;
}
#sidebar .widget ul li ul {
margin-bottom:-1px;
}
#sidebar .widget a, #sidebar .widget a:visited {
text-decoration:none;
line-height:29px;
width:100%;
padding-left:20px;
}
#sidebar .meta {
font-size: 12px;
}
#carrington-about {
font-size: 11px;
line-height: 140%;
}
#carrington-about h2 {
margin-top: 0;
}
#footer, #footer a, #footer a:visited {
font-size: 12px;
}
#footer p {
margin: 0;
line-height:40px;
padding: 0;
}
#generator-link {
line-height: 30px;
}
a#TB_prev:hover {
background:url(../img/lightbox-left.png) no-repeat left center;
}
a#TB_next:hover {
background:url(../img/lightbox-right.png) no-repeat right center;
}
#attachment p.top {
padding: 5px 10px;
text-align: left;
}
#attachment p.top a, #attachment p.top a:visited {
}
#attachment h1 {
margin: 10px 0;
}
#attachment a img {
border: 0;
}
#attachment .nav, #attachment #footer {
margin: 0 auto;
padding: 20px 0;
text-align: left;
width: 900px;
}
#attachment .nav .next {
float: right;
}
.alignleft {
float:left;
margin-right:1em;
margin-bottom:1em;
}
.alignright {
float:right;
margin-left:1em;
margin-bottom:1em;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
text-align: center;
padding: 11px 6px 6px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption.alignleft {
margin-left: 0;
}
.wp-caption.alignright {
margin-right: 0;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 4px 0 0;
margin: 0;
}
#footer {
text-align:center;
}
#header {
}
.title, .widget-title {
padding-left:20px;
line-height:30px;
font-size:20px;
background: url(../img/title.png);
font-weight:normal;
height:30px;
padding-right:20px;
clear:both;
text-shadow: 1px 1px 1px black;
}
.title h1 {
font-size:20px;
}
.date {
font-size:12px;
float:right;
text-align:right;
}
.entry-title {
float:left;
}
.entry-content {
clear:both;
}
.author {
line-height:30px;
font-size:12px;
}
#container {
float:left;
width:100%;
margin-top:10px;
padding-top:20px;
border:1px solid #111;
}
#header-left {
float:left;
}
.comments-title {
line-height:30px;
border-bottom:1px dotted #333;
margin-bottom:10px;
float:left;
width:100%;
}
input[type="submit"] {
background: url(../img/title.png);
border:1px solid #333;
color:#ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
input[type="text"] {
background: url(../img/title.png);
border:1px solid #333;
color:#ddd;
}
.tight {
float:left;
clear:both;
}
.comment-top {
margin-bottom:5px;
padding-bottom:5px;
border-bottom:1px dotted #333;
}
.comment-author a,.comment-author {
font-weight:bold;
font-size:20px;
font-variant: small-caps;
text-decoration: none;
}
#header-right {
float:right;
}
#navigation ul li a {
font-size:14px;
background: url(../img/title_darkest.png);
height:29px;
width:100%;
line-height:29px;
border-bottom:1px dotted #333;
}
#navigation ul li a:hover {
background: url(../img/title_darker.png);
}
#navigation ul {
border-left:1px dotted #333;
border-right:1px dotted #333;
border-top:1px dotted #333;
width:100%;
}
#navigation li ul li ul {
margin-left:-1px;
margin-top:-1px;
}
#navigation li ul li ul a {
padding-left:20px;
width:130px;
}
#navigation li ul li a {
text-align:left;
width:140px;
padding-left:10px;
}
#navigation {
list-style-type: none;
padding: 0;
margin: 0;
float:right;
}
#navigation li { float: left; position: relative; padding: 0;
list-style-type:none;
float:left;
margin:0;
margin-left:30px;
line-height:80px;
text-align:right;
-webkit-transition: all 0.3s;
}
#navigation li a {
display: block;
padding: 0;
color: #fff;
text-decoration: none;
font-weight:bold;
font-size:14px;
font-variant: small-caps;
text-decoration: none;
-webkit-transition: all 0.3s;
}
#navigation li a:hover { }
#navigation li ul {
opacity: 0;
position: absolute;
left: 0; width: 150px;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-transition: all 0.3s;
}
#navigation li:hover ul { opacity: 1; }
#navigation li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
width:150px !important;
margin-left:0 !important;
text-align:center !important;
background: none;
-webkit-transition: all 0.3s;
}
#navigation li:hover ul li { height: 30px; line-height: 30px; }
#primary-sidebar {
margin-top:-10px;
margin-bottom:20px;
}
#wp-calendar thead th, #wp-calendar tbody td {
width:45px;
text-align:center;
line-height:20px;
}
#wp-calendar thead th {
font-weight:bold;
}
#wp-calendar caption {
width:100%;
text-align:center;
line-height:30px;
}
.recentcomments {
padding-left:20px !important;
}
.tags {
float:left;
clear:both;
width:100%;
}
#TB_window,#TB_window a {
color:#000;
text-shadow:none;
}
.pagination {
float:left;
clear:both;
width:100%;
}
.gallery img {
border:none !important;
padding:2px;
background: url(../img/title.png);
}
.gallery img:hover {
background:#444;
}Any help with this would be greatly appreciated!
