![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/05\/horizontalmenu-400.gif\")
<\/p>\n<\/p>\n
Last week, CSS Newbie reader Andrea Pluhar<\/a> wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week<\/a> on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS. It turns out that there is<\/em> a CSS-riffic way to do this, and in the spirit of maximizing benefit, I thought a tutorial would be in order. <\/p>\n The XHTML involved is identical to that used in our regular dropdown menus: a nested unordered list, where the nested lists become the submenus. It looks something like this:<\/p>\n Next we\u2019ll move to the CSS. I started out by moving the navigation bar to the top-right corner, like the design called for, removing the list styling, and floating the items left to make them line up in a row:<\/p>\n Next, I styled the primary anchor tags to make them look more like the navigation Andrea was looking for. The code looks like this:<\/p>\n I\u2019ve added a bit of padding to the link, and used the text-transform property to make everything uppercase like the mockup called for. That way, the original XHTML can be lowercase or camel-case (capitalized first letters)… which would be a little easier to read in an unstyled document.<\/p>\n Next up, we hide the nested lists by default, and then style them when the containing list item is hovered over:<\/p>\n The code above is the bit that really makes most of this magic work, so I\u2019ll explain the important parts in some detail. First, because IE6 doesn\u2019t support hover states on anything other than anchor tags, we\u2019re writing our rules to account for the hover state and<\/strong> a hover class. This class is applied to elements when they’re being hovered over, using an ingenious little bit of JavaScript (which is explained in this previous dropdown menu tutorial<\/a>).<\/p>\n Next up, we\u2019re absolutely positioning our nested lists and using the \u201cleft\u201d property to move the list to the left-most side. This isn\u2019t moving the list to the left-most side of the screen, but instead the left-most side of its parent positioned element<\/em>, which in this case happens to be the main unordered list that we positioned right at the start. As such, this trick relies of the whole list being positioned in some manner, even if it\u2019s just relatively positioned and left in place.<\/p>\n The display: inline rule is a little more complicated. So much so, I don\u2019t even completely understand what it\u2019s doing. What I do<\/em> know is, without that rule, the list items in the submenus simply don\u2019t show up whatsoever in any major browser. I think<\/em> it has something to do with the fact that the containing elements are floated (which we\u2019ll get to in a bit), but I can\u2019t prove that. If anyone has any better insight into the technical aspect, please let me know in the comments.<\/p>\n Lastly, the width: 100% rule is somewhat important. It\u2019s preventing the unordered list from collapsing down to a smaller size in certain browsers. Specifically, without setting this width specified, the nested list sometimes collapses to the size of its \u201ccontaining\u201d list item (even though it\u2019s absolutely positioned and therefore technically no longer contained). Note that older versions of Opera don\u2019t deal well with the 100% width… if you want it to work on older versions, you\u2019ll need to specify a width according to a definite size (such as pixels). However, the most recent version of Opera (9.27) handles it fine, and I get the impression that Opera users tend to upgrade more frequently than, say, IE users.<\/p>\n Finally, we just float the elements left (to put them in a nice horizontal row), and give them some colors:<\/p>\n And that\u2019s it! You can see a working example here.<\/a> This has been tested and works fine in IE 6+, Firefox 2, Safari (Mac and PC), and Opera 9.27. <\/p>\n The only portion of the mockup I wasn\u2019t quite able to duplicate was a way to keep the primary menu item highlighted when the submenu was in use: because the nested list is absolutely positioned, the browser doesn\u2019t seem to consider them a matched set any longer (except, it seems, in terms of default width). If anyone has a solution to this bit, I would love to hear about it!<\/p>\n Thanks to Andrea for inspiring a hopefully useful tutorial! And if you ever have a CSS-related question that you think might make a good article here, don\u2019t hesitate to send me a message, either via my contact page<\/a> or on Twitter.<\/a> I can\u2019t guarantee I\u2019ll use every question posed, but I\u2019ll do what I can as time and situation allow.<\/p>\n<ul id="navbar">\n\t<li><a href="#">Item One<\/a><ul>\n\t\t<li><a href="#">Subitem One<\/a><\/li>\n\t\t<li><a href="#">Second Subitem<\/a><\/li>\n\t\t<li><a href="#">Numero Tres<\/a><\/li><\/ul>\n\t<\/li>\n\t<!-- ... and so on ... -->\n<\/ul><\/pre>\n
#navbar {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tmargin: 0;\n\tpadding: 0;}\n#navbar li {\n\tlist-style: none;\n\tfloat: left; }<\/pre>\n#navbar li a {\n\tdisplay: block;\n\tpadding: 3px 8px;\n\ttext-transform: uppercase;\n\ttext-decoration: none; \n\tcolor: #999;\n\tfont-weight: bold; }\n#navbar li a:hover {\n\tcolor: #000; }<\/pre>\n#navbar li ul {\n\tdisplay: none; }\n#navbar li:hover ul, #navbar li.hover ul {\n\tposition: absolute;\n\tdisplay: inline;\n\tleft: 0;\n\twidth: 100%;\n\tmargin: 0;\n\tpadding: 0; }<\/pre>\n#navbar li:hover li, #navbar li.hover li {\n\tfloat: left; }\n#navbar li:hover li a, #navbar li.hover li a {\n\tcolor: #000; }\n#navbar li li a:hover {\n\tcolor: #357; }<\/pre>\n