{"id":137,"date":"2009-07-19T10:48:54","date_gmt":"2009-07-19T09:48:54","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=137"},"modified":"2010-11-11T12:18:37","modified_gmt":"2010-11-11T11:18:37","slug":"building-a-css-vertical-expanding-menu-with-flyouts-stage-3","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/building-a-css-vertical-expanding-menu-with-flyouts-stage-3\/","title":{"rendered":"Building a css vertical expanding menu with flyouts – stage 3"},"content":{"rendered":"

Click here for Part 2 <\/a><\/p>\r\n\r\n

First a word of warning. If by any chance you’re trying to follow this and using IE6, then first of all, it won’t work (but read on for a fix), and second of all, do yourself a big favour and install Firefox, or at least IE7.<\/p>\r\n\r\n

The css changes here are quite simple.To create the “flyout” behaviour I’m going to use the concept of absolute positioning. This will enable me to use css to exactly define where I want the flyout menu to appear, outside the normal flow definded by the html.<\/p>\r\n\r\n

I want to trigger this behaviour when the mouse is hovered over the appropriate top level menu button – so for example when I hover over the “Blog” menu button the second level menu should appear to the right of the Blog button, on top of any text.<\/p>\r\n\r\n

I need to make two additions to the css to make this work:<\/p>\r\n\r\n

css\r\n\r\n#nav-menu ul\r\n {list-style-type:none;\r\n  margin:0px;\r\n  padding:0px}\r\n\r\n#nav-menu ul a\r\n{text-decoration:none;\r\n border:1px solid #303030;\r\n width:170px;\r\n display:block;\r\n text-align:center;\r\n font-size:14pt;\r\n line-height:2em;\r\n background:url(Images\/Buttons\/Button_top.gif) repeat-x left;\r\n font-family:Arial, Helvetica, sans-serif;\r\n color:white}\r\n\r\n#nav-menu ul ul\r\n{display:none} \r\n\r\nbody.blog #nav-menu ul ul.blog, \r\nbody.web #nav-menu ul ul.web\r\n{display:block}\r\n\r\n#nav-menu ul li{position:relative}\r\n\r\n#nav-menu ul li:hover ul\r\n{display:block;\r\n position:absolute;\r\n left:172px;\r\n top:0px;}<\/span>\r\n\r\n#nav-menu ul ul li a\r\n{border:1px solid #888888;\r\n border-bottom: none;\r\n font-size:12pt;\r\n line-height: 1.6em;\r\n color:#303030;\r\n background-color:#a5a5a5;\r\n background-image:none;}<\/pre>\r\n\r\n
Let’s have a look at what I’ve done here. The statement<\/p>\r\n\r\n#nav-menu ul li{position:relative}<\/code>\r\n\r\n
sets the reference point for my absolute positioning, in this case to be the position of the top level menu item. Once I’ve done this then the statement:<\/p>\r\n\r\n#nav-menu ul li:hover ul{display:block;position:absolute;left:172px; top:0px;}<\/code>\r\n\r\n
displays the second level menu and positions it absolutely. Horizontally it’s positioned 172px to the left of the top level menu,  accounting for the 170px width and a 1px border on both sides. Vertically it is positioned at the same height as the top level menu. So, from the Home page if I hover over “Blog”  or “Websites” I get second level flyout. Give it a go below:<\/p>\r\n\r\n
\r\n