Need Foundation CSS styling change Help

[Dirty Butter]

I'm trying to get a horizontal document menu at the top, above the Category row. This is what I have:

main.php

<div class="row">
<div class="small-12 columns small-collapse">
 {include file='templates/box.topbarlist.php'}
</div>
               <div class="small-12 columns small-collapse">
                  {include file='templates/box.navigation.php'}
               </div>

Then in my topbarlist.php:

<div id="topbar_documents">
  <ul class="topbar_documents"> 
         {if isset($DOCUMENTS) && count($DOCUMENTS) > 0}
         {foreach from=$DOCUMENTS item=document}
         <li><a href="{$document.doc_url}" title="{$document.doc_name}" {if $document.doc_url_openin}target="_blank"{/if}>{$document.doc_name}</a></li>
         {/foreach}
         {/if}
         {if isset($CONTACT_URL)}
         <li><a href="{$CONTACT_URL}" title="{$LANG.documents.document_contact}">{$LANG.documents.document_contact}</a></li>
         {/if}
   </ul>
</div>

And the cubecart.css file that should have made it horizontal and styled to match the rest of my site, but does NOT :

/* MY DOCUMENT TOPBAR */

#topbar_documents{
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
   
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold; /* BOLD TITLES */
  font-style: normal; 
    font-weight: bold;
    color: #041c64;
    background-color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    
}

a:hover, a:active {
    font-family: Arial, Helvetica, sans-serif;
  font-weight: bold; /* BOLD TITLES */
  font-style: normal; 
    font-weight: bold;
    color: #6c8ef6;
    background-color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

This code still makes a vertical list, with bullets, and not bold font.

[bsmither]

I see this:

#topbar_documents{
ul {

This would work if the CSS files were being processed as LESS (or maybe SASS) condensed CSS rules. That is, rules nested inside rules.

 

You can try to leave out the #topbar_documents line, or add it to everything:

#topbar_documents ul { ...

#topbar_documents li { ...

etc.

 

As this stands, the browser does not recognize anything inside the

#topbar_documents { ... }

as legal CSS style properties.

[Dirty Butter]

I had a stray div, so the topbar is now horizontal.

#topbar_documents 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

But I haven't been able to figure out how to make the distance between lines wider. I'm hoping fixing that will fix the odd clipping of titles of products. I'll have to comment this document topbar out until I can get help again.

 

Thanks for your help so far, Bsmither!