How to apply CSS to a BC menu

Question

Hi there,
I have done a lot of reading, gone to BC gurus, looked at Liam's post on Web Menu V2and I am still stumped on this one. The BC gurus tutorial and Liams' item were way above my head.
How do you apply CSS you have written to a BC menu?
I have set up a BC menu and put items in it. The menu type is CSS (HTML) Only
The menu items have a name, a page link Item Height of 30 and .menuLeft in the Item CSS Class Name
The template the menu is on is responsive and linked to a stylesheet with the CSS code below in it.
The menu is completely unaffected by the CSS in the stylesheet. All menu items have a dot in front of them, and look like the default link style for the site.
So the CSS below is not having any affect on the menu items. Why is this?
What basic, simple step have I missed here?
How do I get the menu in BC to notice the CSS below?
I have also tried making the CSS into an id #menuLeft and putting that into the Item ID Name field in each menu item. The CSS is still completely ignored. Why? (anguished cry)
.menuLeft {
          list-style-type: none;
.menuLeft ul{
          list-style-type: none;
          padding: 5px;
          margin: 0px;
          line-height: 30px;
          border: thin solid #CCCCCC;
          border-radius: 3px;
          text-decoration: none;
.menuLeft li a:link {
          color: #3F823D;
          text-decoration: none;
.menuLeft li a:visited {
          text-decoration: none;
          color: #999999;
          background-color: #B9E09A;
.menuLeft li a:hover {
          color: #999999;
          text-decoration: underline;
          background-color: #B9E09A;
.menuLeft li a:active {
          color: #999999;
          text-decoration: none;
          background-color: #B9E09A;

Answer 1

Hi Liam,
The class is definitely .menuLeft and that is what is showing in the code. However, for the menu, only the line height set in the backend of BC is showing. All other styling in the CSS is ignored. By the way I have to have two CSS stylesheets as this is a responsive design using CCDW. You have to use a separate stylesheet to style body, links, headers and other items. I have done this in eternityfonts.css which is where the styling for the menu is. The webpage is using all other instructions from the eternityfonts.css file, including headers, links etc, but it is ignoring the menu styling.
TEST PAGE SHOWING THE MENU NOT WORKING
Here is the test page where I am trying to style the menu. http://eternitycosmetics.businesscatalyst.com/test
It is linked to these stylesheets:
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" /> BC standard stylesheet with all sites
<link href="../boilerplate.css" rel="stylesheet" type="text/css"> DW CC stylesheet that comes with fluid design
<link href="/stylesheets/eternity4.css" rel="stylesheet" type="text/css"> DW CC stylesheet that accompanies the fluid design - the fluid design will break if I edit this stylesheet manually
<link href="/stylesheets/eternityfonts.css" rel="stylesheet" type="text/css"> stylesheet containing body bground, header, a link and other manual styles for the site. I can edit this stylesheet manually
CODE RENDERING ON THE PAGE
Here is the code on the page for the menu in question when I do view source. It appears to be ignoring the .menuLeft code in eternityfonts.css and just looks at the setup in the BC menu.
<div id="leftMenu" class="fluid"> (this div is in the DWCC generated stylesheet that I cannot touch called /stylesheets/eternity4.css)
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><!-- Dynamic Menu Begin CSS Output -->
<div id="cat_673629_divs">
<ul id="nav_673629">
<li class=".menuLeft" style="height:30px;"><a href="/index.htm">Home</a></li> (this class is in the /stylesheets/eternityfonts.css stylesheet that I can edti)
<li class=".menuLeft" style="height:30px;"><a href="/about-us">About Us</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/products">About Our Products</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/impact-cosmetics">Products Online</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/anti-aging-treatments">Anti-aging Treatments</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/acne-treatments">Acne Treatments</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/doctor-services">Doctor Services</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/testimonials">Testimonials</a></li>
<li class=".menuLeft" style="height:30px;"><a href="/contact-us">Contact Us</a></li></ul></div>
<script type="text/javascript">catSetSelectedCSSItem('nav_673629');</script>
<!-- Dynamic Menu End CSS Output --></div>
BC MENU SETUP SCREEN
Here is the BC setup screen showing that I have applied the class of .menuLeft to the menu items:
CSS CODE THAT IS BEING IGNORED WHEN THE PAGE IS DISPLAYED
Here is the code in eternityfonts.css that is not being applied to the CSS menu. I have bolded the code that is not being actioned in the BC CSS/HTML menu.
WHY IS THIS CODE BEING IGNORED?
What step have I missed here?
Full dump of code in eternityfonts.css
@charset "utf-8";
/* CSS Document */
body,td,th {
          font-family: Arial;
          font-size: 12px;
          color: #000;
          font-style: normal;
          font-weight: 400;
body {
          background-color: #FFFFFF;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(178,221,145,1.00)),color-stop( 100% , rgba(255,255,255,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(178,221,145,1.00) 0%,rgba(255,255,255,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(178,221,145,1.00) 0%,rgba(255,255,255,1.00) 100%);
          background-repeat: no-repeat;
a {
          color: #3F823D;
          text-decoration: none;
a:visited {
          color: #3F823D;
          text-decoration: none;
a:hover {
          color: #3F823D;
          text-decoration: underline;
a:active {
          color: #3F823D;
          text-decoration: none;
h1 {
          font-size: 20px;
          color: #3F823D;
h2 {
          font-size: 18px;
          color: #FF7546;
h3 {
          font-size: 16px;
          color: #3F823D;
h4 {
          font-size: 14px;
          color: #FF7546;
#buyButton2 {
          width: 100px;
          margin-top: 10px;
          padding-top: 5px;
          padding-bottom: 5px;
          text-align: center;
          border: thin solid #CC6600;
          border-radius: 3px;
          background-color: #FFAC77;
          float: right;
#buyButton1 {
          width: 100px;
          margin-top: 10px;
          padding-top: 5px;
          padding-bottom: 5px;
          text-align: center;
          border: thin solid #CC6600;
          border-radius: 3px;
          background-color: #FFAC77;
.menuLeft {
          list-style-type: none;
.menuLeft ul{
          list-style-type: none;
          padding: 5px;
          margin: 0px;
          line-height: 30px;
          border: thin solid #CCCCCC;
          border-radius: 3px;
          text-decoration: none;
.menuLeft li a:link {
          color: #3F823D;
          text-decoration: none;
.menuLeft li a:visited {
          text-decoration: none;
          color: #999999;
          background-color: #B9E09A;
.menuLeft li a:hover {
          color: #999999;
          text-decoration: underline;
          background-color: #B9E09A;
.menuLeft li a:active {
          color: #999999;
          text-decoration: none;
          background-color: #B9E09A;
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
.menu ul{
height:50px;
list-style:none;
margin:0;
padding:0;
.menu li ul{
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
.menu li:hover ul{
display:block;