I am making a navigation bar for a website. I have never made one

Question

0

Asked: June 13, 20262026-06-13T13:31:22+00:00 2026-06-13T13:31:22+00:00

I am making a navigation bar for a website. I have never made one

0

I am making a navigation bar for a website. I have never made one before, and this is what i have so far. I am unsure of how to have the drop-down part hidden until you mouse over the first part. Specifically to my code, i would like to have the <dd> attributes hidden until you mouse over it’s parent <dt> element. Right now they’re constantly displayed. Can anyone explain to me how to do this?

Here’s my code:

<html><head>

<style type='text/css'>
body {
    padding-top: 6px;
}

/*  menubar start  */
#menubar {
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#5c5c5c), to(#1f1f1f));
    background: -webkit-radial-gradient(circle, #5c5c5c, #1f1f1f);
    background: -moz-radial-gradient(circle, #5c5c5c, #1f1f1f);
    background: -ms-radial-gradient(circle, #5c5c5c, #1f1f1f);
    position: relative;
    display: block;
    height: 36px;
}

#menubar dl {
    position: absolute;
    z-index: 9005;
    list-style: none;
    width: 110px;
    top: -16px;
}

#Home { left: 240px; }
#Projects { left: 400px; }
#Hack { left: 560px; }
#About { left: 720px; }
#Contact { left: 880px; }

#menubar dt a {
    display: block;
    float: left;
    width: 100%;
    height: 20px;
    padding-left: 24.75px;
    padding-right: 24.75px;
    padding-top: 8px; 
    padding-bottom: 8px;
    border-radius: 2px;
    background-color: transparent;
    font-family: 'Trebuchet MS', sans-serif;
    text-decoration: none;
    text-align: center;
    color: #ffffff; 
}

#menubar dt a:hover {
    background-color: #828282;
    color: #000000; 
}

#menubar dd {
    float: left;
    height: 100%;
    width: 100%; 
    margin: 0;
}

#menubar dd a {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 24.75px;
    padding-right: 24.75px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #5c5c5c;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-family: 'Trebuchet MS', sans-serif; 
}

#menubar dd a:hover {
    background-color: #828282;
    color: #000000;
}
/*  menubar end  */
</style>
</head><body>

<div id='menubar'>
    <dl id='Home'>
        <dt><a href='#'>Home</a></dt>
    </dl>
    <dl id='Projects'>
        <dt><a href='#'>Projects</a></dt>
        <dd><a href='#'>Mini Projects</a></dd>
        <dd><a href='#'>In Progress</a></dd>
        <dd><a href='#'>Help</a></dd>
    </dl>
    <dl id='Hack'>
        <dt><a href='#'>Hack</a></dt>
        <dd><a href='#'>Information</a></dd>
        <dd><a href='#'>Tutorials</a></dd>
        <dd><a href='#'>Challenges</a></dd>
    </dl>
    <dl id='About'>
        <dt><a href='#'>About</a></dt>
    </dl>
    <dl id='Contact'>
        <dt><a href='#'>Contact Us</a></dt>
    </dl>
</div>

<span id='lights' style="font-family: 'Trebuchet MS', sans-serif; font-size: 85%; color: #636363; line-height: 20%"><br>
Lights: On 
<input type='radio' name='lis' value='on' id='LOn' onclick='setL(true)'>
  Off 
<input type='radio' name='lis' value='off' id='LOff' onclick='setL(false)'>
</span>

</body></html>