Set me straight

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.

Author

Messages

Sam Tanner
<20 Posts

Posts:3

03/19/2007 9:35 PM
Hi John, I've finally had some time to look at the CSS NavMenu, and need a little kick in the right direction. Using version 2.0.0 skinObject, in a horizontal layout and trying for something pretty simple to expand upon later. Three problems right now: The submenu items drop down, but disappear again before you can click one! The fifth (last) root menu item is a smaller font size than the others. Under each root menu item, the first submenu item background is wider than all the rest. I know there's a lot of redundancy in the CSS, I've been experimenting and it's not very clean now. I would really appreciate a little bit of help understanding the concepts here, I've Googled on styling unordered lists but the articles don't quite strike home for me somehow, especially when it comes to the submenus and sub-submenus. For instance, why does #nav li ul get styled left: -999em? Thanks very much, Sam T. Here's my .ascx code: <br><div id="menuBar"><br><Snapsis:NavMenu id="nav" DisplayIcon="True" Level="0-99" Type="Hover" runat="server" /><br></div><br> And here's the applicable CSS: body{background-color:#FFFFFF;height:100%;font-family:Verdana, Geneva, sans-serif;font-size:1em;} div#menuBar{clear:left;width:95%;height:25px;line-height:25px;background:#bf3070;color:white;margin:0 auto 0 auto;padding:0 0 0 10px;text-align:left;} #nav ul { padding:0; margin:0; background-color:#BF3070; } #nav li { list-style-type: none; padding: 0; margin: 0; display: block; float: left; position: relative; width: 9em; height: 25px; line-height: 25px; } #nav li ul { /* second-level lists / position : absolute; left: -999em; width:13em; background-color:#BF3070; border:none; margin: 5px 0 0 0; height: 25px; line-height: 25px; text-transform:uppercase; } #nav a { font-size:1em; display:block; text-decoration:none; text-align:center; font-weight:bold; color:#FFFFFF; border:none; background-color:#BF3070; height: 25px; line-height: 25px; text-transform:uppercase; } #nav li li a { width:12em; } #nav li a:hover { font-size:1em; display:block; text-decoration:none; text-align:center; font-weight:bold; color:#FFFFFF; border:none; background-color:#990000; height: 25px; line-height: 25px; text-transform:uppercase; left: -999em; } #nav li a.SelectedTab { font-size:1em; display:block; text-decoration:none; text-align:center; font-weight:bold; color:#FFFFFF; border:none; background-color:#990000; height: 25px; line-height: 25px; text-transform:uppercase; } #nav .DisabledTab { color:#FFFFFF; height: 25px; line-height: 25px; text-transform:uppercase; } / no need to change these hover classes unless you need more than 4 levels */ #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.iehover ul ul, #nav li.iehover ul ul ul, #nav li.iehover ul ul ul ul{ left: -999em; } #nav li:hover ul, #nav li.iehover ul { top: 1.6em; left:0; } #nav li li:hover ul, #nav li li li:hover ul, #nav li li.iehover ul, #nav li li li.iehover ul { top: 0; left:12.8em; }

John Mitchell
Posts:3478

03/20/2007 10:46 PM
Hi Sam, The Hover type menu is best described here: Son Of Suckerfish The -999em is for moving the child menus off-screen until they are hovered over at which time they are just positioned to be on screen. I don't recommend switching between fixed pixels and em units. em units make your code accessible (allows users to resize fonts on their browser). The reason it may be display the flyout but not letting you move to it is because there is probably a gap between the parent and child item. the Line-Height in the first UL should match the top in the hover rule (you have 25px on line height and 1.6em on the top for hover). Your other issues are probably just from using mixed em's and px's also.

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.

Forums >Snapsis Product Support >CSS NavMenu > Set me straight

ActiveForums 3.7