css menu

Creating a menu using CSSf
<html><head><style type="text/css">

#popuptext a{   text-decoration: none;  }               /* remove the underlining of links */
#popuptext a span{          display:none;   }           /* hide the span part */
#popuptext a:hover span{    display: inline;    }       /* when hovering show the span part */

/* HOW DO WE HAVE A LINK IN THE SPAN!?!!? */

/* VERTICAL PURE CSS MENU */
#nav a{ text-decoration: none;  }               /* remove the underlining of links */

#nav ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}   /* remove any browser indentation and bullets */

/* this hides the nested sub popuptext items */
#nav li ul{ display: none;  }

/* when you hover over the "top level" list items any underlying Unordered Lists will display */
#nav ul li:hover ul {
    display: block;
    position: relative;
    left: 100px;
}


/* HORIZONTAL PURE CSS MENU */
#menu a{    text-decoration: none;  }

#menu ul
{   margin: 0;
    padding: 0;
    list-style-type: none;
}

/* forces list to be horizontal instead of vertical */
#menu li{
float: left;
position: relative;
padding: 10px;
}

#menu ul li ul
{ display: none;    }

#menu ul li a,
#menu ul li a:visited {                    /* unselected top-level menu items */
    display:block;
    float:left;
    text-decoration:none;
    height:24px;
}

#menu ul li:hover a,
#menu ul li a:hover {                        /* selected top-level menu items */
    border-top:1px solid #000;    /* these 2 lines create the push-in illusion */
    height:16px;
}

#menu ul li:hover ul,
#menu ul li a:hover ul {                           /* 2nd level drop-down box */
    display:block;
    position:absolute;
    margin:0;
    top:18px;              /* place us just up underneath the top-level images */
    left:-1px;       /* left-align our drop-down to the previous button border */
    height:auto;      /* the drop-down height from line count */
    width:13.5em;


}




</style>

<div id="menu">
<ul>
    <li><a href="#">main</a>
        <ul>
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub2</a></li>
        </ul>
    </li>
    <li><a href="#">main2</a>
</div>
</ul>



<br \>&nbsp;
<br \>&nbsp;
<br \>&nbsp;

<div id="nav">
<ul>
    <li><a href="#">Who's da Bear?</a>
        <ul>
            <li><a href="http://kittyandbear.net/john">Johnny Bear!</a></li>
            <li><a href="#">is Da Bear!</a></li>
        </ul>
    </li>
    <li><a href="#">More stuff</a>
</div>
</ul>

<hr>
<br \>
<div id="popuptext">
    <a href="#">Who's da Kitteh?
        <span>BobbyCat!</span>
    </a>
</div>



</html>
Published

Category

~285 words

Tags
