Hey Good Folks,
I just added three pages to my website (www.drumdr.com), and decided to link to them through a sub-menu so as to keep the clutter down. It also makes sense because the three new pages really are sub-topics to a page already there (www.drumdr.com/hand-drum.html. The new pages are on African, Middle Eastern and Indian drums).
Here’s the thing; the sub menu is really touchy. It shows up fine with a mouse-over, but unless your’e really quick with the mouse, you’ll miss it when you try to click on it. The other thing is that I don’t really like that the sub-menu covers part of the main menu. Is there any way to have the sub menu pop up beside the main menu?
Below please find the relevant code. Notice that I’m going with pure HTML and CSS. I’d like to stick with that if at all possible.
Thanks in advance,
jcmcobra
<div id="sideBar">
<ul id="mainMenu">
<li><a href="index.html">Home</a></li>
<li><a href="about-drum-repair.html">About Drum Dr.</a></li>
<li><a href="hand-drum.html">Hand Drums</a>
<ul>
<li><a href="african-hand-drums.html">African Hand Drums</a></li>
<li><a href="middle-eastern-hand-drums.html">Middle Eastern Hand Drums</a></li>
<li><a href="indian-hand-drums.html">Indian Hand Drums</a></li>
</ul>
</li>
<li><a href="drum-repair-histories.html">Drum Repair Histories</a></li>
<li><a href="djembe-repair.html">Djembe Repair</a></li>
<li><a href="djembe-history.html">Djembe History</a></li>
<li><a href="tabla-repair.html">Tabla Repair</a></li>
<li><a href="drum-doctor-contact.html">Drum Dr. Contacts</a></li>
<li><a href="repair-rates.html">Drum Repair Rates</a></li>
<li><a href="drumming-events.html">Drumming Events</a></li>
</ul>
<!-- #sideBar --></div>
#sideBar {
float:left;
width:192px;
}
#mainMenu {
list-style:none;
padding:12px;
font:bold 14px/18px verdana,helvetica,sans-serif;
}
#mainMenu li {
display:inline; /* just get these out of the way! */
}
#mainMenu a {
display:block;
padding:6px 8px;
margin-bottom:6px;
text-decoration:none;
color:#000;
background:#FFF8F0;
border:1px solid #FDB;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#FED;
}
#mainMenu li ul {
display: none;
}
#mainMenu li:hover ul {
display: block;
position: absolute;
}
#mainMenu li:hover ul li a {
display:block;
padding:6px 8px;
margin-bottom:0;
text-decoration:none;
background:white;
color:#000;
border:1px solid #FDB;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#mainMenu li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}