Kłopot z menu i podmenu - Wersja do druku

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>baza</title>



<link rel="stylesheet" media="all" type="text/css" href="menu_style.css" />

<!--[if IE]>

<link rel="stylesheet" media="all" type="text/css" href="ie.css" />

<![endif]-->



</head>



<body>

<div class="nav">

<div class="table">





<ul class="select"><li><a href="#"><b>Dane Podstawowe</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Parametry krytyczne</a></li>

        

    </ul>

</div>

</li>

</ul>



<ul class="select"><li><a href="#"><b>Dane Referencyjne</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Sample Menu 2</a></li>

        <li><a href="#">Sample Menu 2</a></li>

        <li><a href="#">Sample Menu 2</a></li>

        <li><a href="#">Sample Menu 2</a></li>

        <li><a href="#">Sample Menu 2</a></li>

    </ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Właściwości Cieczy</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Ciepło molowe cieczy</a></li>

        <li><a href="#">Przewodnictwo cieple cieczy</a></li>

        <li><a href="#">Lepkość cieczy</a></li>

        <li><a href="#">Napięcie powierzchniowe</a></li>

            </ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Właściwości Pary</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Sample Menu 4</a></li>

        <li><a href="#">Sample Menu 4</a></li>

        <li><a href="#">Sample Menu 4</a></li>

        <li><a href="#">Sample Menu 4</a></li>

        <li><a href="#">Sample Menu 4</a></li>

    </ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Właściwości ciała stałego</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Sample Menu 5</a></li>

        <li><a href="#">Sample Menu 5</a></li>

        <li><a href="#">Sample Menu 5</a></li>

        <li><a href="#">Sample Menu 5</a></li>

        <li><a href="#">Sample Menu 5</a></li>

    </ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Azeotropy</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Sample Menu 6</a></li>

        <li><a href="#">Sample Menu 6</a></li>

        <li><a href="#">Sample Menu 6</a></li>

        <li><a href="#">Sample Menu 6</a></li>

        <li><a href="#">Sample Menu 6</a></li>

    </ul>

</div>

</li>

</ul>



<ul class="select"><li><a href="#"><b>Parametry palności</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Sample Menu 7</a></li>

        <li><a href="#">Sample Menu 7</a></li>

        <li><a href="#">Sample Menu 7</a></li>

        <li><a href="#">Sample Menu 7</a></li>

        <li><a href="#">Sample Menu 7</a></li>

    </ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Inne</b></a>

<div class="select_sub">

    <ul class="sub">

        <li><a href="#">Sample Menu 8</a></li>

        <li><a href="#">Sample Menu 8</a></li>

        <li><a href="#">Sample Menu 8</a></li>

        <li><a href="#">Sample Menu 8</a></li>

        <li><a href="#">Sample Menu 8</a></li>

    </ul>

</div>

</li>

</ul>









</div>

</div>



<br />

</body>

</html>

Kod:

.nav {

height:35px; 

background: url(images/bg.gif) repeat-x; 

position:relative; 

font-family:arial, verdana, sans-serif; 

font-size:11px; 

width:100%; 

z-index:100;

margin:0;

padding:0;

}



.nav .table {

display:table; 

margin:0 auto;

}



.nav .select,

.nav .current {

margin:0; 

padding:0; 

list-style:none; 

display:table-cell; 

white-space:nowrap;

}



.nav li {

margin:0; 

padding:0; 

height:auto; 

float:left;

}



.nav .select a {

display:block; 

height:35px; 

float:left; 

font-weight:bold;

background: url(images/bg.gif); 

padding:0 30px 0 30px; 

text-decoration:none; 

line-height:35px; 

white-space:nowrap; 

color:#2b3238;

}





.nav .select a:hover, 

.nav .select li:hover a {

background: url(images/hover.gif); 

padding:0 0 0 15px; 

cursor:pointer; 

color:#2b3238;

}



.nav .select a b{

    font-weight:bold;

    }



.nav .select a:hover b, 

.nav .select li:hover a b {

display:block; 

float:left; 

padding:0 30px 0 15px; 

background:url(images/hover.gif) right top; 

cursor:pointer;

}



.nav .select_sub {

display:none;

}



/* IE6 only */

.nav table {

border-collapse:collapse; 

margin:-1px; 

font-size:1em; 

width:0; 

height:0;

}



.nav .sub {

display:table; 

margin:0 auto; 

padding:0; 

list-style:none;

}



.nav .sub_active .current_sub a, 

.nav .sub_active a:hover {

background:transparent; 

color:#2b3238;

}



.nav .select :hover .select_sub, 

.nav .current .show {

display:block; 

position:absolute; 

width:100%; 

top:35px; 

background:url(images/back.gif); 

padding:0; 

z-index:100; 

left:0; 

text-align:center;

}



.nav .current .show {

z-index:10;

}



.nav .select :hover .sub li a, 

.nav .current .show .sub li a {

display:block; 

float:left; 

background:transparent; 

padding:0 10px 0 10px; 

margin:0; 

white-space:nowrap; 

border:0; 

color:#2b3238;

}



.nav .current .sub li.sub_show a {

color:#2b3238; 

cursor:default; 

}



.nav .select .sub li a {

    font-weight:normal;

}



.nav .select :hover .sub li a:hover, 

.nav .current .sub li a:hover {

visibility:visible; 

color:#73a0d2; 

}