5 Replies - 782 Views - Last Post: 28 March 2015 - 01:32 PM

#1 sachinhatkar1981   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 23-March 15

CSS for navigation menu works in chrome and Firefox differently

Posted 27 March 2015 - 10:38 AM

i have problem in CSS for navigation menu
i use micromedia Dreamweaver
it display properly in chrome
but in Firefox sub-menu drops down under different item then associated with.
i have four items in main menu
(Home) (Grades) (Demo) (Products)
where (Grades) and (Products) has sub-menu.
It works fine in chrome
but in Firefox
when i hover mouse on (Grades) sub-menu of (Grades) displays under (products)
and when i hover mouse on (Products) sub-menu appears half out of screen.
please help me in working it properly.
my codes go's as follows

html
<div id="navigation">
          <ul>
            <li class="active"><a href="index.html" class="style19">Home</a></li>
            <li><a href="index.html" class="style19">Class</a>
                <ul class="style19">
                  <li><a href="http://www.classteacher.com/pre-nursery-pendrive.php" target="_blank">KG Class I and II</a></li>
                  <li><a href="http://www.classteacher.com/3rd-5th.php" target="_blank">Class III to V</a></li>
                  <li><a href="http://www.classteacher.com/6th-8th.php" target="_blank">Class VI to VIII</a></li>
                  <li><a href="http://www.classteacher.com/9th-12th.php" target="_blank">Class IX to XII</a> </li>
                </ul>
            </li>
            <li><a href="http://www.classteacher.com/pendrive_demo/application.html" target="_blank" class="style19">Demo</a></li>
            <li><a href="index.html" class="style19">Products</a>
                <ul class="style19">
                  <li><a href="http://www.classteacher.com/iPerform-offline.php" target="_blank">iPendrive</a></li>
                  <li><a href="http://www.classteacher.com/preloaded-classpad.php" target="_blank">Preloaded classpad </a></li>
                  <li><a href="http://www.classteacher.com/iperfom.php" target="_blank">iPerform Online</a></li>
                </ul>
            </li>
          </ul>
</div>




CSS
#navigation {
	width: 420px;
	height: 25px;
	margin-top: opx;
	
}

#navigation ul {
	margin-top: 0px;
	padding: 15px 0;
	list-style:none;
	
}

#navigation li {
	display: inline;
	
}

#navigation a {
	display: block;
	float: left;
	width: 100px;
	height: 27px;
	padding: 8px 0 0 0;
	text-align: center;
	text-decoration: none;
	font-size: small;
	background-image:url(../../../www.successopedia.com/img02.jpg);
}

#navigation li li a {
	display: block;
	float:left;
	width: 150px;
	height:auto;
	padding: 8px 0 0 0;
	text-align:center;
	text-decoration:none;
	font-size:small;
	background-image:none;
	background-color:#FFFFFF;
}

#navigation li {
	position: relative;
	height: 25px;
	width: 50px;
}

#navigation li li {
	width: 4em; /* force constant width of 3rd level menu items */
	margin-top: 0px;
	border:#000000 thin;
}

#navigation li ul {
	left: -500em; /* second-level lists */
	position:absolute;
	top: -100%;
	z-index: 500;
	margin-left: -120px;
	margin-top: 20px;
	border:#000000 thick;
}

#navigation li:hover ul, 
#navigation li li:hover ul, 
#navigation li li li:hover ul, 
#navigation li.sfhover ul, 
#navigation li li.sfhover ul {
	left: 98%; /* lists nested under hovered list items */
}

#navigation li:hover ul {
	left: -200%; /* overrides left position for 2nd level menu */
}



Is This A Good Question/Topic? 0
  • +

Replies To: CSS for navigation menu works in chrome and Firefox differently

#2 boomer1204   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 18-April 12

Re: CSS for navigation menu works in chrome and Firefox differently

Posted 27 March 2015 - 06:13 PM

Do you have a link to the site?
Was This Post Helpful? 0
  • +
  • -

#3 sachinhatkar1981   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 23-March 15

Re: CSS for navigation menu works in chrome and Firefox differently

Posted 27 March 2015 - 11:29 PM

ya wwww.successopedia.in
Was This Post Helpful? 0
  • +
  • -

#4 boomer1204   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 18-April 12

Re: CSS for navigation menu works in chrome and Firefox differently

Posted 28 March 2015 - 12:08 PM

Are you using the drag and drop features of dreamweaver or are you hard coding in dreamweaver? The code you shared doesn't look complete for the nav section.
Was This Post Helpful? 0
  • +
  • -

#5 boomer1204   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 18-April 12

Re: CSS for navigation menu works in chrome and Firefox differently

Posted 28 March 2015 - 12:47 PM

Also since it's only happening on Firefox I would look at a webkit selector that might be messing with alignment.

I checked it on Safari and it worked fine
Was This Post Helpful? 0
  • +
  • -

#6 sachinhatkar1981   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 23-March 15

Re: CSS for navigation menu works in chrome and Firefox differently

Posted 28 March 2015 - 01:32 PM

thanks for reply.
i have reworked lot on it.
finally it is on track....
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1