Witam serdecznie. Posiadam menu rozwijane,które znajduje się z lewej strony mojej strony (masło maslane) Cóż chcę by się wycentrowało i aby kolor który jest backgroundem był na całą stronę a nie tylko do napisu menu. Nie potrafię tego zrobić proszę o pomoc pozdrawiam.
Kod:
HTML:
<div id=”menu”>
<ol>
<li><a href=”#”>O Nas</a>
<ul>
<li><a href=”#”>link – 1</a></li>
<li><a href=”#”>link – 2</a></li>
<li><a href=”#”>link – 3</a></li>
<li><a href=”#”>link – 4</a></li>
<li><a href=”#”>link – 5</a></li>
</ul>
</li>
<li><a href=”#”>Organizacja</a>
<ul>
<li><a href=”#”>link – 1</a></li>
<li><a href=”#”>link – 2</a></li>
<li><a href=”#”>link – 3</a></li>
</ul>
</li>
<li><a href=”#”>Gospodarka</a>
<ul>
<li><a href=”#”>link – 1</a></li>
<li><a href=”#”>link – 2</a></li>
<li><a href=”#”>link – 3</a></li>
<li><a href=”#”>link – 4</a></li>
</ul>
</li>
<li><a href=”#”>Strzelectwo</a>
<ul>
<li><a href=”#”>link – 1</a></li>
<li><a href=”#”>link – 2</a></li>
<li><a href=”#”>link – 3</a></li>
<li><a href=”#”>link – 4</a></li>
</ul>
</li>
<li><a href=”#”>Kynologia</a>
<ul>
<li><a href=”#”>link – 1</a></li>
<li><a href=”#”>link – 2</a></li>
<li><a href=”#”>link – 3</a></li>
<li><a href=”#”>link – 4</a></li>
</ul>
</li>
<li><a href=”#”>Kultura</a>
<ul>
<li><a href=”#”>link – 1</a></li>
<li><a href=”#”>link – 2</a></li>
<li><a href=”#”>link – 3</a></li>
<li><a href=”#”>link – 4</a></li>
</ul>
</li>
<li><a href=”#”>Koło Łowieckie</a>
<ul>
<li><a href=”#”>link – 1</a></li>
<li><a href=”#”>link – 2</a></li>
<li><a href=”#”>link – 3</a></li>
<li><a href=”#”>link – 4</a></li>
</ul>
</li>
</ol>
</div>
Kod:
CSS:
ol {
list-style-type:none;
position: relative;
padding:0;
margin:0;
font-size:18px;
height:2em;
line-height:2em;
text-align:center;
background-color:#FFF;
}
ol a {
display:block;
position: relative;
color:white;
text-decoration:none;
padding:0 5px;
}
ol > li > a:hover {
color:#003300;
position: relative;
}
ol > li:hover >a{
background-color:#EEE;
position: relative;
}
ol > li > ul {
list-style-type:none;
position: relative;
padding:0;
margin:0;
display:none;
}
ol > li {
float:left;
background-color:#003300;
position: relative;
width:150px;
margin-left:1px;
}
ol > li:first-child {
margin-left:0;
position: relative;
}
ol > li > ul > li > a {
border-top:1px solid #FFF;
position: relative;
}
ol > li > ul > li {
background-color:#EEE;
position: relative;
}
ol > li > ul > li:hover {
background-color:#DDD;
position: relative;
}
ol > li > ul > li:hover a {
color:#09C;
position: relative;
}
ol > li:hover > ul {
display:block;
position: relative;
}