CSSmenu top & font color & hover

[larskong]

Hi CMSMS forum,

Thank you for af great site management system. I love to work with it.

I have a small problem and it puzzles me, since I was able to get this working in the 0.13 "canary" version,
but not in the latest release 1.0 beta4 version.

I want a horisontal CSS menu that should have blue background and white text on hover (sort of invert colors...).

excerpt from template:  CSSMenu top + 1 column

Code: Select all

::
::
<!-- Start Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      <!-- End Navigation -->
::
::

excerpt from stylesheet: Layout: Top menu + 1 column

Code: Select all

::
::
/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #0000FF; /*#C3D4DF*/
   color: #FFFFFF; /*#385C72*/
}
::
::

I get the blue background allright, but the text remains blue'ish (not white). See also snapshot attached.

How do I get the text to be white on hover? (it worked in 0.13 "canary").

Kind regards / Lars

CMSMS v. 1.0 Beta4
Opera v.9.0
IE v. 6.0
Firefox v.1.0.7
Webcalender v. 1.0.3
Windows XP platform SP2
XAMPP for Windows Version 1.5.3a (PHP Version 5.1.4, Apache 2.2.2)

[attachment deleted by admin]

[Nogga]

That's not very hard - use these (maybe you have to modify the color codes):

Code: Select all

#topmenu a {
  background-color: blue;
  color: white;
  text-underline: none;
}

#topmenu a:hover {
  background-color: white;
  color: blue;
}

You have to modify the captions of the css-classes to fit your template.

[Dr.CSS]

If you rite clik and look at the source, view source, you will find the id it should be since you are using, according to your img., the horiz menu.

The CSS is...

menu_horiz li a:hover{background-color:#0000FE; color: #FFFFFF }

A good place to get color numbers, aka hex numbers,...

http://www.colorschemer.com/online.html

[larskong]

Hi Mark,

Thank you very much for the tip. I am still a beginner in CSS stuff... It was my template that had a problem.
Strangely...I copied it from the standard CMSMS v.10-beta4 installation - the one that is called "CSSmenu top + 2 columns".
That template says

Code: Select all

::
::
<!-- Start Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      <!-- End Navigation -->
::
::

The "id=menu_vert" is mentioned in the stylesheet "Navigation: Simple - Vertical". Maybe
there is a typo in the standard template called "CSSmenu top + 2 columns". Furthermore the
standard template does not have the stylesheet "Navigation: Simple - Horizontal" assigned,
where the "id="menu_horiz" is placed.

I used the "id="menu_horiz" in the template instead and the corrosponding stylesheet.
It works fine now (off course...)

Kind regards / Lars

[attachment deleted by admin]

[Dr.CSS]

Good.