Question

I have tried a few things to convert my navigation solution to include drop down menus in a accurate and asthetic way, but i cannot seem to get it working 100%. the following is my CSS and HTML, and i am hoping someone could explain to me, what i cannot seem to implement on my own – how to have a drop down menu appear when a navigation item is hovered over, and have the links active.

Please don’t mind the page names, as they are pseudo code, as they don’t matter to the subject at hand.

<div id="page">
        <a class="topNavigationLink" href="http://1.com">1</a>
        <a class="topNavigationLink" href="2.html">2</a>
        <a class="topNavigationLink" href="3.html">3</a>
        <a class="topNavigationLink" href="4.html">4</a>
        <a class="topNavigationLink" href="5.html">5</a>
        <a class="topNavigationLink" href="6.html">6</a>
        <a class="topNavigationLink" href="7.html" >7</a>
 </div>

#page
{
  display: block; 
  height:auto;
  position: relative; 
  overflow: hidden; 
  width: 938px;
padding:8px 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
background: url(background.png) center 0px;
}

a.topNavigationLink
{
text-align:center;
font-weight:bold;
margin-top:0px;
font-size:20px;
padding:18px 23.4px; /*modify this value to change link size*/
float:left;
background-color:black;
//clear:left;
text-decoration:none;
color:#FFFFFF;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}

a.topNavigationLink:hover
{
color:DodgerBlue;
background-color:white;
box-shadow: 0px 10px 10px #00CC66;
}

Answer 1

Firstly, you should be using an unordered list to mark up an navigation block. In your case, this might look like:

<div id="page">
     <nav>
         <ul>
             <li><a href="http://1.com">1</a></li>
             …
         </ul>
     </nav>
     …
 </div>

Here is a trivial example that you could use as the basis of your navigation: http://dabblet.com/gist/4291211