- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
May 10, 2011 at 8:05 am #10104oskar-kjellinParticipant
I know this is a quite frequent question, but I’ve been having troubles finding the exact answer to this problem.
The menu I want is consists of dots. These dots are vertical. The text for these dots will be added later, so don’t mind that now. I want a submenu to some of these dots. This submenu should be horizontal. Best illustrated by the below.
x x x x x x x
But for now it looks like this:
x x xx x x
So the sub menu is one row below where it should on top of another item. Hope this is clear
The html I have is:
<ul id="mainmenu"> <li id="liHome" class="active"> <a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a> </li> <li id="liServices" class=" "> <a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a> <ul style="" id="SubMenuY2" class="submenu"> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> </ul> </li> <li id="liEnvironment"> <a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a> </li> <li id="liCareer"> <a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a> </li> <li id="liContact"> <a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a> </li> </ul
And the css is:
#mainmenu { position: fixed; left: 20px; top: 50%; z-index: 999999; margin-top:-200px; } #mainmenu li { height: 40px; position: relative; } #mainmenu a { display: block; width: 40px; height: 40px; background: url(Images/dotnav.png) 0 100% no-repeat; text-indent: -10000px; overflow: hidden; } #mainmenu a:hover, #mainmenu li.active a { background-position: 0 0; } .submenu { list-style-type: none; position:relative; float:left; } .submenu li { display: inline; float:left; position:relative }
May 10, 2011 at 10:51 am #10105pedro-correiaParticipantI stripped some of your styling stuff and left the positioning stuff so it’s clearer:
#mainmenu { margin: 0; padding: 0; list-style-type: none; } #mainmenu li { clear: left; } #mainmenu a { display: block; overflow: hidden; float: left; } #mainmenu a:hover, #mainmenu li.active a { background-position: 0 0; } .submenu { list-style-type: none; float: left; display: none; } #mainmenu li a:hover+.submenu, .submenu:hover { display: block; } .submenu li { display: inline; clear: none !important; } .submenu li a { float: left; margin-left: 10px; }
I also added some code to handle the mouse hovers.
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.