DillonTerry Posted May 14, 2013 Share Posted May 14, 2013 (edited) So I need some help and I am going to try my best to explain it. So this is what I need: A vertical nav bar and when you hover over the name on the nav bar a box pops out with other options on it. sort of like thisList> |Popout box-||>>>>|---------------||>>>>|---------------| and each box has its own names and links. Sorry if I sound amateur, because I am. I do know basics, and some med level HTML but this is way out of my league. Uploaded with ImageShack.us Edited May 14, 2013 by DillonTerry Link to comment Share on other sites More sharing options...
scout1idf Posted May 14, 2013 Share Posted May 14, 2013 Something like this..... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Demo</title><style type="text/css">#menu { width:160px; padding:0 1em;}#menu .has_children { background: url('images/arrow-right-white.gif') no-repeat 100% 50%;}#menu .has_children:hover { background: url('images/arrow-right-yellow.gif') no-repeat 100% 50%;}#menu ul { margin:0; padding:0; background-color:red;}#menu ul li { padding:0; list-style:none; color: white; border-bottom: 1px solid white; cursor:pointer;}#menu ul li:hover { background-color:pink; color: yellow; position:relative;}#menu ul li a { text-decoration: none; color: white; display:block; padding:2px 3px;}#menu ul li:hover a{background:pink}#menu ul li:hover li a{background:transparent}#menu ul li a:hover { background-color:pink; color:yellow;}#menu ul ul { /*display:none; don't use this as bad for accessibility*/ margin-left:-999em;/* use this method of hiding instead */ position:absolute; left: 130px; top:5px; border:1px solid white; background-color:#0000A0;}#menu ul li:hover ul { margin-left:0;}#menu ul ul li { border-bottom:1px solid white; width:170px; float:left; display:inline;}#menu ul ul li:hover { text-decoration:underline;}</style></head><body><div id="menu"> <ul> <li><a href="#">Item 1</a></li> <li class="has_children"><a href="#">Item 2</a> <ul> <li><a href="#">Item 2.1</a></li> <li><a href="#">Item 2.2</a></li> </ul> </li> <li><a href="#">Item 3</a></li> </ul></div></body></html> Link to comment Share on other sites More sharing options...
DillonTerry Posted May 14, 2013 Author Share Posted May 14, 2013 This may just work. Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now