Using anchor tag within a dropdown to move to a place down the page?

HTML & CSS
1

I’d like to use anchor tags to jump down the page. but I’d like to put these list items in a dropdown.
is there any way to make an item in a dropdown list go to a particular place down the page (using anchor tags) without javascript? just pure html/css?

Sorry if I did not ask this in the clearest way… I’m new at css/html :smiley:

thanks!!

2

<a href=“#idToJumpTo”>

<div id=“idToJumpTo”>

3

thank you, but can you show me the full code for putting the a tags as items in the dropdown list?

4

Look at this suckerfish dropdown tutorial

5

Hi,
It would look something like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>"Fragment Identifiers" (aka- Page Anchors/Jump Links)</title>

<style type="text/css">
body {
    background: #fff;
    font-size:100%;
    margin:0;
    padding:0;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
}
#wrapper {
    width:800px;
    margin:0 auto;
    background:#333;
    overflow:hidden;
}
h1 {
    margin:0;
    padding:1em 0;
    text-align:center;
    background:palegreen;
}
/*==== Dropdown Styles ====*/
#nav {
    width:800px;
    height:1.75em;
    list-style:none;
    background:#CCC;
}
#nav li {
    position:relative;/* set containing block for AP sub ul */
    float:left;
    text-align:center;
    background:#CCC;
}
#nav li:hover {
    background:#777;
}
#nav a {
    display:block;
    width:180px;
    height:1.75em;
    line-height:1.75em;
    color:#000;
    font-weight:bold;
    text-decoration:none;
}

/* ------ Sub UL Drop Down ------ */
#nav ul {
    position:absolute;
    width:180px;
    left:0;
    top:100%;
    margin-left:-999em;/* hide the sub ul */
}
#nav li:hover ul {
    margin-left:0;/* reveal the sub ul on li:hover */
}

/*==== Anchored Divs ====*/
#blk-1{
    height:400px;
    margin:100px 0;
    background:red;
}
#blk-2{
    height:600px;
    margin:200px 0;
    background:cyan;
}
#blk-3{
    height:400px;
    margin:100px 0;
    background:lime;
}
#blk-4{
    height:600px;
    margin:100px 0;
    background:yellow;
}
</style>
</head>
<body>

<div id="wrapper">
    <h1 id="top">Dropdown Nav with Jump Links</h1>
    <ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Jump Links &raquo;</a> 
            <ul>
                <li><a href="#blk-1">Div 1</a></li>
                <li><a href="#blk-2">Div 2</a></li>
                <li><a href="#blk-3">Div 3</a></li>
                <li><a href="#blk-4">Div 4</a></li>
            </ul>
        </li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>

    <div id="blk-1">
        <h3>Block One</h3>
        <a href="#top">Return to Top</a>
    </div>
    <div id="blk-2">
        <h3>Block Two</h3>
        <a href="#top">Return to Top</a>
    </div>
    <div id="blk-3">
        <h3>Block Three</h3>
        <a href="#top">Return to Top</a>
    </div>
    <div id="blk-4">
        <h3>Block Four</h3>
        <a href="#top">Return to Top</a>
    </div>
</div>

</body>
</html>