Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Navigation submenu issues

    I made a vertical navigation menu and tryed to add submenus with pure css. I can't really explain in words what is going wrong, so I took a screenshot. This is what happens if I mouse-over the menu item with a submenu:



    CSS for the menu:
    Code:
    #nav ul {
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    	text-align: center;
    }
    #nav a {
    	display: block;
    	width: 100%;
    	background: black url('imgs/navbg.png');
    	color: white;
    	font-family: Verdana, Geneva, Tahoma, sans-serif;
    	border-bottom: 3px maroon solid;
    	padding: 3px 0px 3px 0px;
    	height: 20px;
    	font-weight: bold;
    	text-decoration: none;
    }
    #nav a:hover {
    	background: white url('imgs/navhover.png') repeat-x;
    	color: black;
    }
    Code for submenu:
    Code:
    .hassubmenu ul {
    	display: none;
    	top: -22px;
    	left: 120px;
    	position: relative;
    	float: left;
    }
    .hassubmenu:hover ul {
    	display: inline;
    }
    HTML:
    Code:
    	<div id="nav">
    		<ul>
    			<li class="hassubmenu"><a href="#">Main 1</a>
    				<ul>
    					<li><a href="#">Submenu 1</a></li>
    					<li><a href="#">Submenu 2</a></li>
    					<li><a href="#">Submenu 3</a></li>
    					<li><a href="#">Submenu 4</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Main 2</a></li>
    			<li><a href="#">Main 3</a></li>
    			<li><a href="#">Main 4</a></li>
    		</ul>
    	</div>
    if this helps, adding more letters to a submenu does this:



    Full HTML Pastebin'd

    Full CSS Pastebin'd


    So basically how do I get the submenus not to affect the original menus? Thanks in advance.
    Last edited by Varmer; 10-24-2010 at 05:44 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    #nav li {
    position:relative;
    }
    .hassubmenu ul{
    /*float:left;*/
    display:none;
    left:8.5em;
    position:absolute;
    top:0;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Varmer (10-24-2010)

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Works perfectly thank you :>


  •  

    Posting Permissions

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