problema spazio aggiuntivo tra elementi di menu a tendina

[venerba]

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

<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

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

[alemoppo]

Il problema penso sia il margin dei vari <p>. Perché utilizzi i <p> e non scrivi direttamente il testo nei <li>?

Ciao!