Witam.
Od dawna posiadam pewną stronkę, w której czegoś mi brakuje, jest to rozwijane menu. Menu jest poziome, wszystko mam poustawiane, tylko nie wiem jak zrobić żeby menu było rozwijane (nie zmieniając wyglądu). Podstawiając menu z różnych stronek rezultatu brak, gdyż tracę wygląd menu. Więc prosiłbym kogoś z Was, aby pomógł mi zmienić CSS'a, tak aby w końcu to menu się normalnie rozwijało : )
Kod i HTML wygląda tak:
CSS
Kod:
body
{
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: Arial;
background-color: Black;
}
img
{
border: 0px;
}
.size
{
width: 950px;
margin: 0px auto;
}
/* header */
.header
{
height: 138px;
overflow: hidden;
background-color: White;
}
.header01
{
height: 91px;
overflow: hidden;
}
.mnav
{
height: 39px;
overflow: hidden;
background-image: url('images/img_38.jpg');
background-repeat: repeat-x;
margin-left: 10px;
width: 930px;
position: relative
}
.mnm ul
{
margin: 0px;
padding: 0px;
}
.mnm li
{
position: relative;
float: left;
min-width: 155px;
line-height: 44px;
text-align: center;
color: #a7a8a8;
font-family: Arial;
background-image: url('images/3_03.jpg');
background-repeat: no-repeat;
background-position: right center;
list-style-type:none; padding-left:0px; padding-right:0px; padding-top:0; padding-bottom:0
}
.mnm a
{
color: #c7c7c7;
text-decoration: none;
font-weight: bold;
font-size: 14px;
display: inline-block;
width: 150px;
height: 100%;
}
.mnm a:hover, .mnm a:active
{
background: url('images/3_021.jpg') repeat-x;
}
.mnimgl
{
position: absolute;
left: 0px;
top: 0px;
}
.mnimgr
{
position: absolute;
right: 0px;
top: 0px;
}
.logo
{
float: left;
padding-top: 11px;
padding-left: 30px;
}
.hright
{
float: right;
width: 422px;
overflow: hidden;
}
.hr01
{
width: 407px;
height: 28px;
background-image: url('images/img_09.jpg');
background-repeat: no-repeat
}
.hr01 div
{
float: left;
line-height: 30px;
font-size: 11px;
}
.hr01 a:link, .hr01 a:visited
{
color: white;
text-decoration: none;
}
.hr01 a:hover, .hr01 a:active
{
color: white;
text-decoration: underline;
}
.hr0101
{
padding-left: 52px;
}
.hr0102
{
padding-left: 30px;
}
.hr02
{
text-align: right;
padding-top: 22px;
padding-right: 22px;
}
/* content */
.content
{
background-color: White;
overflow: hidden;
}
.cmainimg
{
margin-left: 10px;
margin-bottom: 8px;
}
.submenu
{
height: 28px;
margin-left: 10px;
width: 930px;
background-image: url('images/img_97.jpg');
background-repeat: repeat-x;
overflow: hidden;
position: relative;
margin-bottom: 11px
}
.subtext
{
color: #aba6a6;
font-size: 11px;
margin-left: 11px;
margin-top: 6px;
float: left;
width: 100px;
}
.subimag
{
float: right;
margin-top: 6px;
margin-right: 30px;
}
.subimag ul, .subimag li
{
padding: 0px;
margin: 0px;
}
.subimag li
{
list-style: none;
float: left;
padding-left: 4px;
}
.subimag a
{
text-decoration: none;
}
.snimgl
{
position: absolute;
left: 0px;
top: 0px;
}
.snimgr
{
position: absolute;
right: 0px;
top: 0px;
}
.mcontent
{
overflow: hidden;
background-color: White;
/* height: 760px; */
}
.mcleft
{
float: left;
width: 207px;
margin-left: 15px;
/* margin-left: 7px; */
background-color: White;
}
.mcbox01
{
overflow: hidden;
margin-bottom: 15px;
}
.mc01t
{
height: 37px;
background-image: url('images/img_147.jpg');
background-repeat: no-repeat
}
.mc01t2
{
height: 24px;
background-image: url('images/img_240.jpg');
background-repeat: no-repeat;
color: #f3f8fe;
padding-left: 23px;
padding-top: 13px
}
.mc01c
{
border-left: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
width: 205px;
overflow: hidden;
background-color: #f0f0f0;
}
.mc01c ul
{
margin: 0px 15px 0px 15px;
padding: 0px;
}
.mc01c li
{
padding-left: 18px;
margin: 0px;
font-weight: bold;
height: 30px;
line-height: 30px;
}
.mc01cc
{
border-left: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
width: 205px;
overflow: hidden;
background-color: #f0f0f0;
}
.mc01cc li
{
list-style-type: square;
font-family: Arial;
font-size: 12px;
padding-top: 15px;
}
.mc01cc a
{
text-decoration: none;
color: #494949;
}
.mc01cc a:hover, .mc01cc a:active
{
text-decoration: underline;
}
.mc01b
{
height: 5px;
overflow: hidden;
font-size: 0px;
}
.mcright
{
width: 715px;
overflow: hidden;
float: right;
background-color: White;
}
.mc01
{
overflow: hidden;
margin: 0px auto;
}
.mc0101
{
width: 345px;
height: 82px;
background-color: Black;
position: relative;
float: left;
}
.mcr
{
margin-left: 11px;
text-align: left;
color: #ffffff;
}
.mcr01
{
font-size: 19px;
font-family: Arial;
padding-top: 10px;
}
.mcr02
{
padding-top: 13px;
font-size: 11px;
font-family: Arial;
line-height: 16px;
}
.mcl
{
margin-left: 11px;
text-align: left;
color: #ffffff;
}
.mcl01
{
padding-top: 10px;
font-family: Arial;
font-size: 19px;
}
.mcl02
{
padding-top: 13px;
font-size: 11px;
font-family: Arial;
line-height: 16px;
}
.r0101
{
position: absolute;
left: 0px;
top: 0px;
}
.r0102
{
position: absolute;
right: 0px;
top: 0px;
}
.r0103
{
position: absolute;
left: 0px;
bottom: 0px;
}
.r0104
{
position: absolute;
right: 0px;
bottom: 0px;
}
.mc0102
{
margin-left: 14px;
width: 345px;
height: 82px;
background-color: #227ab4;
float: left;
position: relative;
}
.mc01t
{
font-size: 14px;
padding-left: 23px;
padding-top: 11px;
height: 24px;
}
.mc01c li
{
list-style: none;
border-bottom: solid 1px #d7d7d7;
}
.mc01c a
{
text-decoration: none;
color: #3e6680;
}
.mc01c a:hover, .mc01c a:active
{
text-decoration: underline;
}
.mc02
{
padding-top: 24px;
overflow: hidden;
}
.mc0201
{
font-family: Arial;
font-size: 23px;
color: #033759;
float: left;
}
.mc0202
{
padding-right: 18px;
float: right;
}
.mc0203
{
margin-top: 68px;
}
.mc020301
{
font-size: 14px;
color: #494949;
line-height: 18px;
letter-spacing: -0.1px;
width: 700px;
}
.mc020302
{
margin-top: 25px;
margin-bottom: 40px;
margin-left: 65px;
line-height: 25px;
}
.mc020302 a
{
text-decoration: none;
color: #033759;
font-size: 12px;
font-family: Arial;
}
.mc020302 a:hover, .mc020302 a:active
{
text-decoration: underline;
}
.mc020302 li
{
list-style-type: square;
}
.mc020303
{
color: #494949;
font-size: 12px;
margin-bottom: 151px;
line-height: 18px;
letter-spacing: -0.1px;
}
/* footer */
.footer
{
height: 142px;
overflow: hidden;
background-image: url('images/img_276.jpg');
background-repeat: repeat-x;
position: relative;
line-height: 60px;
font-size: 11px;
color: White;
text-align: center;
clear: both;
width: 100%
}
.footer a:link, .footer a:visited
{z
color: white;
text-decoration: none;
}
.footer a:hover, .footer a:active
{
color: white;
text-decoration: underline;
}
HTML
Kod:
<div class="mnav">
<img class="mnimgl" src="images/img_37.jpg" alt="" width="5" height="39" />
<img class="mnimgr" src="images/img_50.jpg" alt="" width="7" height="39" />
<div class="mnm">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="Link2.html">Link2</a></li>
<li><a href="Link3.html">Link3</a></li>
<li><a href="Link4.html">Link4</a></li>
<li><a href="Link5.html">Link5</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
Dodam, że chciałbym, aby np link 2 rozwijał się na "pod-linki"
Z góry dzięki za zainteresowanie i pomoc. Mam nadzieje, że znajdzie się ktoś kto mi w tym pomoże, bo próbowałem wiele zmienić i zawsze coś się waliło, a w CSS najlepszy nie jestem : <
