??? CSS ??? ???? ??: ?? ???

CSS? ???? ??? ???? ??? ??? ?? ??? ???? ??? ??? ? ? ????. ??? ?? ??. ?? ??? ??? ??? ? ??? ? ????? ?? CSS? ???? ? ??? ???? ????? ???? ?? ??? ?????.

CSS?? ??? ??? ???? ??? ??? ?? ? ?? ??? ???? ? ????. ??. ????? ?? ?? ??? ???? ????? ???? ???? ?????? ???? ??? ?? ??? ??? ??? ? ????.

?? ??? ??? 3?? ???? ?? ??? ?????. ??? ???? 4?? ?? ????? ???? ??? ? ?????? ????? ?????. ? ?? ? ? ?? ??? ?? ?? ???? ???? ???? ??? ??? ??? ?????.

.third-level-menu {
    /* Position the third level menu absolutely within its parent */
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    /* Define the appearance and height of third level menu items */
    height: 30px;
    background: #999999;
}

.third-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.second-level-menu {
    /* Position the second level menu absolutely within its parent */
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li {
    /* Position and define the appearance of second level menu items */
    position: relative;
    height: 30px;
    background: #999999;
}

.second-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu {
    /* Style the top level menu as a horizontal list */
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li {
    /* Position and define the appearance of top level menu items */
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}

.top-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu li:hover > ul {
    /* Display the next level menu on hover */
    display: inline;
}

/* Styles for the menu links */

.top-level-menu a {
    /* Styling for all links within the menu */
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Stretch the link to cover the entire menu item */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover {
    /* Change link color on hover */
    color: #000000;
}

? ??? HTML? ????? ?? ???? ?????.

<ul>

By ??? CSS? HTML ???? ???? ??? ??? ??? ?? ??? ???? ?? ??? ???? ??? ??? ?? ??? ???? ??? ?? ? ????.

? ??? CSS? ???? ??? ???? ??? ??? ?? ? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!