Vertical (pop out) menu almost works
For some time now I've trying to get my head round drop down / pop out menus using only CSS. I think I've just about got the hang of the horizontal drop down menus so now I've turned my attention to vertical pop out menus.
The code I've shown below very nearly works fine but there is one fault that I cannot remedy. When you hover the cursor over the top level menu, the relevant item changes color and font-weight, as it's supposed to, but as you move the curor to the right it gets to a point where it reverts to its original states before you actually move off the item altogether.
I must also add that I realise that putting the CSS and HTML in the same file is not good practice : I only did it to save myself the trouble of jumping from file to file as I tried to fix this problem.
Any help would be greatly appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="Fri, 07 Dec 2012 16:41:20 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
body{
background-color: #eaebed;
font-family : verdana, tahoma, arial, serif;
font-size: 85%;
margin-top : 0px;}
#page{
width : 960px;
margin-left : auto;
margin-right : auto;
margin-top : -14px;
margin-bottom : -14px;
background-color : rgb(175, 175, 175);}
p{
padding : 15px 15px;}
#nav {
margin-left : 0px;
padding-left : 0px;}
#nav li {
list-style : none;
width : 150px;
display : block;}
#nav li a{
display : block;
text-decoration : none;
background : #036;
padding-left : 8px;
line-height : 29px;
color : #fff;
border-bottom : solid 1px #fff;
width : 150px;}
#nav li ul{
display : none;}
#nav li:hover ul{
display : block;
position : absolute;
margin-top : -30px;
margin-left : 110px;}
#nav li:hover li{
float : none;
width : 150px;}
#nav li:hover li a{
border-bottom : solid 1px #fff;
background : #03e;}
#nav li:hover li a:hover{
background : red;
font-weight : bold;}
#nav li:hover a:hover{
background : green;
font-weight : bold; }
#left{
float : left;
width : 175px;}
#right{
float : left;
width : 600px;}
#middle{
clear : both;}
</style>
</head>
<body>
<div id = "page">
<div id = "left">
<br />
<ul id = "nav">
<li><a href = "#">Top Level Item 1</a>
<ul>
<li><a href = "#">Sub Item 1.1</li></a>
<li><a href = "#">Sub Item 1.2</li></a>
<li><a href = "#">Sub Item 1.3</li></a>
</ul>
</li>
<li><a href = "#">Top Level Item 2</a>
<ul>
<li><a href = "#">Sub Item 2.1</li></a>
<li><a href = "#">Sub Item 2.2</li></a>
<li><a href = "#">Sub Item 2.3</li></a>
</ul>
</li>
<li><a href = "#">Top Level Item 3</a>
<ul>
<li><a href = "#">Sub Item 3.1</li></a>
<li><a href = "#">Sub Item 3.2</li></a>
<li><a href = "#">Sub Item 3.3</li></a>
<li><a href = "#">Sub Item 3.4</li></a>
<li><a href = "#">Sub Item 3.5</li></a>
<li><a href = "#">Sub Item 3.6</li></a>
</ul>
</li>
</ul>
</div>
<div id = "right">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id = "middle">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div><!-- End of page div -->
</body>
</html>
|
