Windows 7 Support
Become a Fan of PCHF on Facebook!
 User Reviews - Add Yours!
The PCHF Lounge
Go Back   PC Help Forum » Web & Networking » Web Design
Reload this Page Pending: "a:hover"
Register for a Free Account

Web Design - "a:hover" posted in the Web & Networking forums; We're going off this right? Code: <div id="menu"> <ul> <li><h2>CSS Drop Down Menus</h2> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title=" SEO Consultants Directory">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> ...

Advertisement
Advertisement

Reply
Free PC Performance Scan
Page 3 of 6 12 3 456
Old 11-12-2009   #15
Web Developer
 
DarkLord7854's Avatar
 
Join Date: Sep 2005
Location: West Palm Beach, FL
Posts: 1,862
PC Experience: Of Epic Proportions
Default re: "a:hover"
We're going off this right?

Code:
<div id="menu">
<ul>
  <li><h2>CSS Drop Down Menus</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
        <ul>
          <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
          <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
          <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Vertical CSS Pop-Out Menu</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
      <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
        <ul>
          <li><a href="index.html#">tanfa Tutorial</a><!-- link to seo vertical tut -->        
            <ul>
              <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
              <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>            
              <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
              <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
              <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>            
              <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Horizontal Drop & Pop Menu</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
      <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
        <ul>
          <li><a href="index.html#">tanfa Tutorial</a><!-- link to horizontal tut -->        
            <ul>
              <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
              <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>            
              <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
              <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
              <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>            
              <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>                            
</div>
__________________
Custom WordPress, ZenCart, Joomla, vBulletin, etc installs and skinning, PM/E-Mail for a quote
DarkLord7854 is offline   Reply With Quote
Old 11-13-2009   #16
Silver Member
 
Join Date: Dec 2007
Posts: 172
PC Experience: Experienced
Default re: "a:hover"
Yes we are DarkLord, but for the extra ul I put in the CSS, I also added it to the markup in the HTML code you just posted. Basically I tried this on my own to experiment with drop-down menus and to see if I could do something on my own.
Tygra is offline   Reply With Quote
Old 11-13-2009   #17
Silver Member
 
Join Date: Dec 2007
Posts: 172
PC Experience: Experienced
Default re: "a:hover"
By the way DarkLord, how do you put the code in that scrollable box I've seen people and you use? Looks like it saves quite a bit of space on the posts.
Tygra is offline   Reply With Quote
Old 11-15-2009   #18
Web Developer
 
DarkLord7854's Avatar
 
Join Date: Sep 2005
Location: West Palm Beach, FL
Posts: 1,862
PC Experience: Of Epic Proportions
Default re: "a:hover"
Originally Posted by Tygra View Post
By the way DarkLord, how do you put the code in that scrollable box I've seen people and you use? Looks like it saves quite a bit of space on the posts.
It's the [ CODE ] tag (remove spaces)

Originally Posted by Tygra View Post
Yes we are DarkLord, but for the extra ul I put in the CSS, I also added it to the markup in the HTML code you just posted. Basically I tried this on my own to experiment with drop-down menus and to see if I could do something on my own.

Let me clean up the code a bit for you, should make it easier, here:

Code:
<div id="menu">
    <ul class="level1">
      <li><h2>CSS Drop Down Menus</h2>
        <ul class="level2">
          <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
            <ul class="level3">
              <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
              <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
              <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    
    <ul class="level1">
      <li><h2>Vertical CSS Pop-Out Menu</h2>
        <ul class="level2">
          <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
          <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
            <ul class="level3">
              <li><a href="index.html#">tanfa Tutorial</a><!-- link to seo vertical tut -->        
                <ul class="level4">
                  <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
                  <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>            
                  <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
                  <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
                  <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>            
                  <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    
    <ul class="level1">
      <li><h2>Horizontal Drop & Pop Menu</h2>
        <ul class="level2">
          <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
          <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
            <ul class="level3">
              <li><a href="index.html#">tanfa Tutorial</a><!-- link to horizontal tut -->        
                <ul class="level4">
                  <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
                  <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>            
                  <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
                  <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
                  <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>            
                  <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>                            
</div>

If you notice, I added classes to the ULs, which makes it easier to see which ul is what level, and thus makes creating the CSS a lot easier.

Here's what the CSS would look like:

Code:
<style>
    #menu {
        background:#EEEEEE none repeat scroll 0 0;
        width:12em;
    }
    #menu ul.level1 {
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
        margin:0;
        padding:0;
    }
    #menu a, #menu h2 {
        border-color:#CCCCCC #888888 #555555 #BBBBBB;
        border-style:solid;
        border-width:1px;
        display:block;
        font-family:arial,helvetica,sans-serif;
        font-size:11px;
        font-size-adjust:none;
        font-stretch:normal;
        font-style:normal;
        font-variant:normal;
        font-weight:bold;
        line-height:16px;
        margin:0;
        padding:2px 3px;
    }
    #menu h2 {
        background:#000000 none repeat scroll 0 0;
        color:#FFFFFF;
        text-transform:uppercase;
    }
    #menu a {
        background:#EFEFEF none repeat scroll 0 0;
        color:#000000;
        text-decoration:none;
    }
    #menu a:hover {
        background:#FFFFFF none repeat scroll 0 0;
        color:#AA0000;
    }
    #menu li {
        position:relative;
    }
    #menu ul.level1 ul.level2 ul.level3 {
        left:100%;
        position:absolute;
        top:0;
        width:100%;
    }
    div#menu ul.level1 ul.level2 ul.level3, div#menu ul.level1 ul.level2 li:hover ul.level3 ul.level4 {
        display:none;
    }
    div#menu ul.level1 ul.level2 li:hover ul.level3, div#menu ul.level1 ul.level2 ul.level3 li:hover ul.level4 {
        display:block;
    }
</style>

Let me know if that makes more sense to you now
__________________
Custom WordPress, ZenCart, Joomla, vBulletin, etc installs and skinning, PM/E-Mail for a quote
DarkLord7854 is offline   Reply With Quote
Old 11-15-2009   #19
Silver Member
 
Join Date: Dec 2007
Posts: 172
PC Experience: Experienced
Default re: "a:hover"
Right DarkLord that is looking more straight forward, but I'm still a touch confused in certian areas...

Why in "#menu" are there only "ul.level1 ul.level2 ul.level3" when there is "ul.level4" in the markup? why is ul.level4 not included.

And I thought I understood about why certain elements where in the "display: none;" and "display: block;" catergory, but I think I don't.

Basically, this part of the CSS is confusing me.

Code:
div#menu ul.level1 ul.level2 ul.level3, div#menu ul.level1 ul.level2 li:hover ul.level3 ul.level4 {
        display:none;
    }
    div#menu ul.level1 ul.level2 li:hover ul.level3, div#menu ul.level1 ul.level2 ul.level3 li:hover ul.level4 {
        display:block;
    }
I still don't understand why the li:hover is positioned where it is between the ul's. I thought I got your example with the divs and a's on page 2, but then from that I thought you would have had to put in the code above...

"ul.level1 li:hover ul.level2 ul.level3 ul.level4"

Somewhere in there.

Do you understand what I mean?
Tygra is offline   Reply With Quote
Old 11-15-2009   #20
Web Developer
 
DarkLord7854's Avatar
 
Join Date: Sep 2005
Location: West Palm Beach, FL
Posts: 1,862
PC Experience: Of Epic Proportions
Default re: "a:hover"
Originally Posted by Tygra View Post
Right DarkLord that is looking more straight forward, but I'm still a touch confused in certian areas...

Why in "#menu" are there only "ul.level1 ul.level2 ul.level3" when there is "ul.level4" in the markup? why is ul.level4 not included.

And I thought I understood about why certain elements where in the "display: none;" and "display: block;" catergory, but I think I don't.

Basically, this part of the CSS is confusing me.

Code:
div#menu ul.level1 ul.level2 ul.level3, div#menu ul.level1 ul.level2 li:hover ul.level3 ul.level4 {
        display:none;
    }
    div#menu ul.level1 ul.level2 li:hover ul.level3, div#menu ul.level1 ul.level2 ul.level3 li:hover ul.level4 {
        display:block;
    }
I still don't understand why the li:hover is positioned where it is between the ul's. I thought I got your example with the divs and a's on page 2, but then from that I thought you would have had to put in the code above...

"ul.level1 li:hover ul.level2 ul.level3 ul.level4"

Somewhere in there.

Do you understand what I mean?

The way CSS works is like this:

You define an element, or element path, and define attributes for it.

So as I was saying, if you have:

Code:
<div>
       <div>
              <div>
              </div>
       </div>
</div>
And you want to only assign attributes to the third div, your css will show:

Code:
div div div { css }
However if you want to reference the second div, you'll write
Code:
div div { css }
It's selective assignment of attributes, you reference parent elements of the child element you wish to assign CSS attributes to. Of course, if that child element you're referencing also has child elements, they can inherit certain attributes from it (unless you use IDs/Classes) and may need to be over-ridden by then also referencing them.

Example:

Code:
div div { color:#000000 }

div div div { color:#FFFFFF }
The second div will have black text, and the third one will have white text.


Does that make more sense?



As for the display:none and display:block, if you look at the CSS, there's an li:hover element being referenced for the display:block, which means it gets activated when you hover your mouse over the li, which creates the CSS fly-out menu by setting it to display instead of not displaying.
__________________
Custom WordPress, ZenCart, Joomla, vBulletin, etc installs and skinning, PM/E-Mail for a quote
DarkLord7854 is offline   Reply With Quote
Old 11-16-2009   #21
Silver Member
 
Join Date: Dec 2007
Posts: 172
PC Experience: Experienced
Default re: "a:hover"
I think I understand DarkLord, but could you do something for me please?

In this drop down menu we've been going over you get two other menus coming out of the first original visible menu when you hover over with the mouse. You go over one link and it take you to a side menu which then takes you to another one.

Could you please write the CSS if we were just going to have one side menu coming from first visible menu?

Basically the changes needed for just one side menu.

All I need to see is the three CSS styles from the bottom one to the third from bottom.

These...


Code:
#menu ul.level1 ul.level2 ul.level3 {
        left:100%;
        position:absolute;
        top:0;
        width:100%;
    }
    div#menu ul.level1 ul.level2 ul.level3, div#menu ul.level1 ul.level2 li:hover ul.level3 ul.level4 {
        display:none;
    }
    div#menu ul.level1 ul.level2 li:hover ul.level3, div#menu ul.level1 ul.level2 ul.level3 li:hover ul.level4 {
        display:block;
    }

Hope you understand what I mean?
Tygra is offline   Reply With Quote

Reply
Page 3 of 6 12 3 456

Bookmarks

Tags
ahover, Open:, Pending:

« Dreamweaver - page looks different in browser | Floating text around a box that's in a box »
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Linear Mode Linear Mode

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 On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are On


Site Map - Top

All times are GMT. The time now is 08:16 AM.
Powered by vBulletin
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.3.2