Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old January 19th, 2007, 02:49 PM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default hover / focus pseudo-class query

Hi

Firstly forgive the padding and formatting, the CSS / HTML below are just in concept phase and are in rough.

So my query... By using the CSSHOVER hack - I'm able to create CSS menus that work in IE using the HOVER pseudo-class.

What I'd like to do is allow users without a mouse to active the sub menu also, I thought FOCUS would do it, but appears not too. I was wondering if anyone had any suggestions?

CSS:
Code:
<style type="text/css">

/* */

body { behavior:url(csshover.htc); }

div#wrapper {     
                width:800px;
                margin: 0 auto;
                text-align:left;
                padding:250px 100px;
                background-color:#ccc;
                font:Verdana, Arial, Helvetica, sans-serif;
                font-size:100%;
}

div#wrapper ul {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
        width:580px;
        background-color:#f00;
        }

div#wrapper ul li {
        float:left;
        position:relative;
} 

div#wrapper ul a {
        display:block;
        width:180px;
        padding:6px;
        text-decoration:none;
        color:#fff;
        float:left;
}

div#wrapper ul a:hover {
text-decoration:underline;
        }

div#wrapper ul li ul {
        margin:0;
        width:180px;
        position:absolute;
        z-index: 500;
        top:-150px;
        left:0;
}

div#wrapper ul li ul li {
        width:180px;
}

div#wrapper ul li ul { display:none;}

div#wrapper ul li:hover ul, div#wrapper ul li:hover ul:hover,
div#wrapper ul li:active ul, div#wrapper ul li:active ul:active {display:block; }


</style>
sample HTML

Code:
<div id="wrapper">[list]
    <li><a href="#" tabindex="1">Visit other Vodafone sites<br /> and get inspired.</a></li>

    <li><a href="#" tabindex="2">Find out all the key facts<br /> about Vodafone.</a></li>
    <li><a href="#" tabindex="3">Working at Vodafone.<br /> Have a peak.</a>
             [list]
                <li><a href="#">Working at Vodafone.<br />Have a peak</a></li>
                <li><a href="#">Take a tour in our offices<br /> and meet the profiles.</a></li>
                <li><a href="#">View our co-workers<br />testamonials.</a></li>

                <li><a href="#">Are you the one we are<br />looking for?</a></li>
            </ul>    

    </li>
</ul>
</div>
__________________
Gaz
Reply With Quote
  #2 (permalink)  
Old January 22nd, 2007, 04:45 PM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

For further info on the hack mentioned above http://www.xs4all.nl/~peterned/hovercraft.html

Gaz
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Setting Query Focus. eusanpe Access VBA 4 June 4th, 2008 10:20 AM
a:hover problems Stevie CSS Cascading Style Sheets 4 May 8th, 2005 04:30 PM
a: hover - style... elladi Dreamweaver (all versions) 2 August 3rd, 2004 06:48 AM
LookupAccountSid returns NT Pseudo Domain Yehuda Pro VB 6 0 January 22nd, 2004 09:40 PM



All times are GMT -4. The time now is 03:35 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.