We would like to know how to show submenu to the right when hover.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#nav {<!-- w ww .j a v a 2 s . c o m-->
position: relative;
width: 120px;
}
#nav a {
display: inline-block;
text-decoration: none;
width: 100%;
background-color: #EEE;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
background: #c0c0c0;
border-bottom: 1px dotted #404040;
position: relative;
}
#nav ul ul {
position: absolute;
left: 43px;
display: none;
top: 0;
}
#nav ul ul li {
background: #c0c0c0;
}
#nav ul li:hover ul {
display: inline;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">option1</a>
<ul>
<li><a href="#">option 1 a</a></li>
<li><a href="#">option 1 b</a></li>
</ul></li>
<li><a href="#">option2</a>
<ul>
<li><a href="#">option 2 a</a></li>
<li><a href="#">option 2 b</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
The code above is rendered as follows: