CODEWITHSUNDEEP
htmlcss
Dineshp
Dineshp

Reputation: 31

HTML Submenu disappearing when trying to hover over it

i created an HTML menu that has a submenu, however when i hover over the main menu and it shows the submenu, i cant get access to it. It disappears before i can move my mouse down to navigate to it. I dont know what i am doing wrong, maybe with my code someone can help out. thanks

#header ul { position: absolute; top: 88px; left: 0; }
#header ul li { display: inline;}
#header ul li a { font-size: 11px; text-decoration: none; text-transform: uppercase; margin-right: 20px; color: #fff; line-height: 2em;}
#header ul li ul{ position: static;display: none; z-index: 999;top:150%;}
#header ul li:hover a { font-weight:bold; color: #000000}
#header ul li:hover ul { display: block; position:absolute;}

Edited to show HTML

     <ul>
                <li><a href="/Default.aspx">Home</a>              
                </li>
                <li>
                    <a href="/Cover/HRMS.aspx">HRMS</a>
                    <ul>
                    <li>
                    <a href="/Cover/HRMS.aspx">Position</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">COA</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Employee</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Estate</a>
                    </li>
                    </ul>
                </li>
                <li>
                    <a href="/Cover/EmployeeMaintenance.aspx">Employee Maintenance</a>
                </li>
                <li>
                <a href="/Cover/Payroll.aspx">Payroll</a>
                </li>
                <li>
                <a href="/Cover/DataTransfer.aspx">Data Transfer</a>
                </li>
                <li>
                <a href="/Cover/Reports.aspx">Reports</a>
                </li>
                <li>
                <a href="/Cover/Administration.aspx">Administration</a>
                </li>
                <li>
                <a href="/Cover/Help.aspx">Help</a>
                </li>
              </ul>

Upvotes: 2

Views: 7795

Answers (3)

Gaʀʀʏ
Gaʀʀʏ

Reputation: 4540

The problem is a disconnect between the main and the children <ul>.

In your style ul li ul { position: static;display: none; z-index: 999;top:150%;}

The top:150%; creates the disconnect (so you hover over nothing instead of hitting the submenu's :hover logic when you hover from ul li to ul li ul). You can try using padding-top instead:

ul li ul{ position: static;display: none; z-index: 999; padding-top:10px;}

Edit: Here is a working nav menu example you can look at.

Edit 2: Looks like it works in Firefox and Chrome, but not IE.

Upvotes: 1

Ricardo Arrigoni
Ricardo Arrigoni

Reputation: 11

I wrote one article about Dropdown menu in Portuguese, but I guess it will help you with google translate or something like that.

Check it out: http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx

Upvotes: 0

Terry
Terry

Reputation: 66093

You will need a direct child selector, somewhere along the line of:

li:hover > ul { display: block; (...) }

This means that the child <ul> in the list will be displayed when it's direct parent <li> has been hovered upon.

Upvotes: 0

Related Questions