#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    3
    Rep Power
    0

    Drop line menu hover problem in Firefox


    HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox.

    So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative.




    But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this.



    I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help!

    Advance thanks for those who read this! Hopefully someone can help me out with this!

    EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean.

    CSS CODE:
    Code:
    * {
    margin:0;
    padding:0;
    }
    
    #nav {
    	list-style:none;
    	position:relative;
    }
    
    #nav li {
    	float:left;
    	text-align:center;
    }
    
    #nav a {
    	display:block;
    	text-decoration:none;
    }
    
    #nav a:active, #nav a:focus, #nav a:hover {
    	background:#254563;
    }
    
    /* --------- Sub Nav --------- */
    #nav li.current ul {
    	left:0px;
    
    
    }
    
    #nav ul {
    	position:absolute;
    	left:-999em;
    	list-style:none;
    	padding:0 0 0;
    	width: 500px;
    }
    
    #nav ul li {
    	width: auto;
    	margin: 3px 3px 0 0px;
    
    }
    
    #nav ul a {
    	font-size: 12px;
    	height: auto;
    	padding: 5px 10px;
    	background: #dfeec9;
    	border-radius: 8px;
    	-moz-border-radius: 8px;
    	width: auto;
    }
    
    #nav li:active ul, #nav li:hover ul { 
    	height: 30px;
    	left: 10px;
    	position: relative;
    	padding: 0px 3px 5px 3px;
    	background: none;
    	width: 500px;
    }
    
    .navi01 {	
    	display: block;
    	padding-top: 0px;
    	padding-left: 0px;
    	width: 33px;
    	height: 44px;
    	text-decoration: none;
    	background: url(images/navi_01.png);
    	}
    
    .navi02 {	
    	display: block;
    	padding-top: 0px;
    	padding-left: 0px;
    	width: 133px;
    	height: 44px;
    	text-decoration: none;
    	background: url(images/navi_02.png);
    	}
    
    .navi03 {	
    	display: block;
    	padding-top: 0px;
    	padding-left: 0px;
    	width: 86px;
    	height: 44px;
    	text-decoration: none;
    	background: url(images/navi_03.png);
    	}
    
    .navi04 {	
    	display: block;
    	padding-top: 0px;
    	padding-left: 0px;
    	width: 83px;
    	height: 44px;
    	text-decoration: none;
    	background: url(images/navi_04.png);
    	}
    
    .navi05 {	
    	display: block;
    	padding-top: 0px;
    	padding-left: 0px;
    	width: 92px;
    	height: 44px;
    	text-decoration: none;
    	background: url(images/navi_05.png);
    	}
    
    .navi06 {	
    	display: block;
    	padding-top: 0px;
    	padding-left: 0px;
    	width: 82px;
    	height: 44px;
    	text-decoration: none;
    	background: url(images/navi_06.png);
    	}
    
    .navi07 {	
    	display: block;
    	padding-top: 0px;
    	padding-left: 0px;
    	width: 30px;
    	height: 44px;
    	text-decoration: none;
    	background: url(images/navi_07.png);
    	}
    HTML NAV CODE:
    Code:
     <ul id="nav"> 
    			<li><span class="navi01">&nbsp;</span></li> 
    			  <li><a href="originalart/gallery.php"><span class="navi02">&nbsp;</span></a> 
    <ul> 
    	  <li><a href="originalart/gallery.php">Original Art</a></li> 
    	  <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> 
    	  <li><a href="commissions/gallery_commissions.php">Commissions</a></li> 
    	  <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> 
    	  </ul> 
    </li> 
    			<li><a href=""><span class="navi03">&nbsp;</span></a> 
    <ul> 
    	  <li><a href="info.php">Info</a></li> 
    	  <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> 
    	  </ul> 
     
    </li> 
    			<li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04">&nbsp;</span></a></li> 
    			<li><a href="http://blog.luisarafidi.com/"><span class="navi05">&nbsp;</span></a> 
     <ul>	<li><a href="#">Old Artwork</a></li> 
    	  <li><a href="#">More</a></li> 
    </ul> 
    </li> 
    			<li><a href=""><span class="navi06">&nbsp;</span></a></li> 
    			<li><span class="navi07">&nbsp;</span></li> 
    </ul>
  2. #2
  3. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    Welcome to DevShed, bw-inc

    If I picture your problem right, from a quick skim of your CSS, it appears you're having a positioning problem. The submenu is expanding the actual parent <li> tag that contains them, as your description states.

    The reason this is happening is because you redefine that child submenu <ul> tag on hover from absolute to relative. To avoid expanding the containing parent element, you need to make the child element absolute.

    Code:
    #nav li:active ul, #nav li:hover ul { 
    	height: 30px;
    	left: 10px;
    	position: relative; absolute;
    	padding: 0px 3px 5px 3px;
    	background: none;
    	width: 500px;
    }
    However, to contain an absolutely positioned element, you need to define the parent with a relative position.

    Code:
    #nav li {
    	float:left;
    	text-align:center;
    	position: relative;
    }
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    3
    Rep Power
    0
    Originally Posted by f_nietzsche
    Welcome to DevShed, bw-inc

    If I picture your problem right, from a quick skim of your CSS, it appears you're having a positioning problem. The submenu is expanding the actual parent <li> tag that contains them, as your description states.

    The reason this is happening is because you redefine that child submenu <ul> tag on hover from absolute to relative. To avoid expanding the containing parent element, you need to make the child element absolute.

    Code:
    #nav li:active ul, #nav li:hover ul { 
    	height: 30px;
    	left: 10px;
    	position: relative; absolute;
    	padding: 0px 3px 5px 3px;
    	background: none;
    	width: 500px;
    }
    However, to contain an absolutely positioned element, you need to define the parent with a relative position.

    Code:
    #nav li {
    	float:left;
    	text-align:center;
    	position: relative;
    }
    Thanks for commenting! This makes a lot of sense. I'll give this a shot and see how this goes!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    3
    Rep Power
    0
    Problem solved on my menu! Thank you!

IMN logo majestic logo threadwatch logo seochat tools logo