Home/ Questions/Q 9153853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:20:24+00:00

I want to position a dropdown menu exactly under the button. Here’s my code,

  • 0

I want to position a dropdown menu exactly under the button. Here’s my code, as you can see the submenu under programs is a not exactly under the programs button.

Here is my HTML Code:

 <!Doctype>
<html>
<head>
    <title>HelpHelp | Home</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div id="banner">
        <a href="index.html" title="Go Home"><img src="logo.psd" alt="" height="70px" /></a>
        <h3>Debugging HTML Since 2012</h3>
    </div>
    <div id="nav">
        <ul>
            <li>  <a href="index.html">Home</a>  </li>
            <li>  <a href="about.html">About</a>  </li>
            <li>  <a href="http://www.htmlhelp.cu.cc">Forum</a>  </li>
            <li>  <a href="#">Code</a>  </li>
            <li>  <a href="#">Programs</a>
                <ul>
                    <li><a href="#">Windows</a></li>
                    <li><a href="#">Macintosh</a></li>
                </ul>
            </li>
            <li>  <a href="#">Tutorials</a>  </li>
        </ul>    
    </div> <!-- End Nav Div -->
</body>
</html>

Here is my CSS Code:

/* CSS Document */
body{
    margin:0px;
    background: -webkit-linear-gradient(#f1f0f0 0%, #dadada 100%);    
}
#banner{
    border-bottom:2px solid #000;
    background: -webkit-linear-gradient(#6e90e6 0%, #77a3f4 100%);
    height: 100px;
}
#banner img{
    position: relative;
    top:5px;
    left: -10px;
}
#banner h3{
    font-family: cursive;
    position:absolute;
    top: 0px;
    left: 250px;
    font-style: italic;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 1px 1px 1px #fff;
}

#nav{
    border-bottom:1px solid #000;
    padding:0px;
    width:100%;
    background: #ff8c00;
}
#nav ul{
    list-style-type: none;
    margin:0px auto;
    text-align:center;
    padding-left:20px;
    position: relative;
}
#nav li{
    display:inline-block;
    padding:10px;
    width:100px;
    background:#ff8c00;
    border-right:1px solid #fff;
}
#nav a{
    padding:5px;
    text-align: center;
    background:#ff8c00;
    color: #000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 15px;
}
#nav a:hover{
    border-radius: 5px;
    box-shadow: -1px -1px 1px #000;
    background:#e27c0;
    padding-left:10px;
    padding-right:10px;
}
#nav ul ul{
    visibility: hidden;
    position:absolute;
    left:64%;
    top: 37px;
    padding: 0px;
    border:1px solid #000;
    border-top: 1px solid transparent; 
}
#nav ul li ul li{
    background: transparent;
    float:none;
    display:block;
    border-right:none;
    border-bottom:1px solid #fff;
}
#nav ul li:hover ul{
    visibility: visible;
    background: #ff8c00;
}
#about_title{
    width:100%;
    height:45px;
    border-bottom:1px solid #bfbfbf;
}
#about_who{
    width:250px;
    padding:10px;
    border: 1px solid#000000; 
    margin-left:15%;
    position: relative;
    top: 10px;
}
#about_what{
    width:250px;
    padding:10px;
    border: 1px solid #000000; 
    margin-left:15%;
    position: relative;
    top: 10px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Might be tricky to get the ul centered under the li because of potentially varying li widths and necessarily absolute positioning of the ul. Adding this gets you there if the li elements are always the same width, anyway:

    #nav li {position: relative;}
#nav ul li:hover ul {position: absolute; left: -3px;}

    http://jsfiddle.net/yhfYt

    • 0