The main <ul> submenu does not appear on the page

Question

I have a basic horizontal html menu with a structure like this:

<ul>
    <li>
       Menu item 1
       <ul class="sub-menu">
            <li>Sub item 1</li>
       </ul>
    </li>
    <li>Menu item 2</li>
</ul>

See http://jsfiddle.net/4EmJ9/ for more details . (The menu in question contains Bernalillo text)

Problem: .sub-menucompletely hidden. I see that it is correctly positioned (using the validation element), and I also played with the heights of z-index and containers, but to no avail.

Limitation: I can change ONLY css. HTML (which can make you cry) is blocked at Sharepoint until the end of time. Javascript editing is also missing.

Any thoughts on how to create a submenu?

Answer 1

http://jsfiddle.net/4EmJ9/2/

overflow: hidden 2 . css.

.customNav {
    /*overflow: hidden;*/
    height: 30px;
    background: #5e5e5e;
}

.s4-tn {
    margin-left: 0px;
    /*overflow: hidden; */
    height: 30px;
}

Answer 2

, css, , :

JSFidle

<ul class="menu">
    <li>
       Menu item 1
       <ul class="sub-menu">
            <li>Sub item 1</li>
       </ul>
    </li>
    <li>Menu item 2</li>
</ul>


ul{margin:0;padding:0;}

.menu > li
{
    float:left;
    list-style-type:none;
    margin-left:15px;
}

.sub-menu
{
    display:none;
}

.sub-menu li
{
    float:left;
    list-style-type:none;
}

.menu li:hover .sub-menu
{
    display:block;
}

, , , , ...