gego.info

Forget javaScripts or other ’stuff’ for making dynamic Menus, its easier and better with CSS.

NOTE: For IE usage download IE Hover Hack here: csshover.htc
Here you can see a preview of dynamic menu: goTo dynamic css menu

CSS Dynamic Menu Code

/*You need to set behavior in body so IE Hack can Work*/
body {
    font-size: 62.5%;
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    text-align: center;     
/*IE Hover Hack*/
    behavior:url(“csshover.htc”);
}

a:hover {
    background: yellow;
}

ul {
    margin: 0;
    padding: 0;
    display: inline;
}

ul li {
    list-style-type: none;
    position: relative;
    margin: 0;
    padding: 0;
    background: #FFE;
    width:10em;
    border: 1px solid #000;
    /*First list items float left*/
    float: left;
}

ul li a {
    display: block;
    padding: 5px 7px;
    text-decoration: none;
    background: #FFF;
}

ul li ul li {
    /*Stop floating left*/
    clear: both;
}

/*Here the hovering starts*/
ul li:hover ul {
    width: 10em;
    top: 2.3em;
    left: -0.1em;
}

ul ul, li:hover ul ul {
    display:none;
    width: 10em;
}

li:hover ul {
    display:block;
    position: absolute;
    left: 100%;
}

li:hover li:hover ul {
    display:block;
    position: absolute;
    top: -0.1em;
    left: 100%;
}

Everyone knows the problem: Webpages which have too much text on too small space or vica versa. The solution is either make the page fluid or fixed, and with the help of css this is pretty simple:

fixed

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
}
#page {
    margin: 0 auto;
    padding: 0;
    width: 760px;
    background: #fff;
}

click here for example Here the page never changes its size.
Try and change the size of the browser window.

fluid

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
}
#page {
    margin: auto;
    padding: 0;
    width: 90%;
    background: #fff;
}

click here for example Here the page always changes its size to fit to the resolution or browser window
Try and change the size of the browser window.