CSS Menu Explodes Header

HTML & CSS
1

Hello,

I have a CSS flyout menu that I’m very happy with. The challenge is that when I add it to the header of my site it exploded the header css. It’s moving the submenu background color up and shifting the contents of another menu.

So is there a way to wrap a self contained CSS Flyout that’s called via a PHP string into the header of a website (the css is embedded) without having it effect anything else? Even though its embedded, I did move the css to the styles.css file too. It just explodes the header in a different way. It’s so strange, it appears fine when its all alone…
Involved Code Bases: PHP, XML, PHTML, CSS etc. It’s messy…

Here’s a sample of the code if you’d like to take a stab at this…

CSS
#csflyout {width:140px; height:24px; position:relative; float:right; margin-bottom:24px; z-index: 12000; }
#csmenu {padding:0; margin:0; list-style:none; width:140px; height:24px; }
#csmenu li.cslevel1-li {float:left; height:24px; width:134px;}

STARTING HTML
<body id=“body”>
<div id=“wrapper”>
<!-- end of header –>
<div id=“info”>
<div id=“csflyout”>
<ul id=“csmenu”>
<li class=“cslevel1-li sub”><a class=“cslevel1-a” href=“url”>Customer Service<!–[if gte IE 7]><!–></a><!–<![endif]–>

<!–[if lte IE 6]><table><tr><td><![endif]–>
<div class=“listHolder col3”>
<div class=“listCol”>

2

HI,

We’d need to see the site to debug properly but it just sounds like you have existing rules for the header that are cascading into the menu you inserted which is what css does by its very nature. Nothing is really self contained and will always be affected by the cascade, inheritance and specificity.

For example if you have existing rules that say #header ul{} then that will affect the menu you have just inserted.

Use Firebug in Firefox and you will see what styles are being applied to your menu and where they are coming from. Once you know where they are coming from you can counteract them with more specific styles.

It also looks like you are using Stu Nichols menu which is not the easiest menu to work with where you are inserting into an existing element.