htmlmenuspry

HTML, CSS, Etc. (Change Properties of a Spry Menu Bar Behavior.)

I've been experimenting with different ways to make a Spry Menu bar, and I also have found a way to make it act kind of like the Visual Studio Express 2012 Program Web Installer, where the border fades into a blue color. So far the only way i'm able to do this is by adding a "Highlight" behavior to this, but that only does the edges of what I need. What i'm trying to do is change the Properties of the highlight to highlight the "BORDER" instead of the Backgroundcolor, which it has an option for this.

The Error i'm getting:

This behavior can only affect elements with an ID. Please click Cancel and give the element an ID using the Property Inspector or Code view. This action will no be added to your document.

Here is my coding for the Spry Menu Bar I have made.

<ul class="MenuBarVertical" id="MenuBar1">
    <li class="MenuBarSubmenuVisible" id="Home" onmouseover="MM_effectHighlight(this, 500, '#CCCCCC', '#00CCFF', '#00CCFF', false)" name="Home">
      <div align="center"><a href="Index.html">Home Page </a></div>
      </li>
    <li onmouseover="MM_effectHighlight(this, 500, '#CCCCCC', '#00CCFF', '#00CCFF', false)" id="Aboutus">
      <div align="center"><a href="#">About Us</a></div>
      </li>
    <li onmouseover="MM_effectHighlight(this, 500, '#CCCCCC', '#00CCFF', '#00CCFF', false)" id="Downloads">
      <div align="center"><a href="#">Downloads</a>            </div>
      </li>
    <li onmouseover="MM_effectHighlight(this, 500, '#CCCCCC', '#00CCFF', '#00CCFF', false)" id="Forums">
      <div align="center"><a href="#">Forums</a></div>
    </li>
    <li onmouseover="MM_effectHighlight(this, 500, '#CCCCCC', '#00CCFF', '#00CCFF', false) id="Untitled">
      <div align="center"><a href="#">Untitled Item</a></div>
    </li>
  </ul>

What I am needing is to change the ID Value or what-ever that error is saying, so I can change that option to "Border" so I can live happily ever after.. does anyone know the answer to this?

  • Sorry about no pictures, I had them... but Spam Prevention got me... I don't have 10 rep points.
Solution

  • You could use CSS to do that. On top of your menu ul put this :

    <style>
li:hover {
border: 2px solid #10CA00;
}
</style>

    you can change the color (#10CA00) and size (2px)

    if this doesn't work try this :

    <style>
    li:hover {
    border: 2px solid #10CA00;
    display : block;
    height: 50px;
    padding : 5px;
    margin : 10px;
  width: 100px;
    }
    </style>

    you can change the values of any of these attributes and remove the one you don't need