DW Starter Template - Basic - Multi column - issue with links

[julies_adobe]

It's been a while since I put a website together, so I hope I'm explaining this well.  I found the code below in the DW Starter Template called Basic - Single Page css coding.

ul li a {

  color: #FFFFFF;

  text-decoration: none;

}

ul li:hover a {

  color: #2C9AB7;

In the template I'm using, however, (called Basic - Multi column), I am not finding the code for links.  If you select the Basic - Multi column template from Starter Templates, you can access the file called multiColumnTemplate.css.  In "Live" view, you can drag your cursor over the menu items, and as you hover, the text turns from white to gray.  I assumed the code was already prepared for linking since this is a template.  However, when selecting one of the menu items in the gray bar called secondary header in order to assign a link, the default "hover" from white to gray breaks and the text becomes blue and underlined like old school HTML links.  It's like there's no css coding for the a, hover, etc.  Or at least I can't find it.  Can anyone tell me if I'm missing something?  Or tell me what code I should insert to make these links work right?  Also, when I say I'm assigning the link in the Properties Box, all I'm doing is highlighting one of the menu items and selecting an .html file from my site folder.  So once the link is assigned there, the menu item (in the gray secondary header bar) turns blue and underlined. Any input appreciated!

PS-Here are some of the areas where I'm looking for the anchor coding:

.secondary_header {

  width: 100%;

  padding-top: 20px;

  padding-bottom: 20px;

  background-color: #B3B3B3;

  clear: left;

}

.container .secondary_header ul {

  margin-top: 0%;

  margin-right: auto;

  margin-bottom: 0px;

  margin-left: auto;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 15px;

  padding-left: 0px;

  width: 100%;

}

.secondary_header ul li {

  list-style: none;

  float: left;

  margin-right: auto;

  margin-top: 0px;

  font-family: "Source Sans Pro";

  font-weight: normal;

  color: #FFFFFF;

  letter-spacing: 1px;

  margin-left: auto;

  text-align: center;

  width: 16%;

  transition: all 0.3s linear;

}

.secondary_header ul li:hover {

  color: #717070;

  cursor: pointer;

[Nancy OShea]

This is the HTML code.  Since your template contains no links yet, there are no anchors to target.

<nav class="secondary_header" id="menu">

      <ul>

        <li>ABOUT</li>

        <li>WORK</li>

        <li>PORTFOLIO</li>

        <li>SERVICES</li>

        <li>CLIENTS</li>

        <li>CONTACT</li>

      </ul>

    </nav>

[julies_adobe]

Hi,

My issue wasn't with targeting/adding anchors to the menu items.  My issue was with the anchors turning blue and underlined once I assigned the <a> tag through the Properties Box.  The problem is that the external .css file doesn't seem to have the code necessary for my links to have a style.

I found a work-around. I will go ahead and share in case someone else is looking to avoid blue, underlined links when assigning an anchor (in the Properties box via Window>Properties) to one of the menu items in the secondary header bar.  The user can specify CSS settings for links in Page Properties by selecting Links (CSS).  A <style> tag (see below) is added in the HTML template once you specify your choices for links.  I would prefer that the multiColumnTemplate.css file contain the code for anchors/links because everything else in this template is user ready.   I think most people prefer the code to be in the .css file, not in the HTML template.  That's the answer I'd really like--how to get the external .css file to have the code  instead of having to add it internally or inline. 

Thanks!

<style type="text/css">

a:link {

    color: #FFFFFF;

    text-decoration: none;

}

a:visited {

    text-decoration: none;

    color: #FFFFFF;

}

a:hover {

    text-decoration: none;

    color: #686767;

}

a:active {

    text-decoration: none;

    color: #FFFFFF;

}

</style>

[Nancy OShea · Accepted solution]

I'm not thrilled with the CSS code in this multi-column Template.  You have my permission to use another one.

Anyway, add some links to your menu.  You can use temporary # if you like.

<nav class="secondary_header" id="menu">

      <ul>

      <li><a href="#">ABOUT</a></li>

        <li><a href="#">WORK</a></li>

        <li><a href="#">PORTFOLIO</a></li>

        <li><a href="#">SERVICES</a></li>

        <li><a href="#">CLIENTS</a></li>

        <li><a href="#">CONTACT</a></li>

      </ul>

    </nav>

Now that we have anchors to target, we can add these selectors to the CSS code.

.secondary_header ul li {

    list-style: none;

    float: left;

    margin-right: auto;

    margin-top: 0px;

    font-family: "Source Sans Pro";

    font-weight: normal;

    color: #FFFFFF;

    letter-spacing: 1px;

    margin-left: auto;

    text-align: center;

    width: 16%;

    transition: all 0.3s linear;

}

.secondary_header ul li:hover {

    color: #717070;

    cursor: pointer;

}

.secondary_header a {

    color: #FFF;

    text-decoration:none;

}

.secondary_header a:hover, a:active, a:focus {

    color: #717070;

}

[julies_adobe]

Yes!  That's what I needed.  Thanks!!!