[mozart66]

Hi!

I need help with CSS. My skill level in CSS is a little ablove beginner but I still sometimes get stuck with some basic CSS. Here's the problem.

I have written style sheet for displaying horizontal menu with drop-down items. I used PHP for the photo gallery on my webspage and found out that the drop-down menu items on the PHP page was 'center' aligned rather than 'left' aligned. I solved this problem by putting inline style for the drop-down menu and forcing the srop-down menu to align 'left'. So far so good! But the width of the drop-down menu on tother non-PHP webpages is 260px which is not the case on the drop-down menu items on the PHP page. 'Left' alignment as with the other webpages was achieved but the width problem is not yet solved. I tried but don't know what to do. Please help! Following is the style sheet I have used:

Menu.css

#menu {float:left; padding:0; margin:0;color: #FFFFFF;background: #000000;width:100%; border:solid 1px #000000;clear:both;} /*Color navigation bar normal mode*/
#menu a, #menu a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
#menu ul {list-style-type:none;padding:0; margin:0;}
#menu ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #000000; border-left:solid 1px #000000;}
#menu ul li a {color: #FFFFFF;background: #000000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
#menu ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}
#menu ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
#menu ul li:hover ul {display:block; Width:260px; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
#menu ul li:hover ul li a {display:block; width:260px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #000000; border-bottom: solid 1px #000000; background-color:#000000; color:#FFFFFF;} /*Color subcells normal mode*/
#menu ul li:hover ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
#menu ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
#menu ul li a:hover ul {display:block; width:260PX; position:absolute; z-index:999; top:29px; left:0; }
#menu ul li ul li a:visited {background-color:#000000; color:#FFFFFF;} /*Color subcells normal mode*/
#menu ul li a:hover ul li a {display:block; width:260px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #000000; border-bottom: solid 1px #000000; background-color:#000000; color:#FFFFFF;}
#menu ul li a:hover ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/

/*#menu li ul#HomeMenu {
width: 78px;
}*/
#menu li ul#ProjectsMenu {
width: 260px;
}

I have used the following style statement in the PHP file.

<div id="menu">
<ul id="menuList" class="adxm">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a>
<ul id="ProjectsMenu">
<li style="text-align:left"><a href="project1.html">Involving School Children</a></li>
<li style="text-align:left"><a href="project2.html">Involving Youth</a></li>
<li style="text-align:left"><a href="project3.html">Programmes for Educators</a></li>
<li style="text-align:left"><a href="project4.html">Production of Education Support Material</a></li>
<li style="text-align:left"><a href="project5.html">ESD Through Performing Art</a></li>
<li style="text-align:left"><a href="project6.html">Towards Empowerment</a></li>
<li style="text-align:left"><a href="project7.html">Community Support</a></li>
<li style="text-align:left"><a href="project8.html">City's Development</a></li>
<li style="text-align:left"><a href="project9.html">Six Networks</a></li>
</ul>
</li>

Please help. Why can't I get the width 260 px for the drop-down menu on this PHP? For some reason PHP file when executed had thrown my original style for a toss and so I had to use the inline style statement to force the left alignment which worked but the width problem is not solved. I tried putting width: 260px along with text-align for <li> statements above. But it didn't work.

Any clue or help will be greatly appreciated.

Thanks in advance!
Regards,
Mozart66