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
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Navbar positioning & submenu disappearing

    Hi,

    Please see URL: testing.backstageweb.net. Got two problems here:

    1. I want to center the navbar (links) both horizontally and vertically, don't know how without moving the nav_bkgrnd too. Perhaps I don't have the nav_bkgrnd on the right property)

    2. The "Home" menu has a sub-menu item. When you try mousing over it, it mostly disappears.

    Working with an adopted stylesheet that I don't quite get. Thank you in advance for any help. ~ John

    Code:

    Code:
    #nav {
    	position:relative;
    	line-height:1.0;
    	zoom:1;
    	z-index:99;
    	font-size:1.1em;
    	font-weight:bold;
    	}
    
    #nav li {
    	position:relative;
    	float: left;
    	}
    
    .menu#nav-primary {
    	background:url(../images/nav_bkgrnd.jpg)no-repeat;
    	/*overflow:hidden;*/
    	width:1000px;
    	height:145px;
    	margin:0;
    	}
    
    #nav-primary li {
    	margin-right: 10px;
    	}
    	
    #nav-primary a, #nav-primary a:visited  {
    	background-color:transparent;
    	padding:7px 16px;
    	color:#fff; 
    	display:block;
    	}
    
    #nav-primary a:hover, #nav-primary a:active {
    	background-color:transparent;
    	color:yellow;
    	outline:0;
    	}

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    1. Add this to the UL

    float:left; width:100%; text-align:center
    and add this to the LI

    display:inline-block --- and remove the float:left - from the LI as well.

    2. This should be fixed as well with #1.

  • Users who have thanked aaronhockey_09 for this post:

    johndove (12-01-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks aaron, got the first part solved, but adding display:inline-block didn't fix the sub-menu from disappearing. Can't remove float:left, else the menu goes vertical.


  •  

    Posting Permissions

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