Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dissapearing Text!

    Hi

    I have a CSS drop down menu but when I hover over one of the dropped down items the text the text on the original hover button dissapears. This is because the text is the same color as the rollover color. How could I make it so that the rollover text color is different? At the moment only the drop down items text changes color on hover


    Code:
    #navMenu {
    	margin:0;
    	padding:0;
    }
    
    #navMenu ul {
    	margin:0;
    	padding:0;
    	line-height:30px;
    }
    
    #navMenu li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    	position:relative;
    	background-color:#f0eccd;
    }
    
    #navMenu ul li a {
    	text-align:center;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-decoration:none;
    	width:95px;
    	height:30px;
    	display:block;
    	color:#ff9a29;
    }
    
    #navMenu ul ul {
    	position:absolute;
    	visibility:hidden;
    	top:30px;
    }
    
    #navMenu ul li:hover ul {
    	visibility:visible;
    }
    
    #navMenu li:hover {
    	background-color:#ff9a29;
    }
    
    #navMenu ul li:hover ul li a:hover {
    	background:#ff9a29;
    	color:#FFF;
    }
    
    #navMenu a:hover {
    	color:#FFF;
    }
    Thanks
    Thomas

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Some CSS without any HTML is useless for us. Please provide HTML as well.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sorry! (Didn't think about that!)

    here's the html code for my navMenu


    Code:
    <div id="navMenu">
    <ul>
    <li><a href="../index.html">Home</a>
    <ul>
    <li></li>
    <li></li>
    </ul>
    </li>
    </ul>
    </div>
    
    <div id="navMenu">
    <ul>
    <li><a href="http://about.me/thomashochkins">About</a>
    <ul>
    <li></li>
    <li></li>
    </ul>
    </li>
    </ul>
    </div>
    
    <div id="navMenu">
    <ul>
    <li><a href="../gallery.html">Gallery</a>
    <ul>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">Photos</a></li>
    </ul>
    </li>
    </ul>
    </div>
    
    <div id="navMenu">
    <ul>
    <li><a href="../videos.html">Videos</a>
    <ul>
    <li></li>
    <li></li>
    </ul>
    </li>
    </ul>
    </div>
    
    <div id="navMenu">
    <ul>
    <li><a href="../contact.html">Contact</a>
    <ul>
    <li></li>
    <li></li>
    </ul>
    </li>
    </ul>
    </div>

    Sorry!
    Thanks
    Last edited by TomTom100; 06-17-2011 at 03:36 PM. Reason: didn't need one of the lines of code

  • #4
    New Coder
    Join Date
    Mar 2010
    Location
    London
    Posts
    78
    Thanks
    0
    Thanked 19 Times in 17 Posts
    add this to your css

    #navMenu ul li:hover a {color:#fff}

    hovewer the :hover pseudo-selector is not supported in IE6! works fine on modern browsers

  • #5
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Another problem! (But thanks) :)

    That worked thank you! But now when I hover the text color on the dropped down items is automatically white without hover!


    Any help would be much appreciated


    Thanks
    Thomas

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    that is because color:attribute; sets the foreground color, also #FFF is white... so the text (foreground) is now becoming white... you are setting it... change it to whatever color you want it to be

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Sorry

    Sorry, I don't understand where to change the text color?

    Thanks
    Thomas

  • #8
    New Coder
    Join Date
    Mar 2010
    Location
    London
    Posts
    78
    Thanks
    0
    Thanked 19 Times in 17 Posts
    add this

    #navMenu ul li:hover li a {color:#ff9a29}

  • #9
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks

    Thank you for all your help!


    The resulting site is live now at phototesting.tk (will be proper hosting and domain soon)


    Thanks
    Thomas


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •