I want do a menu like on this site: http://www.accenture.com/us-en/pages/index.aspx ex. outsourcing. It's possible to do this using css and html. I can't create "li" or "ul" with columns. My code\[code\]<body><style type="text/css">#cssmenu{ border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; color:8e8e8e; }#cssmenu ul{ background:url(menu_assets/images/menu-bg.gif) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } #cssmenu li{ float:left; padding:0px 8px 0px 8px; } #cssmenu li a{ color:#666666; display:block; font-weight:bold; line-height:43px; padding:0px 25px; text-align:center; text-decoration:none; } #cssmenu li a:hover{ color:#000000; text-decoration:underline; } #cssmenu li ul{ background:#e0e0e0; border-left:1px solid #0079b2; border-right:1px solid #0079b2; border-bottom:1px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:600px; /*top:1em; /*left:0;*/ } #cssmenu li:hover ul{ display:block; } #cssmenu li li { display:block; float:none; padding:0px; width:225px; } #cssmenu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 10px 0px 15px; text-align:left; } #cssmenu li ul a:hover{ background:#949494; color:#000000; opacity:1.0; filter:alpha(opacity=100); } #cssmenu p{ clear:left; } #cssmenu .active > a{ background:url(menu_assets/images/current-bg.gif) top left repeat-x; color:#ffffff; } #cssmenu .active > a:hover { color:#ffffff; } </style><div id='cssmenu'><ul> <li class='active'><a href='http://stackoverflow.com/questions/15733203/index.html'><span>Home</span></a></li> <li class='has-sub'><a href='http://stackoverflow.com/questions/15733203/#'><span>Products</span></a> <ul> <li><a href='http://stackoverflow.com/questions/15733203/#'><span>Product 1</span></a></li> <li><a href='http://stackoverflow.com/questions/15733203/#'><span>Product 2</span></a></li> <li><a href='http://stackoverflow.com/questions/15733203/#'><span>Product 3</span></a></li> <li><a href='http://stackoverflow.com/questions/15733203/#'><span>Product 3</span></a></li> <li class='last'><a href='http://stackoverflow.com/questions/15733203/#'><span>Product 4</span></a></li> </ul> </li> <li><a href='http://stackoverflow.com/questions/15733203/#'><span>About</span></a></li> <li class='last'><a href='http://stackoverflow.com/questions/15733203/#'><span>Contact</span></a></li></ul></div><div style="clear:both; margin: 0 0 30px 0;"> </div></body>\[/code\]Of course I search on web but I can't find solution.
How to display a few option in columns at menu
- Thread starter Emmetsun
- Start date