Jump to content

Recommended Posts

Hi Fugix,

 

Most sub-menu's are unordered lists (<ul>) inside of another unordered list. In a nutshell the sub in a normal state is placed outside the view of the screen by using indent or margin or set to display none; (so you don't see it)

Now on hover state, it's than set back to display:block; or set to it's normal position depending on the technique used. (so you see it)

 

example on what happens on the menu here at phpfreaks.com:

 

active state (normal state)

.dropmenu li ul { /* notice the ul inside the li declaration */
    background: url("../images/theme/menu_gfx.png") no-repeat scroll 0 -130px transparent;
    border-bottom: 1px solid #999999;
    display: none;
    font-weight: normal;
    padding: 7px 0 0;
    position: absolute;
    width: 19.2em;
    z-index: 90;
}

 

hover state

.dropmenu li:hover ul {
    display: block;
}
index.css?rc5 (line 1215)
.dropmenu li ul {
    background: url("../images/theme/menu_gfx.png") no-repeat scroll 0 -130px transparent;
    border-bottom: 1px solid #999999;
    /* display: none;  this one gets overwritten*/
    font-weight: normal;
    padding: 7px 0 0;
    position: absolute;
    width: 19.2em;
    z-index: 90;
}

 

as far as the image used that's just a nicely positioned sprite image which you can see in the source above.

 

small tip. get firefox and install firebug, that allows you to inspect the source code in a nice way and allows you to adjust it in real time. video on my blog if you have no idea how to use it.

Link to comment
https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1207320
Share on other sites

There are tutorials available on how to it with pure CSS without any graphics, I've tried to follow them but never got it to work. I couldn't get the speech bubbles to work either.

 

if you mean the triangle....I really doubt that a triangle can be made with pure css apart from an extremely redundant ,div in div in div mark up untill you reach a pyramid shape. as far as the menu with the hover, yes this can be done with pure css, but that's only true for browsers that accept the pseudo hover class. And as you might have guessed it, IE 6 and lower don't so you need to mimic that with javascript.

 

so if this is solved. mark it!  we love green here :)

Link to comment
https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1209672
Share on other sites

ah the "content" property. although it's considered wrong to use, it might be worth it indeed. nice for pointing that out chaseman. I might very well use it.

Link to comment
https://forums.phpfreaks.com/topic/234923-dropdown-triangle/#findComment-1209705
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.