Horizontální menu Vyřešeno
Napsal: 29 bře 2013 19:05
Zdravim, dělám si web a mám horizontální menu přes CSS, a chtěl bych udělat z jedné položky další vysouvací menu .. například když najedu na položku O Messim, aby vyskočilo další menu vertikální kde budou na výběr třeba další dvě ...
kód HTML:
<div id="menu-box">
<ul id="menu" class="clearfix">
<li class="first"><a class="active" href="index.html">Home</a></li>
<li><a href="omessim.html">O Messim</a></li>
<li><a href="klub.html">Současný klub</a></li>
<li><a href="repre.html">Reprezentace</a></li>
<li><a href="uspechy.html">Úspěchy</a></li>
<li><a href="charakteristika.html">Charakteristika</a></li>
<li><a href="osobnizivot.html">Osobní život</a></li>
</ul>
</div></div>
kód CSS
#menu-box {background: #494949;width:930px;margin: 0 auto;border-style:solid;
border-width:thin;border-radius:3px;border-color:#474040;}
#menu {width:700px; margin: 0 auto;}
#menu li {
float: left;
display: inline;
list-style-type: none;
text-align: center;
}
#menu li a {
font-size: 16px;
font-style: normal;
text-decoration: none;
color: #FFF;
margin: 0 auto;
display: inline;
line-height: 35px;
padding: 0 11px;
border-right: 1px solid #C0082A;
}
#menu li.first a {border-left: 1px solid #C0082A;}
.clearfix:after {
display: block;
clear: both;
visibility: hidden;
height: 0;
font-size: 0;
content: ' ';
}
Dík za rady
kód HTML:
<div id="menu-box">
<ul id="menu" class="clearfix">
<li class="first"><a class="active" href="index.html">Home</a></li>
<li><a href="omessim.html">O Messim</a></li>
<li><a href="klub.html">Současný klub</a></li>
<li><a href="repre.html">Reprezentace</a></li>
<li><a href="uspechy.html">Úspěchy</a></li>
<li><a href="charakteristika.html">Charakteristika</a></li>
<li><a href="osobnizivot.html">Osobní život</a></li>
</ul>
</div></div>
kód CSS
#menu-box {background: #494949;width:930px;margin: 0 auto;border-style:solid;
border-width:thin;border-radius:3px;border-color:#474040;}
#menu {width:700px; margin: 0 auto;}
#menu li {
float: left;
display: inline;
list-style-type: none;
text-align: center;
}
#menu li a {
font-size: 16px;
font-style: normal;
text-decoration: none;
color: #FFF;
margin: 0 auto;
display: inline;
line-height: 35px;
padding: 0 11px;
border-right: 1px solid #C0082A;
}
#menu li.first a {border-left: 1px solid #C0082A;}
.clearfix:after {
display: block;
clear: both;
visibility: hidden;
height: 0;
font-size: 0;
content: ' ';
}
Dík za rady