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 2 of 2
  1. #1
    957
    957 is offline
    Banned
    Join Date
    Mar 2010
    Location
    my head
    Posts
    176
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Question inline horror with :hover

    I am trying to change my css so that when I hover over a list item, another will pop-up to the right. Well, it already does that but I want a horizontal list to pop-up instead of display:block;. I'm pulling out my hair at this point so I was hoping that I'll just post the code and you could tell me what needs to be changed, because it's not processing display:inline; properly. thanks in advance.

    HTM fn L
    Code:
    <div style="position: fixed; top: 75px; left: 5px;">
      <ul>
        <li class="ch"><b>eMail</b>
          <ul>
    	<li><a href="webmail.aol.com">AOL</a></li>
    	<li><a href="webmail.att.net">AT&amp;T</a></li>
    	<li><a href="http://mail.google.com">Gmail</a></li>
    	<li><a href="http://www.gmx.com">GMX</a></li>
    	<li><a href="http://www.hotmail.com">Hotmail</a></li>
    	<li><a href="http://www.inbox.com">Inbox.com</a></li>
    	<li><a href="http://www.mail.com">Mail.com</a></li>
    	<li><a href="http://www.yahoo.com/mail">Yahoo mail</a></li>
          </ul>
        </li>
        <li class="ch"><b>File Sharing</b>
          <ul>
    	<li><a href="http://www.flickr.com">Flickr</a></li>
    	<li><a href="http://box.net">Box.net</a></li>
    	<li><a href="http://imageshack.us">ImageShack</a></li>
    	<li><a href="http://photobucket.com">PhotoBucket</a></li>
    	<li><a href="http://www.rapidshare.com">RapidShare</a></li>
    	<li><a href="http://picasaweb.google.com">Picasa</a></li>
    	<li><a href="https://www.photoshop.com">Photoshop</a></li>
    	<li><a href="http://drop.io">drop.io</a></li>
          </ul>
        </li>
        <li class="ch"><b>Financial</b>
          <ul>
    	<li><a href="http://www.theworldeconomy.org">World Economy</a></li>
    	<li><a href="http://www.nasdaq.com">NASDAQ</a></li>
    	<li><a href="http://www.nyse.com">NYSE</a></li>
    	<li><a href="http://www.forbes.com">Forbes</a></li>
    	<li><a href="http://www.businessweek.com">Businessweek</a></li>
    	<li><a href="https://us.etrade.com">E*TRADE</a></li>
    	<li><a href="http://www.scottrade.com">Scottrade</a></li>
    	<li><a href="http://www.tdameritrade.com">TD AMERITRADE</a></li>
    	<li><a href="http://www.kiva.org">Kiva.org</a></li>
          </ul>
        </li>
        <li class="ch"><b>Games</b>
          <ul>
    	    <li><a href="http://www.gamefaqs.com">GameFAQs</a></li>
    	    <li><a href="http://gamewinners.com">GameWinners</a></li>
    	    <li><a href="http://www.cheatcc.com">CheatCodeCentral</a></li>
    	    <li><a href="http://www.supercheats.com">Super Cheats</a></li>
    	    <li><a href="http://www.emulator-zone.com">The Emulator Zone</a></li>
    	    <li><a href="http://www.doperoms.com">DopeRoms</a></li>
    	    <li><a href="http://www.arcadeprehacks.com">ArcadePreHacks</a></li>
    	    <li><a href="http://www.pogo.com">Pogo.com</a></li>
    	    <li><a href="http://funny-games.biz">Funny-Games</a></li>
    	    <li><a href="http://videogames.yahoo.com">Yahoo Games</a></li>
    	    <li><a href="http://www.gamespot.com">Gamespot</a></li>
    	    <li><a href="http://www.ign.com">IGN</a></li>
    	    <li><a href="http://www.1up.com">1UP.com</a></li>
    	    <li><a href="http://www.giantbomb.com">GiantBomb</a></li>
    	    <li><a href="http://www.gametrailers.com">GameTrailers</a></li>
    	    <li><a href="http://www.gamestop.com">Gamestop</a></li>
          </ul>
        </li>
        <li class="ch"><b>Jobs</b>
          <ul>
    	<li><a href="http://www.craigslist.org">Craigslist</a></li>
    	<li><a href="http://www.monster.com">Monster</a></li>
    	<li><a href="http://www.careerbuilder.com">CareerBuilder</a></li>
    	<li><a href="http://www.jobs.com">Jobs.com</a></li>
    	<li><a href="http://www.indeed.com">Indeed Job Search</a></li>
    	<li><a href="http://www.jobcorps.gov/home.aspx">JobCorp</a></li>
          </ul>
        </li>
        <li class="ch"><b>Language</b>
          <ul>
    	<li><a href="http://www.dictionary.com">Dictionary</a></li>
    	<li><a href="http://www.rhymezone.com">RhymeZone</a></li>
    	<li><a href="http://thesaurus.com">Thesaurus</a></li>
    	<li><a href="http://www.urbandictionary.com">Urban Dictionary</a></li>
    	<li><a href="http://www.anagramsite.com">Anagrams</a></li>
    	<li><a href="http://www.spanishdict.com">SpanishDict</a></li>
          </ul>
        </li>
        <li class="ch"><b>Literature</b>
          <ul>
    	<li><a href="http://www.ebooks.com">eBooks</a></li>
    	<li><a href="http://www.free-ebooks.net">Free-ebooks</a></li>
    	<li><a href="http://www.borders.com">Borders</a></li>
    	<li><a href="http://www.barnesandnoble.com">Barnes &amp; Noble</a></li>
    	<li><a href="http://www.reviewsofbooks.com">Book Reviews</a></li>
    	<li><a href="http://www.poetry.com">Poetry.com</a></li>
          </ul>
        </li>
        <li class="ch"><b>Maps</b>
          <ul> 
    	<li><a href="http://www.mapquest.com">MapQuest</a></li>
    	<li><a href="http://maps.google.com">Google Maps</a></li>
    	<li><a href="http://www.bing.com/maps">Bing Maps</a></li>
    	<li><a href="http://maps.yahoo.com">Yahoo Maps</a></li>
    	<li><a href="http://www.randmcnally.com">Rand McNally</a></li>
    	<li><a href="http://taxiwiz.com/?lang=en">TAXIWIZ</a></li>
          </ul>
        </li>
        <li class="ch"><b>Music</b>
          <ul> 
    	<li><a href="http://www.playlist.com">Playlist</a></li>
    	<li><a href="http://blip.fm">Blip.fm</a></li>
    	<li><a href="http://8tracks.com">8tracks</a></li>
    	<li><a href="http://listen.grooveshark.com">Grooveshark</a></li>
    	<li><a href="http://www.azlyrics.com">AZLyrics</a></li>
    	<li><a href="http://www.stlyrics.com">STLyrics</a></li>
    	<li><a href="http://www.jambase.com">JamBase</a></li>
    	<li><a href="http://www.pollstar.com">Pollstar</a></li>
    	<li><a href="http://www.hamienet.com">Hamienet</a></li>
    	<li><a href="http://media.io">media.io</a></li>
          </ul> 
        </li> 
        <li class="ch"><b>News (general)</b> 
          <ul> 
    	<li><a href="http://www.cnn.com">CNN</a></li>
    	<li><a href="http://www.cbsnews.com/">CBSnews</a></li>
    	<li><a href="http://www.msnbc.msn.com/">MSNBC</a></li>
    	<li><a href="http://www.bbc.co.uk">BBC</a></li>
    	<li><a href="http://www.npr.org">NPR</a></li>
    	<li><a href="http://www.huffingtonpost.com">The Huffington Post</a></li>
    	<li><a href="http://www.foxnews.com">Fox News</a></li>
          </ul> 
        </li> 
        <li class="ch"><b>Politics</b>
          <ul>
    	<li><a href="http://www.worldpoliticsreview.com">World Politics</a></li>
    	<li><a href="http://www.politico.com">Politico</a></li>
    	<li><a href="http://www.c-span.org">C-Span</a></li>
    	<li><a href="http://www.democrats.org">DNC</a></li>
    	<li><a href="http://www.gop.com">GOP</a></li>
          </ul> 
        </li> 
        <li class="ch"><b>Pro Wrestling</b>
          <ul> 
    	<li><a href="http://www.tnawrestling.com">TNA</a></li>
    	<li><a href="http://www.wwe.com">WWE</a></li>
    	<li><a href="http://corporate.wwe.com">WWE Corporate</a></li>
    	<li><a href="http://www.ewrestlingnews.com">eWrestling news</a></li>
    	<li><a href="http://www.wrestlinginc.com">WrestlingINC.</a></li>
    	<li><a href="http://wrestlingtruth.com">The Wrestling Truth</a></li>
          </ul>
        </li>
        <li class="ch"><b>Science</b>
          <ul> 
    	<li><a href="http://www.sciencedaily.com/">ScienceDaily</a></li>
    	<li><a href="http://www.howstuffworks.com">HowStuffWorks</a></li>
    	<li><a href="http://www.scirus.com">Scirus</a></li>
    	<li><a href="http://www.popsci.com">NASA</a></li>
    	<li><a href="http://www.nasa.gov">NASA</a></li>
          </ul> 
        </li> 
        <li class="ch"><b>Shopping</b>
          <ul>
    	<li><a href="http://www.amazon.com">Amazon</a></li>
    	<li><a href="http://www.ebay.com">eBay</a></li>
    	<li><a href="http://www.nextag.com">NexTag</a></li>
    	<li><a href="http://www.bizrate.com">bizrate</a></li>
    	<li><a href="http://www.lowes.com">Lowes</a></li>
    	<li><a href="http://www.homedepot.com">Home Depot</a></li>
    	<li><a href="http://www.gamestop.com">Gamestop</a></li>
    	<li><a href="https://www.paypal.com">PayPal</a></li>
    	<li><a href="http://www.ticketmaster.com">ticketmaster</a></li>
    	<li><a href="http://print.coupons.com/CouponWeb">Coupons</a></li>
          </ul> 
        </li>
        <li class="ch"><b>Social/Networking</b> 
          <ul>
    	<li><a href="http://www.facebook.com">Facebook</a></li>
    	<li><a href="http://www.Twitter.com">Twitter</a></li>
    	<li><a href="http://www.skyrock.com">Skyrock</a></li>
    	<li><a href="http://www.myspace.com">MySpace</a></li>
    	<li><a href="https://www.blogger.com">Blogger</a></li>
    	<li><a href="http://www.linkedin.com">LinkedIn</a></li>
    	<li><a href="http://chatroulette.com">Chatroulette!</a></li>
    	<li><a href="http://www.orkut.com">Orkut</a></li>
    	<li><a href="http://www.hi5.com">hi5</a></li>
    	<li><a href="http://digg.com">Digg</a></li>
          </ul>
        </li> 
        <li class="ch"><b>Sports</b>
          <ul> 
    	<li><a href="http://espn.go.com/">ESPN</a></li>
    	<li><a href="http://www.sportingnews.com">Sporting News</a></li>
    	<li><a href="http://www.nfl.com">NFL</a></li>
    	<li><a href="http://www.nba.com">NBA</a></li>
    	<li><a href="http://www.ufc.com">UFC</a></li>
    	<li><a href="http://www.nhl.com">NHL</a></li>
    	<li><a href="http://www.mlb.com">MLB</a></li>
    	<li><a href="http://www.fifa.com">FIFA</a></li>
    	<li><a href="http://www.mlsnet.com">MLS</a></li>
    	<li><a href="http://www.wsop.com">WSOP</a></li>
    	<li><a href="http://www.worldpokertour.com">WPT</a></li>
    	<li><a href="http://www.olympic.org">Olympics</a></li>
          </ul> 
        </li> 
        <li class="ch"><b>Travel</b>
          <ul>
    	<li><a href="http://www.priceline.com">Priceline</a></li>
    	<li><a href="http://www.orbitz.com">Orbitz</a></li>
    	<li><a href="http://www.travelocity.com">Travelocity</a></li>
    	<li><a href="http://www.expedia.com">Expedia</a></li>
    	<li><a href="http://www.hotels.com">Hotels.com</a></li>
          </ul>
        </li>
        <li class="ch"><b>TV/Movies/Video</b>
          <ul> 
    	<li><a href="http://www.hulu.com">Hulu</a></li>
    	<li><a href="http://www.tv.com">TV.com</a></li>
    	<li><a href="http://www.youtube.com">Youtube</a></li>
    	<li><a href="http://www.youtube.com/movies">Youtube Movies</a></li>
    	<li><a href="http://www.toptvbytes.com">TopTVBytes</a></li>
    	<li><a href="http://www.tvguide.com">TV Guide</a></li>
    	<li><a href="http://www.netflix.com">Netflix</a></li>
    	<li><a href="http://www.blockbuster.com">BLOCKBUSTER</a></li>
    	<li><a href="http://www.dailymotion.com">Dailymotion</a></li>
    	<li><a href="http://www.imdb.com">IMDb</a></li>
          </ul>
        </li>
       <li class="ch"><b>Misc.</b>
          <ul> 
    	<li><a href="http://www.accuweather.com">Weather</a></li>
    	<li><a href="http://www.timeanddate.com/worldclock">TimeZones</a></li>
    	<li><a href="http://wordpress.com">WordPress</a></li>
    	<li><a href="http://citysearch.com">CitySearch</a></li>
    	<li><a href="http://en-us.nielsen.com/">Nielson</a></li>
    	<li><a href="http://www.superpages.com">SuperPages</a></li>
          </ul> 
        </li>
      </ul>
    </div>
    CSS
    Code:
    /*BASICS*/
    a { cursor: pointer; display: block; }
    body { background-color: #7A5015; }
    a:link { color: #000000; }
    a:visited { color: #000000; }
    a:hover { color: #B38103; }
    .center { text-align: center; }
    .button { cursor: pointer; text-align: center; background-color: #6B5531; border-top-color: #B38103; border-left-color: #B38103; border-bottom-color: #000000; border-right-color: #000000; }
    .button:hover { background-color: #EFAC0E; }
    option { font-size: 12px; }
    select { cursor: crosshair; }
    /*STOP BASICS*/
    
    /*MENU*/
    ul { background: #6B5531; margin: 0px; padding: 0px; list-style: none; width: 130px; border: 1px solid #000000; position: absolute; top: 0px; text-align: left; }
    ul li { position: relative; }
    li ul { height: 20px; position: absolute; left: 130px; display: none; width: 150px; height: 130px; overflow: scroll; }
    ul li a { background: #6B5531; text-decoration: none; padding: 3px; border: 1px solid #000000; }
    li:hover ul { display: block; }
    li.ch { height: 20px; }
    li.ch:hover { color: #B38103; cursor: crosshair; }
    /*STOP MENU*/
    
    /*SEARCH*/
    h4 { position: absolute; z-index: -1; left: 140px; }
    form.cs { display: none; width: 500px; height: 100%; position: fixed; left: 140px; z-index: -1; }
    div.search:hover form { display: block; }
    /*STOP SEARCH*/
    p.s I was at the doctor for a physical. He gave me a thumbs up but not where you'd expect
    Last edited by 957; 05-09-2010 at 02:05 AM. Reason: spelling

  • #2
    957
    957 is offline
    Banned
    Join Date
    Mar 2010
    Location
    my head
    Posts
    176
    Thanks
    16
    Thanked 0 Times in 0 Posts
    anyone?


  •  

    Posting Permissions

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