css drop down menu
so far i have created it so when you mouse over a menu link with sub menus that it displays the sub manus under the main menu link in a horizontal strip. but the problem is when i mouseover them main menu link im unable to select that link only the submenus . also when i mouseover a new main menu link after hovering over a main menu link with submenus it doesnt remove the previous submenus and enable the hover of the new menu link unless i mouse way past the submenus and go directly over that link.
sorry if my explanation of the problem is confusing
heres the html
<div class="menu">
<ul>
<li><a href="index.php" class="active"><span>Home Page </span></a></li>
<li><a href="about.php"><span> About Us </span></a>
<ul>
<li><a href=""><span>The Team</span></a></li>
<li><a href=""><span>History</span></a></li>
<li><a href=""><span>Vision</span></a></li>
</ul>
</li>
<li><a href="calendar.php"><span>Calendar</span></a>
<ul>
<li><a href=""><span>Timetable</span></a></li>
<li><a href=""><span>latest news</span></a></li>
</ul>
</li>
<li><a href="photos.php"><span>Photos</span></a></li>
<li><a href="contact.php"><span> Contact Us</span></a></li>
</ul>
</div>
and css
.menu { padding:38px 0 0 0; margin:0; width:480px; float:right; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:right; }
.menu ul li { float:left; margin:0; padding:0 5px; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left; }
.menu li ul { display: none; }
.menu li:hover ul {
display: block;
position: absolute;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
background:none;
margin-left: 1px;
white-space: nowrap;
}
.menu li:hover ul {
display: block;
position: absolute;
}
.menu li:hover li {
float: left;
font-size: 11px;
background:none;
margin: 40px 0 0 0
}
also a link to a demo is found here
http://ipponkarateacademy.co.uk/dev2/dev/ (the submenus are only on the index.php file
thanks
/* extra info */
im using google chrome . i havent even tested in any other browsers yet. i hate to think what would happen in some versions of internet explorer
View full post on Tycoon Talk
Down, Drop, Menu
RSS Site Feed