1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with initial colour and mouseover colour please

Discussion in 'CSS' started by twelfty, May 10, 2010.

0
  1. #1
    Hi all,

    I have this drop down left menu which works fine except I want the first column (the one on the RIGHT, with the arrows) to be grey text on white panel - to change to colour #8086BA on mouseover. And for some reason I can't get my head round it!

    Can anyone please point me to the bit of code that needs looking at?

    Thanks.

    [​IMG]

    LAYOUT INFORMATION: describes box model, positioning, z-order
    *******************************************************************************/
    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
    ul.MenuBarVertical
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 142px;
    height: 25px;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
    z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are same fixed width as parent */
    ul.MenuBarVertical li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 142px;
    height: 25px;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarVertical ul
    {
    margin: -2px 0 0 -174px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    float: left;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarVertical ul.MenuBarSubmenuVisible
    {
    left: 0;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarVertical ul li
    {
    width: 170px;
    }
    /* Submenu containers have borders on all sides */
    ul.MenuBarVertical ul
    {
    border: 2px solid #FFFFFF;
    padding: 0;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarVertical a
    {
    display: block;
    cursor: pointer;
    background-color: #9398CC;
    padding: 8px;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-width: 1px 1px 1px 1px;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    {
    background-color: #9398CC;
    color: #FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    {
    background-color: #9297CB;
    color: #FFFFFF;
    }

    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarVertical a.MenuBarItemSubmenuHover
    {
    background-repeat: no-repeat;
    background-position: 0% 50%;
    background-color: #8086BA;
    }

    /*******************************************************************************
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    *******************************************************************************/
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarVertical iframe
    {
    position: absolute;
    z-index: 1010;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    ul.MenuBarVertical li.MenuBarItemIE
    {
    display: inline;
    f\loat: left;
    background: #FFF;
    }
    }
     
    twelfty, May 10, 2010 IP
  2. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #2
    can you post your html where you are using the menu? Don't want to bag on your code and not sure if it is generated dynamically but you could do this in a lot less code and cleaner all together.
     
    AtSeaDesign, May 10, 2010 IP
  3. twelfty

    twelfty Active Member

    Messages:
    361
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    90
    #3
    Hi AtSea,

    Thanks for looking:

    <html>
    <head>
    <title>REGISTER YOUR DETAILS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

    <link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
    <link href="campbells.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    -->
    </style>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    .style2 {color: #999999}
    -->
    </style>
    </head>
    <body bgcolor="#FFFFFF" text="#666666" link="#666666" vlink="#666666" alink="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('IMAGES/home_on.gif','IMAGES/search_on.gif')">
    <!-- ImageReady Slices (campbells_register.psd) -->
    <table width="949" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
    <td width="24" rowspan="4" valign="top"> <img src="images/campbells_register_01.jpg" width="24" height="600" alt=""></td>
    <td colspan="4" valign="top">

    <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0','width','900','height','176','src','IMAGES/slideshow_3','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','IMAGES/slideshow_3' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="900" height="176">
    <param name="movie" value="IMAGES/slideshow_3.swf">
    <param name="quality" value="high">
    <embed src="IMAGES/slideshow_3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="176"></embed></object></noscript>
    </td>
    <td width="24" rowspan="4" valign="top"> <img src="images/campbells_register_03.jpg" width="24" height="600" alt=""></td>
    <td width="1"> <img src="images/spacer.gif" width="1" height="176" alt=""></td>
    </tr>
    <tr>
    <td width="371" rowspan="2" valign="top"> <a href="index.html" target="_parent"><img src="images/campbells_register_04.jpg" alt="" width="371" height="163" border="0"></a></td>
    <td colspan="3" valign="top"> <img src="images/campbells_register_05.jpg" width="529" height="76" alt=""></td>

    <td> <img src="images/spacer.gif" width="1" height="76" alt=""></td>
    </tr>
    <tr>
    <td width="164" rowspan="2" valign="top"><table width="164" border="0" cellspacing="0">
    <tr>
    <td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','IMAGES/home_on.gif',1)"><img src="IMAGES/home_off.gif" name="Image18" width="142" height="25" border="0"></a></td>
    </tr>
    <tr>
    <td><a href="campbells_search.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','IMAGES/search_on.gif',1)"><img src="IMAGES/search_off.gif" name="Image19" width="142" height="25" border="0"></a></td>

    </tr>
    <tr>
    <td><a href="campbells_register.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','IMAGES/buying_on.gif',1)"><img src="IMAGES/buying_on.gif" name="Image13" width="142" height="25" border="0"></a></td>
    </tr>
    <tr>
    <td><a href="campbells_selling.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','IMAGES/selling_on.gif',1)"><img src="IMAGES/selling_off.gif" name="Image14" width="142" height="25" border="0"></a></td>
    </tr>
    <tr>
    <td><a href="campbells_about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','IMAGES/about_on.gif',1)"><img src="IMAGES/about_off.gif" name="Image15" width="142" height="25" border="0"></a></td>

    </tr>
    <tr>
    <td><a href="campbells_why_battle.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','IMAGES/battle_on.gif',1)"><img src="IMAGES/battle_off.gif" name="Image16" width="142" height="25" border="0"></a></td>
    </tr>
    <tr>
    <td><a href="campbells_contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','IMAGES/contact_on.gif',1)"><img src="IMAGES/contact_off.gif" name="Image17" width="142" height="25" border="0"></a></td>
    </tr>
    <tr>
    <td><img src="IMAGES/blank_menu_button.gif" width="142" height="25"></td>

    </tr>
    <tr>
    <td><ul id="MenuBar1" class="MenuBarVertical">
    <li><a href="#" class="menu style2">&lt;&nbsp;&nbsp;USEFUL LINKS</a>
    <ul>
    <li><a href="#" class="body">&nbsp;&nbsp;&nbsp;Local Council</a>
    <ul>
    <li><a href="http://www.rother.gov.uk" class="bodymenu">rother.gov.uk</a></li>

    <li><a href="http://www.wealden.gov.uk" class="bodymenu">wealden.gov.uk</a></li>
    </ul>
    </li>
    <li><a href="#" class="body">&nbsp;&nbsp;&nbsp;House buying</a>
    <ul>
    <li><a href="http://www..co.uk" class="bodymenu">.co.uk</a></li>
    <li><a href="http://www..gov.uk/hub" class="bodymenu">.gov.uk/hub</a></li>

    <li><a href="http://www." class="bodymenu">.org</a></li>
    <li><a href="http://www." class="bodymenu">.com</a></li>
    <li><a href="http://www." class="bodymenu">.co.uk</a></li>
    </ul>
    </li>
    <li><a href="#" class="body">&nbsp;&nbsp;&nbsp;Financial</a>
    <ul>

    <li><a href="http://www..gov.uk" class="bodymenu">.gov.uk</a></li>
    </ul>
    </li>
    <li><a href="#" class="body">&nbsp;&nbsp;&nbsp;Legal</a>
    <ul>
    <li><a href="http://www..gov.uk" class="bodymenu">.gov.uk</a></li>
    <li><a href="http://www..org.uk" class="bodymenu">.org.uk</a></li>

    </ul>
    </li>
    <li><a href="#" class="body">&nbsp;&nbsp;&nbsp Office</a>
    <ul>
    <li><a href="http://www..co.uk" class="bodymenu">.co.uk</a></li>
    </ul>
    </li>
    </ul>

    </li>
    <li><a href="#" class="menu">&lt;&nbsp;&nbsp;STAMP DUTY INFO</a>
    <ul>
    <li><a href="#" class="body">Current stamp duty exemption is for first time buyers for residential property purchases up to &pound;250,000. This ends 25 March 2012. Other than this exemption the rates are as follows: <br>
    <br>
    &pound;0 &gt; &pound;125,000 = 0% <br>

    &pound;125,001 &gt; &pound;250,000 = 1% <br>
    &pound;250,001 &gt; &pound;500,000 = 3% <br>
    &pound;500,001 or more = 4% <br>
    <br>
    <span class="bodysmall">Rates in accordance with Government announcement March 2010.</span></a></li>

    </ul>
    </li>
    </ul>
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table></td>

    <td width="326" rowspan="2" valign="top"><form action="mailto:info@.co.uk" method="post" name="form1" target="_blank">
    <p class="body">Please register your details so we can keep you informed.</p>
    <p class="body">&nbsp;</p>
    <p class="body">Title <span id="spryselect1">
    <select name="select2" size="1">
    <option>please select*</option>
    <option>Mr</option>

    <option>Mrs</option>
    <option>Ms</option>
    <option>Miss</option>
    </select>
    </span>* denotes required field</p>
    <p class="body"><br>
    <span id="sprytextfield1">
    <input name="textfield" type="text" value="initial*" size="45">

    </span><br>
    <span id="sprytextfield2">
    <input name="textfield6" type="text" value="surname*" size="45">
    </span></p>
    <p><span class="body" id="sprytextfield3">
    <input name="textfield2" type="text" value="address line 1*" size="45">
    </span><span class="body"><br>
    <span id="sprytextfield4">
    <input name="textfield3" type="text" value="address line 2*" size="45">
    </span><br>

    <span id="sprytextfield5">
    <input name="textfield4" type="text" value="postcode*" size="45">
    </span></span></p>
    <p> <span class="body">
    <input name="textfield5" type="text" value="email" size="45">
    <br>
    <span id="sprytextfield6">
    <input name="textfield522" type="text" value="primary tel*" size="45">
    </span><br>
    <input name="textfield52" type="text" value="home tel" size="45">

    <br>
    <input name="textfield53" type="text" value="work tel" size="45">
    <br>
    <input name="textfield54" type="text" value="mobile" size="45">
    </span></p>
    <p> <span class="body">
    <input name="textfield55" type="text" value="budget" size="45">
    <br>
    <input name="textfield532" type="text" value="area" size="45">

    <br>
    <input name="textfield542" type="text" value="type" size="45">
    <br>
    <input name="textfield552" type="text" value="bedrooms" size="45">
    <br>
    <input name="textfield5522" type="text" value="garden" size="45">
    </span></p>
    <p><span class="body">Buying position <span id="spryselect2">
    <select name="select" size="1">

    <option>please select*</option>
    <option>First time buyer</option>
    <option>Cash buyer</option>
    <option>Nothing to sell</option>
    <option>Home to sell locally</option>
    <option>Home to sell locally, please contact me for a valuation</option>

    <option>Under offer</option>
    </select>
    </span></span> </p>
    <p> <span class="body">
    <input name="submit" type="submit" value="Send">
    <input name="reset" type="reset" value="Reset">
    </span></p>
    <p>&nbsp; </p>

    </form></td>
    <td width="36" rowspan="2" valign="top"> <img src="images/campbells_register_08.jpg" width="26" height="348" alt=""></td>
    <td> <img src="images/spacer.gif" width="1" height="87" alt=""></td>
    </tr>
    <tr>
    <td valign="top"> <img src="images/campbells_register_09.jpg" width="371" height="261" alt=""></td>
    <td> <img src="images/spacer.gif" width="1" height="261" alt=""></td>

    </tr>
    </table>
    <!-- End ImageReady Slices -->
    <map name="Map">
    <area shape="rect" coords="1,1,59,18" href="index.html" target="_parent">
    <area shape="rect" coords="2,23,124,43" href="campbells_search.html" target="_parent">
    <area shape="rect" coords="1,73,134,95" href="campbells_selling.html" target="_parent">
    <area shape="rect" coords="1,100,76,120" href="campbells_about.html" target="_parent">
    <area shape="rect" coords="1,126,93,146" href="campbells_why_battle.html" target="_parent">
    <area shape="rect" coords="1,151,96,175" href="campbells_contact.html" target="_parent">

    <area shape="rect" coords="2,227,116,251" href="campbells_register_duty.html" target="_parent">
    <area shape="rect" coords="-4,196,95,219" href="campbells_register_links.html" target="_parent">
    </map>

    <script type="text/javascript">
    <!--
    var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2");
    var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6");
    var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5");
    var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4");
    var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");
    var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
    var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none");
    var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
     
    Last edited: May 11, 2010
    twelfty, May 11, 2010 IP
  4. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #4
    take a look at this page and see if there's something there you can use. A lot less bloated then using the old Dreamweaver code
    w w w.cssdrive.com/index.php/menudesigns/category/C25/P0/
     
    AtSeaDesign, May 11, 2010 IP