CSS dropdown menu alignment issues

Question

I'm working on a pure CSS dropdown menu but ran into some alignment issues.

Specifically: the sub-menu items get moved over to the right when hovering over their respective menu item. Here's the fiddle: https://jsfiddle.net/fhakjnhe/5/

HTML

<body>

<header>

<div id="menustrip">

                <div id="logo_container">
                    <h1>LOGO</h1>                   
                </div>

                <div id="menu">
                    <nav>
                        <ul>
                            <li><a id="active-page" href="#">AAA</a></li
                            ><li><a href="#">BBB</a>
                                <ul>
                                    <li style="background-color:red;">A</li>
                                    <li>B</li>
                                </ul>
                            </li
                            ><li><a href="#">CCC</a></li
                            ><li><a href="#">DDD</a></li
                            ><li><a href="#">EEE</a>
                                <ul>
                                    <li style="background-color:blue;">A2</li>
                                    <li>B2</li>
                                </ul>
                            </li
                            ><li><a href="#">FFF</a></li
                            ><li><a id="quote-page" href="#">GGG</a></li>
                        </ul>


                    </nav>              
                </div>

            </div>

Related CSS

header #menustrip #menu nav ul
        {
            list-style: none;               
            position: relative;              
        }

            header #menustrip #menu nav ul li
            {
                display: inline-block;                  
            }

                header #menustrip #menu nav a
                {
                    display: block;
                    color: #1d120c;
                    font-weight: bold;
                    font-size: 18px;
                    padding: 0 /*15px*/10px;
                    margin: 0;
                    border: 2px solid transparent;
                }

                header #menustrip #menu nav a:hover 
                {
                    border-left: 2px solid #97bc14;
                    border-right: 2px solid #97bc14;
                    color: #97bc14
                }

                header #menustrip #menu nav a#active-page
                {
                    color: #97bc14
                }

                header #menustrip #menu nav a#quote-page
                {
                    margin-left: 15px;
                    border: 2px solid #97bc14;
                    color: #97bc14
                }

                header #menustrip #menu nav a#quote-page:hover
                {
                    border: 2px solid #97bc14;
                    background-color: #97bc14;
                    color: #fcffff;
                }

                header #menustrip #menu nav ul li ul
                {
                    /*display: none;*/
                    position: absolute;
                    padding-left: 0;
                }

                header #menustrip #menu nav ul li:hover > ul
                {
                    display: inherit;
                }

                    header #menustrip #menu nav ul li ul li
                    {
                        /*left: -100%;*/
                        min-width: 100px;
                        float: none;
                        display: list-item;
                        position: relative;                         
                    }

I checked a similar question CSS Drop Down Menu : nav ul ul li Moved to Right and checked that margin and padding were set to 0. Also in my case, the sub-item moves to the right when hovering, it seems to remain okay while "hidden".

Bruno Muller · Accepted Answer · 2016-04-28 03:38:46Z

2

On line 94 of the CSS file, change display: inherit; for display: block;. The inherit property is displaying the dropdown menu as an inline-block.

answered Apr 28, 2016 at 3:38

Bruno Muller

2512 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farhad · Accepted Answer · 2016-04-28 03:25:43Z

0

i suggest you to use software Web menu maker & button maker this software let you to create professional and beautiful menus and buttons with java script or only css.

http://www.easymenumaker.com/

answered Apr 28, 2016 at 3:25

Farhad

4,2118 gold badges47 silver badges68 bronze badges

Collectives™ on Stack Overflow

CSS dropdown menu alignment issues

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related