problema spazio aggiuntivo tra elementi di menu a tendina
buongiorno a tutti.
stavo sviluppando una parte di un sito web, e ne posto solo la parte interessata…
il codice che posto (sia html che css) è di un menu a tendina.
Codice html
Codice:
<div id="contenitore_menu_1">
<ul id="menu_1">
<li id="scelta_menu_1">
<p>
1
</p>
</li>
<li id="scelta_menu_2">
<p>
2
</p>
</li>
<li id="scelta_menu_3">
<p>
3
</p>
</li>
<li id="scelta_menu_4">
<p>
4
</p>
</li>
<li id="scelta_menu_5">
<p>
5
</p>
<ul id="sotto_menu_1">
<li id="scelta_sotto_menu_1">
<p>
1
</p>
</li>
<li id="scelta_sotto_menu_2">
<p>
2
</p>
</li>
<li id="scelta_sotto_menu_3">
<p>
3
</p>
</li>
</ul>
</li>
</ul>
</div>
Codice css
Codice:
div[id="contenitore_menu_1"]{
position: relative;
top: 150px;
right: 100px;
bottom: 0px;
left: 100px;
}
div[id="contenitore_menu_1"] ul[id="menu_1"]{
padding: 0px;
margin: 0px;
}
div[id="contenitore_menu_1"] ul[id="menu_1"] li[id*="scelta_menu"]{
position: relative;
float: left;
width: 200px;
list-style: none;
background-color: #454545;
}
div[id="contenitore_menu_1"] ul[id="menu_1"] li[id*="scelta_menu"]:hover{
/*colori e bordi*/
background-color: #4d4d4d;
}
div[id="contenitore_menu_1"] ul[id="menu_1"] li[id*="scelta_menu"] ul[id*="sotto_menu"]{
position: absolute;
top: 50px;
visibility: hidden;
}
div[id="contenitore_menu_1"] ul[id="menu_1"] li[id*="scelta_menu"]:hover ul[id*="sotto_menu"]{
visibility: visible;
}
div[id="contenitore_menu_1"] ul[id="menu_1"] li[id*="scelta_menu"] ul[id*="sotto_menu"] li[id*="scelta_sotto_menu"]{
width: 200px;
height: 50px;
background-color: #454545;
}
div[id="contenitore_menu_1"] ul[id="menu_1"] li[id*="scelta_menu"] ul[id*="sotto_menu"] li[id*="scelta_sotto_menu"]:hover{
background-color: #4d4d4d;
}
se lo eseguite potete vedere che compare uno spazio tra ogni singolo tag li del menu a tendina verticale. non saprei come risolvere.
Grazie per l' aiuto e scusate del disturbo
