Photoshop Question posted in
The official user guide can be found here.

Is there a way to display a dropdown menu inside/on top of the parent body in pure CSS – Photoshop

I’m looking to make a dropdown menu that shows up inside/on top of the parent menu. I would like to do this in pure css. I have made a quick example of what I am looking for(in Photoshop). Here is a link. Here is what I have now, but this makes a normal dropdown menu and not one that stays in the parent container.

CSS:

            .titlebox ul {
                text-align: center;
                font-size: 15px;
                font-family: arial,sans-serif;
                line-height: 32px;
                margin: 0;
                width: 100%;
                background: #555;
                list-style: none;
                border-radius: 2px !important;
                transition: all 0.15s ease;
            }

                .titlebox ul:hover {background: #666;}

                .titlebox ul:active {background: #444;}

                .titlebox ul li {
                    display: block;
                    color: #fff;
                    position: relative;
                    width: 100%;
                    height: 32px !important;
                }

                    .titlebox ul li:hover {
                        background: #666;
                    }

                        .titlebox ul li:hover ul {
                            display: inline;
                            opacity: 1;
                            visibility: visible;
                        }       

                        .titlebox ul li ul {
                            padding: 0;
                            position: absolute;
                            top: 0px;
                            right: 0px;
                            display: none;
                            opacity: 0;
                            visibility: hidden;
                        }

                            .titlebox ul li ul li {
                                display: inline; 
                                color: #fff;
                                text-shadow: 0 -1px 0 #000;
                            }

                                .titlebox ul li ul li:hover {background: #666;}

HTML(Quick):

<ul>
<li>Hi<br/>
    <ul>
        <li><a href="http://www.google.com">Google</a><br/></li>
        <li>HOLA<br/></li>
        <li>HALO<br/></li>
    </ul></li>
</ul>

Any and all help is appreciated! I know this might be kinda confusing but I don’t know how else to explain it. If you have any questions, feel free to ask!

Thanks,
Usama Khan

EDIT 1: Here’s the link to the JSFiddle.

Tags:

2

Answers


  1. 0

    i think this is your looking for .if not ,can you tell me where i am wrong.

                ul {
                text-align: center;
                font-size: 15px;
                font-family: arial, sans-serif;
                line-height: 32px;
                margin: 0;
                padding: 0;
                width: 300px;
                background: #555;
                list-style: none;
                border-radius: 2px !important;
                transition: all 0.15s ease;
            }
            ul:hover {
                background: #666;
            }
            ul:active {
                background: #444;
            }
            ul li {
                display: block;
                color: #fff;
                position: relative;
                width: 100%;
                height: 32px !important;

            }
            ul li:hover {
                background: #666;
            }
            ul li:hover ul {
                display: inline;
                opacity: 1;
                visibility: visible;
        margin-left:10px;
            }
            ul li ul {
                padding: 0;
                position: absolute;
                top: 0px;
                right: 0px;
                display: none;
                opacity: 0;
                visibility: hidden;
            }
            ul li ul li {
                display: inline;
                color: #fff;
                text-shadow: 0 -1px 0 #000;
    float: left;
width: 33%;
            }
  ul li ul li:hover a{
                color: white;         
            }
            ul li ul li:hover {
                background: #777;
            }
    <body>
    <ul>
        <li>Hi
            <ul>
                <li><a href="http://www.google.com">Google1</a></li>
                <li><a href="http://www.google.com">Google2</a></li>
                <li><a href="http://www.google.com">Google3</a></li>
            </ul>
        </li>
    </ul>
</body>
    Login or Signup to reply.
  2. 0

    The HTML

    I removed the /br from the html, because it was forcing the navigation menu to drop down.

    <body>
    <ul>
        <li>Hi
            <ul>
                <li><a href="">HOLA</a></li>
                <li><a href="">HALO</a></li>
            </ul>
        </li>
    </ul>
</body>

    The CSS

    Read the comments in the css for all changes / explanation (ask if there is something you do not understand). I also removed a lot of unnecessary css from your code (and some of it probably still is).

                ul {
                text-align: center;
                font-size: 15px;
                font-family: arial, sans-serif;
                line-height: 32px;
                margin: 0 auto;/*center nav-menu*/
                padding: 0;
                width: 300px;
                background: #555;
                list-style: none;
                border-radius: 2px;
            }
            /*unnecessary now
            ul:hover {
                background: #666;*/
            }
            ul:active {
                background: #444;
            }
            ul li {
                display: block;
                color: #fff;
                position: relative;
                width: 100%;
                height: 100%;
            }        
                /*unnecessary now
                ul li:hover {
                background: #666;
            }*/
/*hide ul and making it the same dimensions as its parent*/
            ul li ul {
                padding: 0;
                position: absolute;
                left: 0px;
                right: 0px;
                top:0px;
                bottom: 0px;
                display: none;
            }
/*make submenu appear on hover of ul*/
            ul li:hover ul {
                display: block;
            }
/*style the subnavigation-list*/
            ul li ul li {
                display: block;
                width: 50%;/*accomidates for 2 list items, adding more will drop them below*/
                float: left;
            }
/*style your buttons*/
            ul li ul li a{
                text-decoration: none;
                color: white;
                text-shadow: 0 -1px 0 #000;
                display: block;
                height: 100%;
                width: 100%;
                background-color: #555;
                box-shadow: 0px 0px 1px 1px white inset;              
            }
/*style button on hover*/
            ul li ul li a:hover{
                background-color: #999; 
            }

    JSFiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search