First of all thanks in advance for all your help. I found this Forum really useful.
I am not and expert but tried to grasp little bit of Css code and also seeing examples of other websites.
So, I wrote or lets say I used some codes which work perfect in standalone with IE and Firefox for an horizontal navigation bar. I use the term stand alone because if launch the bar itself into an html file + css stylesheet (only of the bar , plus some little info or the page, like background colour for example) it works. The issue I am having when I embed this bar into my website with and existant css. Meaning I add the css code to one the already exist. While it works with firefox, it doesn't work with Internet explorer. It shows only the parent <li> head while it doesn't show the <li> childs
Here the code i used in css for the navigation bar:

Code:


.navbar, .navbar * {
   margin: 0;
   padding: 0;
   list-style: none;
   z-index: 1000000;
}

.navbar ul {
   position: absolute;
   top: -999em;
   width: 12em;
}

.navbar ul li {
   width: 100%;
   border-bottom: 1px solid #003053;
   border-right: 1px solid #003053;
}

.navbar li:hover {
   visibility: inherit;
   background-color: ;
   background-position: 0 29px;
}

.navbar > li {
   background-image: url('/images/bg_image.jpg');
   border-right: 1px solid #003053;
}

.navbar li {
   float: left;
   position: relative;
   background-color: #003053;
}

.navbar > li > a {
   line-height: 29px;
}

.navbar a {
   display: block;
   position: relative;
   color: #ffffff;
   font-size: 1.1em;
   line-height: 22px;
   padding: 0 10px;
   font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   text-decoration: none;
}

.navbar li:hover ul, .navbar li.sfHover ul {
   left: 0;
   top: 29px;
}

.navbar li:hover li ul, .navbar li.sfHover li ul {
   top: -999em;
}

.navbar li li:hover, li li.sfHover {
   border-right: 1px solid #003053;
}

.navbar li li:hover ul, .navbar li.sfHover ul {
   left: 12em;
   top: 0;
   margin-left: 1px;
}

.navbar li li:hover li ul, .navbar li li.sfHover li ul {
   top: -999em;
}

.navbar li li li:hover ul, .navbar li li li.sfHover ul {
   left: 12em;
   top: 0;
}

.navbar > li > a.haschild {
   background-image: url('/images/haschild.gif');
   background-repeat: no-repeat;
   background-position: center bottom;
}

.navbar ul a.haschild {
   background-image: url('/images/hassubchild.gif');
   background-repeat: no-repeat;
   background-position: center right;
}
#navigation {
   height: 29px;
   border-top: 1px solid #184559;
   background-image: url('/images/bg_image.jpg');


In the html page I place this code for example:

Code:


<div id="navigation">
<ul class="navbar">
<li><a href="/" class="haschild">First menu parent</a>
<ul>
<li><a href="http://" target="_blank">First child</a></li>
<li><a href="//">Second Child</a></li>
<li><a href="//" target="_blank">Third child</a></li>
</ul>
</li>
<li><a href="/" class="haschild">Second menu parent</a>
<ul>
<li><a href="/">First child</a>
</li>
</ul>
</li>
</ul>
</div>


So as I wrote before I copied the css code and paste into a txt file with name stile.css than another file with index.html also typing the request to the css file. For both browers is fine.

So I added the code to my style.css that already existed into my webpage and here is the issue.
basically with Firefox it works perfect, but using IE 9 it doesn't work.

What I am maybe thinking is an issue with style.css file that already exist while I add more lines. I would like to add the nav bar after the header logo.

Here what I can read from the css code that already exists:
in my website:

Code:



body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0; }
body{
font-family: Arial, Helvetica, Georgia, sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #333333;
color: #44768c; }
h1, h2, h3, h4, h5, h6{
font-family: Georgia, sans-serif;
font-size: 18px;
font-weight: normal; }
a{
text-decoration: none;
color: #FEFE68; }
a:hover{
text-decoration: none; }
a img{ border: none; }
abbr, acronym{ border: 0; }
address, dl, p{ padding: 15px 0 0; }
blockquote{
margin: 15px 0 0;
background: #144559; }
blockquote:hover{
background: #194b60; }
blockquote p{ padding: 15px; }
blockquote blockquote{
margin: 15px;
background: #144559; }
code{
background: #f9f9f9; }
dt{ font-weight: bold; }
dd{ padding: 0 0 0 15px; }
hr{ clear: both;
margin: 15px 15px 5px 15px;
border: 0;
height: 1px;
text-align: left;
background: #cccccc;
color: #000000; }
small{ font-size: 11px; }
pre{ width: 90%; }
input, textarea{
font-family: Arial, Helvetica, Georgia, sans-serif;
font-size: 12px;
padding: 2px; }
input#s, input#author, input#email, input#url, textarea#comment{
border: 1px solid #003053;
background-color: #fff;
padding: 3px; }
input#author, input#email, input#url{
margin: 0 5px 0 0; }
#container{
width: 988px;
margin: 0 auto;
padding: 0px 0 0;
text-align: left;
vertical-align: top; }
#page{
width: 988px;
float: left;
background: #000000 url(images/header.gif) no-repeat;
color: #fff; }
#header{
width: 988px;
float: left;
clear: both; }

#header h1{
padding: 170px 30px 25px;
font-size: 36px;
text-transform: uppercase;
color: #b6e1fe; }
#header a{
color: #FEFE68; }
#left_sidebar {
width: 175px;
margin-right: 5px;
float: left;
display: inline; }

.right_sidebar_col {
width: 160px;
margin: 0 10px;
float: left;
display: inline; }

.right_sidebar_single {

width: 320px;
margin: 0 7px;
font-family:"Trebuchet MS",Verdana;
font-size:12px;
font-weight:normal;
color: #5d81a5; }

.right_sidebar_single ul {
margin: 0;
padding: 0 0 0 5px;
list-style: none; }

.right_sidebar_single ul li {
margin: 0 0 0 0; }

.right_sidebar_single li {
background: url(images/bullet.gif) left no-repeat;
padding-left:18px;
padding-bottom: 3px;
display:block;
margin-left: 5px;
border-bottom: 1px dotted #1d4c61; }

.right_sidebar_single li:hover {

background: #184559 url(images/bullet1.gif) left no-repeat; }

.big {

background: #184559 url(images/bullet1.gif) left no-repeat; }

.right_sidebar_single li a{
color: #3b6578;
text-decoration:none;
font-family:"Trebuchet MS", Verdana;
font-size:12px; }

.right_sidebar_single h2 {
padding: 8px 10px;
font-family:"Trebuchet MS", Verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background: #0a293a;
color: #275266;
margin-bottom:0px;
margin-top: 0px; }

#left_sidebar a{

color: #B0B0B0;
text-decoration:none;
font-family:"Trebuchet MS", Verdana;
font-size:11px;
padding-left:5px;
display:block; }

#left_sidebar a:hover{

color: #3b6578; }

#left_sidebar ul, .right_sidebar_col ul{

margin: 0;
padding: 0;
list-style: none; }
input, textarea, select {
border: 1px solid #000;
background: #43758c;
color: #000000;
font: 8pt/1.2 Tahoma, Arial, sans-serif;
}

.button {
border: 1px solid #000;
background: #43758c;
color: #6ea9c3;
font: normal 8pt/1.2 Tahoma, Arial, sans-serif;
}

#left_sidebar li.widget_calendar h2, .right_sidebar_col li.widget_calendar h2{
background-image: none;
}

#left_sidebar ul li {

margin: 0 0 0px;
}

.right_sidebar_col ul li{
margin: 0 0 0px;
}

#left_sidebar ul li h2{
padding: 8px 10px;
font-family:"Trebuchet MS", Verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background: #113b4e;
color: #275266;
}

#left_sidebar ul ul, .right_sidebar_col ul ul{
padding: 0px;
background: url(images/bg_ul_ul1.gif) no-repeat;
display:block;
}

#left_sidebar ul ul li{

margin: 0;
line-height: 24px;
border-bottom:1px dotted #423f3f;
}

#left_sidebar ul ul li:hover{
margin: 0;
line-height: 24px;
border-bottom:1px dotted #423f3f;
background-color:#212121;
}

.right_sidebar_col li{

background: url(images/bullet1.png) left no-repeat;
padding-left:18px;
padding-bottom: 3px;
display:block;
margin-left: 5px;
border-bottom: 1px dotted #1d4c61;
line-height: 24px;
}

.right_sidebar_col li:hover{
background-color:#184559;
}

#left_sidebar ul ul ul, .right_sidebar_col ul ul ul{
padding: 0;
background-image: none;
}

#left_sidebar ul ul ul li {

padding: 0 0 0 10px;
}

.right_sidebar_container_bottom{

width: 320px;
margin: 10px 0 0;
float: left;
padding: 5px;
background: #113b4e url(images/bg_right_sidebar_container_bottom.gif) repeat-y top left;
}

.right_sidebar_col{
margin: 0 0 0 7px;
}

.right_sidebar_col a{
color: #3b6578;
text-decoration:none;
font-family:"Trebuchet MS", Verdana;
font-size:12px;
}

.right_sidebar_col ul li#search input#s{

border: 1px solid #c2ddef;
}

.right_sidebar_col ul li{

margin: 6px 0 0;
}

.right_sidebar_col h2{
padding: 8px 10px;
font-family:"Trebuchet MS", Verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background: #262626;
color: #275266;
margin-bottom:0px;
margin-top: 4px;
}

.wide_column_bottom, .wide_column_top{

width: 808px;
float: left;
padding: 0 0 30px;
background:#113b4e url(images/bg_wide_column_bottom.gif) no-repeat bottom left;
font-family:Verdana;
font-size:12px;
color: #aec6ce;
}

.wide_column_top{

padding: 0;
background: url(images/bg_wide_column_top.gif) no-repeat;
}

.narrow_column{

width: 440px;
margin: 0 10px;
float: left;
display: inline;
}

img.wp-smiley { vertical-align: -25%; }

.smilies {
border:0px dotted #1d4c61;
background-color:#144559;
margin-top: 6px;
padding: 2px;
}

.smilies img {

border:0px dotted #1d4c61;
}

.post, .post_alt{

margin: 10px 0 0;
padding-top: 23px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background: url(images/bg_post.gif) no-repeat;
}

.post_alt{

background: url(images/bg_post_alt.gif) no-repeat;
}

.post h2 a, .post_alt h2 a{

color: #FFFF66;
font-family:Verdana;
font-weight:normal;
font-size:18px;
text-decoration:none;
}

.post h2 a:visited, .post_alt h2 a:visited{
color: #FFFF65;
}

.post h2 a:hover, .post_alt h2 a:hover{
color: #86abbc;
}

.entry h3 {

font-family:verdana;
font-size:11px;
color:#275266;
font-weight:bold;
text-align:center;
text-transform:uppercase;
}

.postdate{

padding: 2px 0px;
font-size: 11px;
color: #cccccd;
}

.entry a{

text-decoration: none;
color: #CCFF33;
background-color:#204a5e;
padding: 1px;
}

.entry a:hover{
color:#66FF33;
}

.entry{
line-height: 18px;
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
padding: 15px 0 0;
}

.entry h1{
font-size: 24px;
line-height: 30px;
}

.entry h2{
line-height: 24px;
}

.entry h4{
font-size: 14px;
font-weight: bold;
}

.entry h5, .entry h6{
font-size: 12px;
}

.entry h3, .entry h4, .entry h5{
font-weight: bold;
}

.entry img{
border: 1px solid #1d4c61;
padding: 6px;
}

.entry img.wp-smiley{
border: 0;
padding: 0;
}

.entry img.alignleft{
float: left;
margin: 5px 10px 0 0;
}

.entry img.alignright{

float: right;
margin: 5px 0 0 10px;
}

.info {
width: 210px;
height: 90px;
padding: 30px 2px 0 2px;
margin: 0 2px 5px 0;
float: left;
}

.related {
border-top:1px dotted #1d4c61;
}

.related a{

display:block;
color:#ffffff;
padding-left:0px;
text-decoration:none;
border-bottom:1px dotted #1d4c61;
background-color:#113b4e;
font-family:arial;
font-size:11px;
font-weight:normal;
}

.related a:hover{
background-color:#144559;
color:#B0B0B0;     
}

.pcategory{
background: url(images/pcategory.gif) no-repeat top left;
padding-top:8px;
padding-bottom:13px;
}

.pcategory:hover {
background: url(images/pcategory1.gif) no-repeat top left;
}

.pcategory a {
padding-left:5px;
font-family:Verdana;

font-weight:normal;
font-size:10px;
color:#408ba6;
display:block;
text-transform:uppercase;
text-decoration:none;
}

.pcategory a:hover {
color:#39677d;
}

.pcomments {

background: url(images/pcomments.gif) no-repeat top left;
padding-top:8px;
padding-bottom:13px;
}

.pcomments:hover {
background: url(images/pcomments1.gif) no-repeat top left;
}

.pcomments a {
padding-left:5px;
font-family:Verdana;
font-weight:normal;
font-size:10px;
color:#FFFFFF;
display:block;
text-transform:uppercase;
text-decoration:none;
}

.pcomments a:hover {
color:#39677d;
}

.pdate {

background: url(images/pdate.gif) no-repeat top left;
padding-top:8px;
padding-bottom:13px;
font-family:Verdana;
font-weight:normal;
font-size:10px;
color:#408ba6;
text-transform:uppercase;
padding-left: 5px;
}

.pdate:hover {
background: url(images/pdate1.gif) no-repeat top left;
}

.pdate a {
padding-left:5px;
font-family:Verdana;
font-weight:normal;
font-size:10px;
color:#315d73;
text-decoration:none;
}

.pdate a:hover {
color:#39677d;
}

.details {

padding-top:5px;
padding-bottom:5px;
font-family:Verdana;
font-weight:normal;
font-size:10px;
border:1px dotted #1d4c61;
color:#408ba6;
text-transform:uppercase;
padding-left: 5px;
padding-right: 5px;
}

.details a{

padding-left:5px;
font-family:Verdana;
font-weight:normal;
font-size:10px;
display:block;
color:#315d73;
text-decoration:none;
}

.details a:visited{
color:#315d73;
}

.details a:hover{
color:#315d73;
}

.browse{
padding: 0 15px;
font-family: Geogria, Sans-Serif;
font-size: 14px;
line-height: 24px;
border:1px dotted #1d4c61;
}

.browse a{
font-weight: bold;
}

.comments-template{
padding: 15px 0 0;
}

.comments-template h3 {
font-family:verdana;
font-size:11px;
color:#275266;
font-weight:bold;
text-align:center;
text-transform:uppercase;
}

.comments-template ol{

margin: 0;
padding: 0;
list-style: none;
font-family:Arial;
font-size:11px;
color:#7da4c0;
}

.comments-template ol li{
margin: 15px 0 0;
padding: 10px;
border:1px dotted #1d4c61;
background-color:#144559;
}

.comments-template ol li a{
text-decoration:none;
color:#c6c133;
font-family:Arial;
font-size:10px;
background-color:#008080;
}

.comments-template ol li:hover{
background-color:#113b4e;
}

.comment-status  {
float:right;
width:14px;
height:14px;
display:inline;
margin:2px;
border:0px;
}

.comment-status img {
border:1px dotted #000000;
padding:1px;
}

.commentmetadata{
font-style: normal;
font-family:Arial;
font-size:10px;
border-bottom:1px dotted #1d4c61;
color:#bcdfea;
}

.commentmetadata a{
text-decoration:none;
color:#bcdfea;
font-family:Arial;
font-size:10px;
background-color:#008080;
}

.comments-template p.nocomments{
padding: 0;
}

table#wp-calendar{
width: 100%;
font-family: Arial, Helvetica, Georgia, sans-seriff;
text-transform: none;
line-height: 18px;
}


table#wp-calendar caption{
padding: 10px 15px;
}

table#wp-calendar th{
text-align: center;
vertical-align: top;
}


table#wp-calendar td{
text-align: right;
}

table#wp-calendar tfoot td{
text-align: center;
}

#footer{

width: 988px;
margin: 10px 0 10px 0;
float: left;
background: #000000;
color: #cccccc;
font-family:Arial;
font-size:11px;
padding-left:10px;
}

#footer p{
padding: 20px;
line-height: 18px;
}

#asl_form {

text-align: left;
border: 1px solid #555;
padding: 0 5px;
background-color: #f3f3f3;
color: #333;
}

#sidebar #asl_form p {
list-style: none;
margin: 10px 0 7px;
padding: 0;
}

#sidebar #asl_form ul {
list-style: none;
margin: 4px;
padding: 0;
}

#sidebar #asl_form li {
list-style: none;
margin: 0;
padding: 0;
}

#sidebar #asl_form li:before { /* for the default theme */
content: '';
}

.ads {
width: 350px;
height: 300px;
background: url(images/ads.jpg) no-repeat;
padding-top:10px;
padding-left:10px;
margin-top:5px;
margin-left:30px;}

.pagebar {
font: 11px Arial, Helvetica, sans-serif;
padding-top: 20px;
padding-bottom: 10px;
margin: 0px;
border-top:1px dotted #0c0c0c;
font-weight: normal;
font-size: 11px;
vertical-align: top;}

.pagebar a, .pageList {
padding: 4px 8px;
border: solid 1px #ddd;
background: #000000;
text-decoration: none;
color:#ffffff;
font-weight:normal;}

.pagebar a:visited {
padding: 4px 8px;
border: solid 1px #ddd;
background: #000000;
text-decoration: none;
color:#ffffff;}

.pagebar .break {
padding: 4px 8px;
border: none;
background: #000000;
text-decoration: none;}

.pagebar a:hover {
color: #fff;
background: #3d3d3c;
border-color: #ede61b;
text-decoration: none;}

.google {
display:inline;
float:right;}

#special img {
border:0px;}

.post_det {
border-top:1px dotted #487081;
border-bottom:1px dotted #487081;
margin:8px 0 8px 0;
padding:5px;
background-color:#173340;
height:15px;}

.post_det a {
background-color:#173340;}

.alignleft {
float:left;}

.alignright {
float:right;}

.cell{
float:left;
width:150px;
margin:15px;}

.right_sidebar_container_top {
width: 340px;
float: right;}


Thanks in advance
donald

Could you provide your forum version or a screenshot of what it looks like now so we can try and help?

Thanks Teknas for your reply.
I solved the issue in another way, basically I found a plug-in for Wordpress which works fine and it is less time consuming. I believe anyway it was something clashing with the css code. The thing is I didn't designed the code so cannot tell you what part it is wrong.
Thanks for your help.

Well your welcome. Sorry for such a late reply to your issue.