SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS Submenu

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2009
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Submenu

    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:

    HTML Code:
    <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>
    Code:
    .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.

    Any suggestions would be welcome.

    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You need to float the inner <ul>'s ..Untested..but..
    Code:
    .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
    Code:
    .menu ul ul{width:auto;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2009
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    .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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, can we possibly get a full page to look at? Or even better, a link to the page in question?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •