0

This is the code for my third level drop down menu.

<ul id="menu">
                <li><a href="ourlovestory.php">Our Love Story</a></li>
                <li><a>Notes</a>
                    <ul>
                        <li><a href="blog.php">Blog</a></li>
                        <li><a href="guestbook.php">Guestbook</a></li>
                            <ul>
                                <li><a href="guestbooksign.php">Sign our Guestbook</a></li>
                            </ul>
                    </ul>
                </li>            
            </ul>

What i want is the third level, Sign our Guestbook, be hidden then be displayed once hovered to Guestbook link.
But my problem is that it is already displayed on the second level.

a47a8f8d739ea29682ef434221109b0d

This is my CSS for this one.

ul 
{
    font-family: 'tr_freehand591regular';
    font-size: 18px;
    margin: 0px;
    padding: 0px;
    list-style: none;   
    z-index:100;
}

ul li
{
    display: block;
    position: relative;
    float: left;
}

li ul
{
    display: none;
}

#menu a 
{
    color: #ff1493;
}

#menu a:hover
{
    color: #98fb98;
}

ul li a
{
    display: block;
    text-decoration: none;
    padding: 5px 15px 5px 15px;
    background: #fff0f5;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover 
{
    background: #3b3b3b;
}

li:hover ul 
{
    display: block;
    position: absolute; 
    visibility: visible;
}

li:hover li 
{
    float: none;
    font-size: 16px;
}

li:hover a 
{ 
    background: #3b3b3b; 
}

Edited by xuexue

1
Contributor
3
Replies
7
Views
4 Years
Discussion Span
Last Post by xuexue
0

Hi! I've already hide it :) Yey!

This is what i added.

li ul, li ul ul li //li ul ul li
{
    display: none;
}

The second problem is how can i display it when hovered?

b5593780a796980c8270f5aa76eaaae6

0

This is done already! Got it!

Displaying when hovered.

Now, i want that displayed link be adjacent to the parent link and not at the bottom.

how could i do taht?

0

got it already, u just have to

li:hover ul li:hover ul li
{
    display: block;
    position: relative; 
    margin: -33px 0px 0px 90px;
}

11653835b208c7be32c2734dae66bf20

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.