Navigational bar

Question

I am trying to create a mouseover navigational site. I have this as my basic design but I wanted to have the main buttons of "Our Team", Locations, and Patient Reources. This is what I had before trying to change to a mouseover scheme...

<div class="title">Division of Gastroenterology</div>
</center>
<div class="left_side">  
<p> Staff</p>
<p><b><a href="faculty.html">Faculty</a></b></p>
<p><b><a href="fellows.html">Fellows</a></b></p>

<p>Locations</p>
<p><b><a href="PCAM.html">Perelman Center for Advanced Medicine</a></b></p>
<p><b><a href="PPMC.html">Presbyterian Medical Center</a></b></p>
<p><b><a href="Radnor.html">Penn Medicine at Radnor</a></b></p>

<p>Patient Resources</p>
<p><b><a href="Preps.html"> Procedure Preps</a></b></p>
<p><b><a href="ProviderNumbers.html">Insurance Provider Numbers</a></b></p>
<p><b><a href="Lichtensteindiet.html">IBD Diet</a></b></p>

I tried this but am clearly missing something...

Answer 1

I think you are trying to create a navigational bar as inferred from the information you've posted as well as your general question.

To implement this fully would require a bit of editing and explanation - which will be too long to do fully. So, I adapted a nice solution off the web that uses unordered lists, and CSS and have made it available to you as well as the article from where it is linked.

Solution Attempt: http://jsfiddle.net/zFsaF/1/

<nav>
    <ul>
        <li><a href="#">Staff</a>
            <ul>
                <li><a href="faculty.html">Faculty</a></li>
                <li><a href="fellows.html">Fellows</a><li>
            </ul>
        </li>
        <li><a href="#">Locations</a>
            <ul>
                <li><a href="PCAM.html">Perelman Center for Advanced Medicine</a></li>
                <li><a href="PPMC.html">Presbyterian Medical Center</a></li>
                <li><a href="Randor.html">Penn Medicine at Randor</a></li>
            </ul>
        </li>
        <li><a href="#">Patient Resources</a>
            <ul>
                <li><a href="Preps.html">Procedure Preps</a></li>
                <li><a href="ProviderNumbers.html">Insurance Provider Numbers</a></li>
                <li><a href="Lichtensteindiet.html">IBD Diet</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS:

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
nav ul li:hover a {
    color: #fff;
}

nav ul li a {
    display: block; padding: 25px 40px;
    color: #757575; text-decoration: none;
}

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   
nav ul ul li a:hover {
    background: #4b545f;
}
nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

Article: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

You can of course adapt this as you need it however you wish.

NOTE: If some things do not make sense, you can always refer back to the original article, use Google, or consult the very good W3Schools reference:

http://www.w3schools.com/css/css_navbar.asp

Good luck!

UPDATE:

The OP forgot to mention that the solution has to be in Javascript.

As such, the best place to begin would be to examine tutorials that have already done what is requested. Here's an excellent place to start:

http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/

Answer 2

what i have done in the past is hide the dropdown off the screen, then when the user hovers over a link bring the dropdown back into view.

I accomplished this by using unorderd lists like this:

 <ul id="nav">
    <li>Home
         <ul>Link 1</ul>
         <ul>Link 2</ul>
         <ul>Link 3</ul>
    </li>
 ...
 </ul>

And in the CSS set the main <li>'s position to relative, the dropdown to absolute and :hover of the dropdown sets the left position to 0

/* --- MAIN LINK --- */
#nav li{
    float:left;
    margin-right:35px;
    position:relative;
}

/*--- DROPDOWN ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

#nav li:hover ul{ 
    left:0; /* Display the dropdown on hover */