CSS Submenu

HTML & CSS
1

I am having trouble coding a CSS based menu as although the main menu items are a vertical list the sub menu that branches off from one of the menu items needs to be displayed as a horizontal menu (inline).

So far the code I have is as follows:


<div class="menu">
  <ul>
  	<li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">films</a>
    	<ul>
        	<li><a href="#">legacy</a></li>
            <li><a href="#">journey</a></li>
            <li><a href="#">rally</a></li>
       	</ul>
    </li>
    <li><a href="#">contact</a></li>
   </ul>
   </div>



.menu {float:left;}
.menu ul{
margin: 0;
padding: 0;
list-style-type: none;
width:550px;}
.menu ul li {position: relative;
}

/* Top level menu links style */
.menu ul li a{
display:  block;
overflow: auto; 
color:#999999;
text-decoration: none;
padding: 6px;
font-size:18px;
font-weight:bold;
}
.menu ul li a:hover {list-style-type:none; font-size:18px; font-weight:bold; color: #666; letter-spacing:4px; text-decoration:none;}
.menu ul li a:active {list-style-type:none; font-size:18px; font-weight:bold; color: #666; letter-spacing:4px; text-decoration:none;}

/*Sub level menu items */
.menu ul li ul{
position: absolute;
float:left;
top: 0;
visibility: hidden;
}

.menu ul li ul li a{
	float:left;
	display:inline;
}

I’ve tried variations on this and I’ve been able to get the submenu to appear as a vertical submenu but not inline. :confused:

Any suggestions would be welcome.

Thanks

2

You need to float the inner <ul>'s :)…Untested…but…


.menu ul li ul li{float:left;}

If that isn’t the case could we possibly get a link to look at?

Also be aware that the <ul>'s inside of .menu are only 550px wide. So if they aren’t appearing horizontal then there probably isn’t enough width. I’d unset the <ul> dropdowns width


.menu ul ul{width:auto;}
3

I have altered my CSS and come up with a version that seems to work fine in IE and Opera but is not quite right in Firefox and Chrome. For some reason the link to the submenu items works fine but the link to the parent “Films” link doesn’t work when hovered/clicked on except when the cursor is placed at the end of the submenu items.


.menu { width:auto; overflow: hidden;}

.menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.menu ul li {position: relative;
}

/* Top level menu links style */
.menu ul li a{
display: list-item;
color:#999999;
text-decoration: none;
padding: 6px;
font-size:18px;
font-weight:bold;
}
.menu ul li a:hover {list-style-type:none; font-size:18px; font-weight:bold; color: #666; letter-spacing:6px; text-decoration:none;}
.menu ul li a:active {list-style-type:none; font-size:18px; font-weight:bold; color: #666; letter-spacing:6px; text-decoration:none;}

a.active {list-style-type:none; font-size:18px; font-weight:bold; color: #666; letter-spacing:6px; text-decoration:none;}

/*Sub level menu items */
.menu ul li ul{
	position:absolute;
	top:0;
	display:none;
}
.menu ul li:hover ul{display: inline; letter-spacing:6px;}

.menu ul li ul li a:link, .menu ul li ul li a:visited {
	list-style-type:none; font-size:18px; font-weight:bold; color: #666; text-decoration:none;
}
.menu ul li ul li a:hover {
	list-style-type:none; font-size:18px; font-weight:bold; color: #666; letter-spacing:6px; text-decoration:none;
}
.menu ul li ul li{float:left;}

.menu ul li ul li a{
	float:left;
	display: inline-block;
	margin-left:30px;
}

.menu ul li ul li a.legacy {
	float:left;
	display: inline-block;
	margin-left:100px;
}
/* Holly Hack for IE \\*/
* html .menu ul li { float: left; height: 1%; }
* html .menu ul li a { height: 1%; }
/* End */

a {color:#666; text-decoration:none;}

Any ideas?

4

Hi, can we possibly get a full page to look at? Or even better, a link to the page in question?