menu vyjíždějící dolů + doprava

body {
    
    text-align: center; 
    background-image: url('sweet.gif');
    font-family: Arial;
    font-size: 14px;  
}


{-moz-box-sizing: border-box}

BODY, HTML         { 
background-color: #FFFFCC;
color: black;
font-family: Arial; 
font-size: 10pt; 
scrollbar-base-color: #FFFFCC;
scrollbar-face-color: #FFFFCC; 
scrollbar-shadow-color: #003366; 
scrollbar-highlight-color: #000000; 
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000; 
scrollbar-track-color: #FFFFCC; 
scrollbar-arrow-color: #000000; 


 }

A            { font-family: Arial; color: #70DD3C; text-decoration: none; font-weight: 700 }

A:HOVER      { text-decoration: underline; color: green; font-weight: 700 }

TD {text-align: left}

#obsah {position: absolute; width: 581px; _width: 626px; top: 215px; _top: 178px; left: 213px; padding: 5px; text-align: justify; height: 1300px; _height: 1290px; overflow: auto}

#hlavicka {position: absolute; width: 925px; height: 120px; top: 0; _top: 3px; left: 48px}

#levy {position: absolute; width: 158px; height: 1308px; top: 207px; _top: 177px; left: 50px; background: #70DD3C; border-left: 1px solid black}

#pravy{position: absolute; width: 158px; height: 1308px; top: 207px; _top: 177px; left: 812px; _left: 852px; background: #70DD3C; border-right: 1px solid black}

#menux {z-index: 1; position: absolute; width: 920px; top: 175px; left: 50px; border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;}

#paticka {position: absolute; width: 915px; height: 20px; top: 1512px; left: 50px; background: #70DD3C; color: black; padding: 2px; text-align: center; font-size: 10px; border-right: 1px solid black; border-left: 1px solid black; }

#navs {
  font-weight: bold;
  font-size: 8pt;
  
}

#ramecek {height: auto; padding: 1px; color:black; font-weight: normal; text-align: right; }





/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/padding.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* style the outer div to give it width */
.menu {font-size:10px; _font-weight:bold }

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; height:3em; background:transparent;}

/* style the sub-level lists */
.menu ul ul {width:15em;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left; height:3em;line-height:3em; display:block;}

/* style the sub level list items */
.menu ul ul li {display:block;width:12em;height:auto; line-height:1em;}

/* style the links for the top level */
.menu a, .menu a:visited {display:block; float:left; height:100%; width:8em; _width:12em; font-size:1em; text-decoration:none;color:#000;background:#70DD3C center center; padding:0 0.5em 0 0.5em; border-left:1px solid #70DD3C; border-right:1px solid #000;}
/* hack IE5.x to get the correct the faulty box model and get the width right */
* html .menu a, * html .menu a:visited {width:10em; w\idth:7em;}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;background:#70DD3C; color:#000;width:12em;height:100%;line-height:1em; padding:0.5em 1em; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000;}
* html .menu ul ul a, * html .menu ul ul a:visited  {width:14em; w\idth:12em;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size:1em; z-index:1;}


/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#70DD3C;}
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#70DD3C;}
/* style the sub level 1 background */
.menu ul :hover a.sub1 {background:#FFF;}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {background:#FFF;}

/* style the level hovers */
/* first */
* html .menu a:hover {color:#000; background:#FFF center center; position:relative; z-index:100;}
.menu li:hover {position:relative;}
.menu :hover > a {color:#000;background: #FFF center center;}
/* second */
* html .menu ul ul a:hover{color:#000;background:#FFF; position:relative; z-index:110;}
.menu ul ul li:hover {position:relative;}
.menu ul ul :hover > a {color:#000;background:#FFF;}
/* third */
* html .menu ul ul ul a:hover {background:#FFF; position:relative; z-index:120;}
.menu ul ul ul :hover > a {background:#FFF;}
/* fourth */
.menu ul ul ul ul a:hover {background:#FFF; position:relative; z-index:130;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:3em; left:0; width:14em;}

/* position the third level flyout menu */
.menu ul ul ul{left:12em;top:0;width:14em;}


/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible; height:auto; padding:0 3em 3em 3em; left:-3em;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible; left:9em;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">

<div id="menux"><div class="menu">
<ul>

<li><a href="index.php" target="ramecek">Domů</a></li>

<li><a href="#" target="ramecek">O skupině </a>
<table>
<tr><td>
<ul>
<li><a href="o skupine.php" target="ramecek">O skupině</a></li>
<li><a href="martisek.php" target="ramecek">Martisek</a></li>
<li><a href="aduska.php" target="ramecek">Aduska</a></li>
<li><a href="manazer.php" target="ramecek">Manažer</a></li>
</ul>
</td></tr>
</table>
</li>

<li><a href="#" target="ramecek">Texty</a>
<table>
<tr><td>
<ul>
<li><a href="maminko_miluj_me.php" target="ramecek">Maminko miluj mě</a></li>
<li><a href="sladka_hvezda.php" target="ramecek">Sladká hvězda</a></li>
<li><a href="velkej_tresk.php" target="ramecek">Velkej třesk</a></li>
<li><a href="zivot.php" target="ramecek">Život</a></li>
<li><a href="silena_party.php" target="ramecek">Šílená Párty</a></li>
</ul>
</td></tr>
</table>
</li>

<li><a href="klipy.php" target="ramecek">Klipy</a></li>

<li><a href="koncerty.php" target="ramecek">Koncerty</a></li>

<li><a href="#" target="ramecek">Fanklub </a>
<table>
<tr><td>
<ul>
<li><a href="fanklub registrace.php" target="ramecek">Registrace</a></li>
<li><a href="fanklubaci.php" target="ramecek">Fanklubáci</a></li>
<li><a href="login.php" target="ramecek">Přihlášení</a></li>
</ul>
</td></tr>
</table>
</li>

<li><a href="novinky.php" target="ramecek">Novinky</a></li>

<li><a href="kontakty.php" target="ramecek">Kontakty</a></li>

</ul>
</div>