CODEWITHSUNDEEP
htmlcss
user3693564
user3693564

Reputation: 29

Lining Up Submenu With Menu

I'm still relatively new to coding, so this is probably an easy fix. I have set up menu with 5 menu items, and submenu items under two of the primary menu items. If I line up the first submenu with its menu item, the second one is too far right. If I line up the second submenu with its menu item, the first one is too far right. Is there a way to make both submenus line up under their respective menu items?

Here is the HTML:

<ul id="menu">
    <li><a href="http://kerryaltmantest.info">Home</a></li>
    <li><a href="http://kerryaltmantest.info/aboutme.html">About Me</a>
        <ul>
            <li><a href="http://kerryaltmantest.info/fpa.html">Fairfax Psychological Associates</a></li>
            <li><a href="http://kerryaltmantest.info/credentials.html">Credentials</a></li>
        </ul></li>
    <li><a href="http://kerryaltmantest.info/publications.html">Publications</a>
        <ul>
            <li><a href="http://kerryaltmantest.info/w5m.html">The Wisdom of the Five Messengers</a></li>
            <li><a href="http://kerryaltmantest.info/otherpublications.html">Other Publications</a></li>
        </ul></li>
    <li><a href="http://kerryaltmantest.info/location.html">Location</a></li>
    <li><a href="http://kerryaltmantest.info/strategicinteractions.html">Strategic Interactions</a></li>

And this is the CSS:

    #menu {
width: 950px;
height:35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
margin-top: -175px;
margin-left: 25px;
}

#menu li {
display: inline;
padding: 10px;
}

#menu a {
text-decoration: none;
color: #2B297F;
padding: 10px 10px 10px 10px;
}

#menu a:hover {
color: #2B297F;
background-color: #999;
}

#menu li ul
{font-size:15px;
margin-left:-160px;
margin-top:25px;
position:absolute;
text-align:left;
display:none;} 

#menu li:hover ul
{display:inline-block;
 }

#menu li li
{list-style:none; display:list-item;}

#menu li li a
{color:#2B297F; text-decoration:none;white-space:nowrap;
}

#menu li li a:hover
{color:#2B297F; background-color: #999 text-decoration:none;}

The site is at http://kerryaltmantest.info if you want to see what I mean about the submenu. Thank you!

Upvotes: 0

Views: 166

Answers (1)

JustcallmeDrago
JustcallmeDrago

Reputation: 1885

There are a few changes in css that need to be made:

#menu li ul {
    font-size: 15px;
    /* margin-left: -160px; REMOVE */
    /* margin-top: 25px; REMOVE */
    position: absolute;
    text-align: left;
    top: 30px; /* add this */
    left: 0; /* add this */
    padding: 0 /* add this */
    display: none;
}

#menu li {
    display: inline;
    padding: 10px;
    position: relative; /* add this */
}

The biggest reason that the ul is not positioning properly is because the li it is contained in did not have a position style set. When this happens, absolutely-positioned elements are positioned according to the first ancestor that has a position type set. Additionally, that was apparently not coming into effect because no positioning rules (top/left/bottom/right) were set in the ul. Adding these two things and resetting the margins/padding fixed the issue (css is directly editable/debuggable in chrome's debugger).

https://developer.mozilla.org/en-US/docs/Web/CSS/position:

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

Chrome debugging information: https://developer.chrome.com/devtools/index

Upvotes: 1

Related Questions