allineamento voci sottomenų orizzontale
ciao ragazzi
ho creato un piccolo menu orizzontale con solo una voce che un sottomenu di due link.
Codice HTML:
<div class="menu">
<ul class="menulist">
<li><a href="#">PROGRAM</a></li>
<li><a href="#">REGISTER</a>
<ul>
<li><a href="#">B2B Partecipants</a></li>
<li><a href="#">Conference Attendees</a></li>
</ul>
</li>
<li><a href="#">SPEAKERS</a></li>
<li><a href="#">DIRECTIONS</a></li>
<li><a href="#">HOTEL</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
il mio problema riguarda tre cose.
1. le due voci del sottomenu sono disposte in orizzontale e non in verticale
2. non riesco a colorare le caselle del link ma mi colora tutta la riga
3. (meno importante) se volessi dare al link selezionato sempre lo stato di hover mentre visito la pagina?
ecco il css in uso
Codice:
.menu {
width: 1130px;
margin-left: 54px;
margin-top:-1px;
margin-bottom: -23px;
text-align:center;
}
.menu ul ul {
position: absolute;
visibility:hidden;
top: 317px;
margin-left: -40px;
width: 900px
}
.menu ul li:hover ul {
visibility:visible;
}
.menu:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}
.menulist {
list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
font-size: 0.8em;
}
.menulist li
{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;
}
.menulist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
}
.menu>ul.menulist li a { width: auto; }
ul.menulist li#active a
{
background: #f0e7d7;
color: #000;
}
ul.menulist li a:hover, ul#navlist li#active a:hover
{
color: #000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
grazie mille per l'attenzione
EDIT
risolto con
Codice:
.menu ul ul li {
float: none;
background-color: #f1f1f1;
width: 116px;
}
