4 Replies Latest reply on Jul 24, 2012 1:33 AM by NessaFrankling

    Styling my UL and LI classes to rollover different colours????

    NessaFrankling

      Hi If anyone could point me in the right direction here it would be much appreciated. I have set up a text menu here http://www.flitecarz.co.uk/test.html using css to style it.

       

      What I want to achive is when the mouse is rolled over the background colour changes from grey to white but all I can seem to do is change the text colour and when I change the background colour it only does a small area around the text rather than the whole box.

       

      If anyone could help me or point me in the right direction it would be great as I have been racking my brains about this all day

        • 1. Re: Styling my UL and LI classes to rollover different colours????
          osgood_ Level 8

          See if the below code is what you require:

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>Untitled Document</title>

          <style>

           

           

          /******* Top Nav *******/

          /*THEME CHANGE HERE*/

           

          #top-nav-holder {

              width:996px;

              margin-right: auto;

              margin-left: auto;

          }

           

          #chromestyle ul{

          width: 994px;

          list-style: none;

          }

           

          #chromestyle  li{

          float: right;

          list-style: none;

          margin-left: 6px;

          }

           

          #chromestyle a {

          background-color: #575656;

          padding: 7px 10px 7px 10px;

          color: #fff;

          text-decoration: none;

          font-weight:bold;

          display: block;

          font-family:Arial, Helvetica, sans-serif; font-size: 13px;

          -moz-border-radius: 7px;

              -webkit-border-radius: 7px;

              -khtml-border-radius: 7px;

              border-radius: 7px;

          }

           

          #chromestyle a:hover {

          background-color: #fff;

          color: #575656;

          }

           

          </style>

          </head>

           

          <body>

           

           

          <div id="top-nav-holder">

          <div id="chromestyle">

          <ul>

          <li><a href="contact-us-.html">Contact Us</a></li>

          <li><a href="print-production.html">Production</a></li>

          <li><a href="artwork-preperation.html">Artwork Preparation</a></li>

          <li><a href="special-offers.html">Special Offers</a></li>

          <li><a href="about-us.html">About us</a></li>

          <li><a href="faq.html">FAQ's</a></li>

          <li><a href="http://www.print.dor2dor.com">Home</a></li>

          </ul>

          </div>

          </div>

           

          </body>

          </html>

          • 2. Re: Styling my UL and LI classes to rollover different colours????
            NessaFrankling Level 1

            Thanks thats perfect

             

            Just one little thing is it possible to add a border to the box when you hover?

            • 3. Re: Styling my UL and LI classes to rollover different colours????
              osgood_ Level 8

              NessaFrankling wrote:

               

              Thanks thats perfect

               

              Just one little thing is it possible to add a border to the box when you hover?

              Sure, just add - border: 1px solid #575656; (see below)

               

              #chromestyle a:hover {

              background-color: #fff;

              color: #575656;

              border: 1px solid #575656;

              }

               

               

              You will also have to add a border to the 'a' link otherwise you'll see some jumping on hover (I've added it to the end of the css below)

               

              #chromestyle a {

              background-color: #575656;

              padding: 7px 10px 7px 10px;

              color: #fff;

              text-decoration: none;

              font-weight:bold;

              display: block;

              font-family:Arial, Helvetica, sans-serif; font-size: 13px;

              -moz-border-radius: 7px;

                  -webkit-border-radius: 7px;

                  -khtml-border-radius: 7px;

                  border-radius: 7px;

              border: 1px solid #575656;

              }