CSS Menu Closes When Clicking Links Inside Dropdown Using Firefox :Focus Problem

HTML & CSS
1

I have a pure CSS drop down menu that works great in all browsers except Firefox. My problem is that when i click on any link inside my drop down menu it just closes without going to the linked page. It use to work in firefox but for some reason it has just stopped working. I don’t have any problems in any other browsers except firefox. Can anyone here provide a helpful solution? I have now been pulling my hair out for weeks trying to figure this problem out with no luck.

Here is My CSS





.cqd_wrapper {
  margin:0 auto;
  display:block;
  position: relative;
  z-index:9999;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height: 1;
}
.cqd_wrapper {
  	margin: 0 0 0 380px;
    max-width: 90px;
    position: absolute;
    width: 90px;
}
.cqd_container {
    height: 40px;
    max-width: 90px;
    width: 90px;
}
.cqd_wrapper .cqd_container {
	 margin-top: 10px;
     max-width: 90px;
     width: 90px;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
	 border-radius: 3px 3px 0 0;

}
.cqd_container .cqdm {
    list-style: none outside none;
    margin: 0;
    max-width: 90px;
    padding: 0;
    width: 90px;
}

.cqdm .menuitem_fullwidth {
  max-width: 90px;
  outline: 0 none;
  position: static;
  width: 90px;
}
.cqdm > li > a, .cqdm > li > span {
  display: block;
  line-height: 1.3;
  outline: 0 none;
  padding: 4px 7px;
  text-decoration: none;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
    border-radius:0 0 3px 3px;
}

.cqd_lt .cqd_container > ul > li:focus > span {
	background-color: #FFFFFF;
	color: #4C6599;
	border-color: #4C6599 #DDDDDD;
	border-radius: 3px 3px 0 0;
	border-style: solid;
	border-width: 2px 1px 0;
	-moz-box-shadow: 2px 0 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 2px 0 0 rgba(0, 0, 0, 0.2);
	box-shadow: 2px 0 0 rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 999999;
}

.cqd_lt .cqd_container > ul > li:hover > span {
	color: #4C6599;
	cursor: pointer;
}

.cqdm > li > a {
  padding-bottom:10px;
}

.cqdm .dropdown_1column,
.cqdm .dropdown_2columns,
.cqdm .dropdown_3columns,
.cqdm .dropdown_4columns,
.cqdm .dropdown_5columns,
.cqdm .cqdm_drop_fw {
  margin:0;
  display:none;
  position:absolute;
  top:40px;
  left:0;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

.cqdm .dropdown_1column {width: 135px;}
.cqdm .dropdown_2columns {width: 290px;}
.cqdm .dropdown_3columns {width: 445px;}
.cqdm .dropdown_4columns {width: 600px;}
.cqdm .dropdown_5columns {width: 755px;}
.cqdm .cqdm_drop_fw {
   left: 0;
   padding: 5px 0;
   top: 50px;
   width: 1145px;
   -webkit-border-radius: 0 0 3px 3px;
   -moz-border-radius:0 0 3px 3px;
   border-radius:0 0 3px 3px;

}
.cqd_wrapper .dropdown_right {
  left:auto;
  right:-1px;
}
.cqd_wrapper .cqdm li.menuitem_right .cqdm_drop_fw {
  left:auto;
  right:8px;
}

.cqdm li:focus > nav {
  display: block;
}

.cqdm .col_one_sixth,
.cqdm .col_one_fifth,
.cqdm .col_one_quarter,
.cqdm .col_one_third,
.cqdm .col_two_fifths,
.cqdm .col_half,
.cqdm .col_three_fifths,
.cqdm .col_two_thirds,
.cqdm .col_three_quarters,
.cqdm .col_four_fifths,
.cqdm .col_five_sixths,
.cqdm .col_full {
  display: inline-block;
  margin-left: 1.5%;
  vertical-align: top;
}
.cqdm .col_one_sixth {width:14.66667%;}
.cqdm .col_one_fifth {width:18%;}
.cqdm .col_one_quarter {
  margin: 0 15px;
  padding-bottom: 0;
  width: 17%;
	
}
.cqdm .col_one_third {width:31.33333%;}
.cqdm .col_two_fifths {width:38%;}
.cqdm .col_half {width:48%;}
.cqdm .col_three_fifths {width:58%;}
.cqdm .col_two_thirds {width:64.66667%;}
.cqdm .col_three_quarters {width:73%;}
.cqdm .col_four_fifths {width:78%;}
.cqdm .col_five_sixths {width:81.33333%;}
.cqdm .col_full {width:98%;}


/* Use the firstcolumn class for the first element of a new row of content */
.cqdm .firstcolumn {
  margin-left: 0;
  clear: left;
}


.cqdm p {
  margin:0;
  margin-bottom:18px;
}
.cqdm .strong {
  font-weight:bold;
}
.cqdm .italic {
  font-style:italic;
}

.cqdm .parent_title {
  display: block;
  font-size: 0.95em;
  font-weight: bold;
  margin-top:7px;
  padding-top: 10px;
}

.cqdm .subtitle {
  font-size: 12px;
  font-weight: normal;
  margin: 0 5px;
  margin-top:7px;
}


.cqdm li a {
  text-decoration:none;
}
.cqdm .pusher { /* Use this pucher if you want to give more vertical spacing between your rows of content */
  margin-top:18px;
}

.cqdm li .black_box,
.cqdm li .dark_grey_box {
  margin: -8px 0 18px 0;
  color: #eeeeee;
  text-shadow: 1px 1px 1px #000;
  padding:8px 12px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.cqdm li ul {
  list-style:none;
  padding:0;
  margin:0 0 12px 0;
}
.cqdm li ul li {
  float: left;
  font-size: 0.97em;
  line-height: 1.675;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
}
.cqdm li ul li a {
  padding:0;
}

.cqdm li .greybox li {
  margin:0 0 4px 0;
  width:88%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.cqd_lt .cqd_container > ul > li:focus,
.cqd_lt .cqd_container .cqdm > .active,
.cqd_lt .cqd_container > ul > .menuitem_nodrop:focus {
  background-color: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.cqd_lt .cqd_container > ul > li > a,
.cqd_lt .cqd_container > ul > li > span,
.cqd_lt .cqd_container .cqdm > li.noactive a,
.cqd_lt .cqd_container .cqdm > li.noactive span {
  color:#FFFFFF;
}
.cqd_lt .cqd_container > ul > li:focus > span {
  color:#161616;
  text-shadow: 1px 1px 1px #fff;
}

.cqd_lt .cqdm > li > nav {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #DDDDDD;
  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.2);
}

.cqd_white {
  background: none repeat scroll 0 0 #BDC3C7;
  border-image: none;
}


.cqd_lt .cqd_white li nav a {color:#222222;}
.cqd_lt .cqd_white li nav a:focus {color:#777;}
.cqd_lt .cqd_white li ul li a:focus {color:#777;}

.cqd_lt .cqd_white .parent_title li a {
  color: #222222;
  position: relative;
}


.cqd_lt .cqd_white .subtitle li a {
  color: #7F8C8D;
}

.cqd_lt .cqd_white .subtitle li a:hover {
  color: #333333;
}

.cqdm_dark_theme .cqd_container .cqdm > li.noactive,
.cqd_lt .cqd_container .cqdm > li.noactive {
  background-color:transparent;
  border:none;
}


@media only screen and (max-width: 1023px) {

  .cqd_wrapper {
    max-width: 95%;
    width: 95%;
  }
  .cqd_wrapper .cqd_container {
    float: left;
    height: auto;
    margin-top: 10px;
    max-width: 90px;
    padding: 0;
    width: 90px;
  }
  .cqd_wrapper .cqd_container .cqdm {
    width:98%;
    margin:0;
  }

  .cqd_wrapper .cqdm > li {
    height:40px;
    position:static;
    float:left;
    right:auto;
  }
  .cqd_wrapper .cqdm > li.menuitem_right {
    float:right;
  }

  .cqd_wrapper .cqdm .dropdown_1column,
  .cqd_wrapper .cqdm .dropdown_2columns,
  .cqd_wrapper .cqdm .dropdown_3columns,
  .cqd_wrapper .cqdm .dropdown_4columns,
  .cqd_wrapper .cqdm .dropdown_5columns,
  .cqd_wrapper .cqdm .cqdm_drop_fw,
  .cqd_wrapper .cqdm .dropdown_right {
    top:auto;
    right:auto;
    left:auto;
    float:left;
    border-top: none;
    padding:2%;
    margin:-1px 0 0 -1px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
  }
  .cqdm .dropdown_1column  {
    width: 12.6666%;
  }
  .cqdm .dropdown_2columns  {
    width: 29.3333%;
  }
  .cqdm .dropdown_3columns  {
    width: 44%;
  }
  .cqdm .dropdown_4columns  {
    width: 60.6666%;
  }
  .cqdm .dropdown_5columns  {
    width: 79.3333%;
  }
  .cqdm .cqdm_drop_fw  {
    width: 94%;
  }
  .cqd_wrapper .cqdm .dropdown_right {
    left:auto;
    right:1%;
  }
  .cqd_wrapper .cqdm .cqdm_drop_fw,
  .cqd_wrapper .cqdm li.menuitem_right .cqdm_drop_fw {
    left: 0;
    margin: 0;
    right: auto;
    top: 50px;
  }

  .cqdm .contact_form label {
    width:92%;
  }
  .cqdm .contact_form input,
  .cqdm .contact_form textarea {
    width:92%;
  }
  .cqdm .contact_form .form_buttons {
    margin:4px 0 0 0;
  }

}


@media only screen and (max-width:768px) {


  .cqd_wrapper {
    float: none;
    margin: 0 auto;
    width: 100%;
	top: 382px;
  }
  .cqdm_vertical_left,
  .cqdm_vertical_right {
    float:none;
  }
  .cqd_wrapper .cqd_container {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  .cqd_wrapper .cqd_container .cqdm {
    width:100%;
    margin:0;
    padding: 0;
  }
  .cqd_container .cqdm > li,
  .cqd_container .cqdm > li:focus,
  .cqd_container .cqdm > li.menuitem_right,
  .cqd_container .cqdm > li.menuitem_right:focus {
    float:left;
    width:100%;
    display: block;
    padding-right:0;
    margin-right:0;
  }
  .cqd_wrapper .cqdm li.menuitem_right .cqdm_drop_fw {
    top:auto;
    right: auto;
    left: 0;
  }


  .cqd_container .cqdm .cqdm_drop_fw  {
    width: 100%;
  }

  .cqdm .col_one_sixth,
  .cqdm .col_one_fifth,
  .cqdm .col_one_quarter,
  .cqdm .col_one_third,
  .cqdm .col_two_fifths,
  .cqdm .col_half,
  .cqdm .col_three_fifths,
  .cqdm .col_two_thirds,
  .cqdm .col_three_quarters,
  .cqdm .col_four_fifths,
  .cqdm .col_five_sixths,
  .cqdm .col_full {
    display: block;
    float: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 33%;
    width: 33%;
  }
  .cqdm > .col_one_sixth,
  .cqdm > .col_one_fifth,
  .cqdm > .col_one_quarter,
  .cqdm > .col_one_third,
  .cqdm > .col_two_fifths,
  .cqdm > .col_half,
  .cqdm > .col_three_fifths,
  .cqdm > .col_two_thirds,
  .cqdm > .col_three_quarters,
  .cqdm > .col_four_fifths,
  .cqdm > .col_five_sixths,
  .cqdm > .col_full {
    margin-left: 2%;
    margin-right: 2%;
  }

  .cqd_wrapper .cqdm .levels li ul {
    position: relative;
    top:auto;
    margin:0;
    padding:0;
      -webkit-border-radius: 0;
    -moz-border-radius: 0;
      border-radius: 0;
    left: auto;
    border:none;
    background:none;
  }


  .cqd_wrapper .cqdm .levels li{
    float: left;
    width:100%;
  }


  .cqd_wrapper .cqdm .levels li:focus > ul {
    left: auto;
  }


  .cqd_lt ul .levels a.parent,
  .cqd_lt ul .levels a.parent:focus,
  .cqd_lt ul .levels li ul,
  .cqd_wrapper .cqd_lt ul .levels a.parent,
  .cqd_wrapper .cqd_lt ul .levels a.parent:focus,
  .cqd_wrapper .cqd_lt ul .levels li ul {
    background: none;
    border:none;
  }

  .cqdm_drop_fw .divider {
    background-color: #DDDDDD;
    height: 1px;
    margin: 12px 0;
    overflow: hidden;
  }

  .cqdm_drop_fw .cqdm_all_cats {
	bottom: 10px;
    color: #9d3b53;
    font-size: 14px;
    position: absolute;
    right: 86px;
	
  }

  .cqdm_drop_fw .all_cats {
	display: block;
    margin: 0;
    padding: 18px 0 0;
	
  }

  .cqdm_drop_fw .cqdm_all_cats:hover {
	color: #bf5a70;
	
  }


}


@media only screen and (max-width:479px) {


  .cqd_wrapper {
	max-width: 90%;
    width:90%;
  }


  .cqd_container .cqdm .cqdm_drop_fw  {
    max-width: 100%;
    width: 100%;
  }

  .cqdm .col_one_sixth,
  .cqdm .col_one_fifth,
  .cqdm .col_one_quarter,
  .cqdm .col_one_third,
  .cqdm .col_two_fifths,
  .cqdm .col_half,
  .cqdm .col_three_fifths,
  .cqdm .col_two_thirds,
  .cqdm .col_three_quarters,
  .cqdm .col_four_fifths,
  .cqdm .col_five_sixths,
  .cqdm .col_full {
    display: block;
    float: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 50%;
    width: 50%;
  }

  .cqdm_drop_fw .divider {
    background-color: #DDDDDD;
    height: 1px;
    margin: 12px 0;
    overflow: hidden;
  }

  .cqdm_drop_fw .cqdm_all_cats {
	bottom: 10px;
    color: #9d3b53;
    font-size: 14px;
    position: absolute;
    right: 86px;
	
  }

  .cqdm_drop_fw .all_cats {
	display: block;
    margin: 0;
    padding: 18px 0 0;
	
  }

  .cqdm_drop_fw .cqdm_all_cats:hover {
	color: #bf5a70;
	
  }


}

.fa-caret-down:before {
    color: #FFFFFF;
    font-size: 18px;
    margin: 1px 8px;
    position: absolute;
}

.fa {
    display: inline;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.cqdm .small {
	color: #888888;
	display: block;
	font-size: xx-small;
	font-weight: normal;
	margin: 0;
	padding: 0;
}


.cqdm .small_count {
	color: #C0C1C2;
    display: inline-block;
    font-size: xx-small;
	font-weight: normal;
    margin: 0;
    padding: 0;
}

.fa-angle-right:before {
	color: #555555;
}


.cqdm_drop_fw .divider {
    background-color: #DDDDDD;
    height: 1px;
    margin: 12px 0;
    overflow: hidden;
    width: 100%;
}

.cqdm_drop_fw .cqdm_all_cats {
	bottom: 8px;
    color: #9d3b53;
    font-size: 14px;
    position: absolute;
    right: 150px;
	
}

.cqdm_drop_fw .all_cats {
	display: block;
    margin: 0;
    padding: 18px 0 0;
	
}

.cqdm_drop_fw .cqdm_all_cats:hover {
	color: #bf5a70;
	
}

Here is my HTML





<div class="cqd_wrapper cqd_lt">



    <div class="cqd_container cqd_white">



        <ul class="cqdm">



            <li class="menuitem_fullwidth" onclick="return true" tabindex="0"><span class="cqdb-sub-title">Want Ads By
            <br />
            Category <i class="fa fa-caret-down"></i></span>


       <nav class="cqdm_drop_fw">


				<div class="col_one_quarter">

	<h2 class="parent_title"><li><a href="fs/Motors/18122">
																							<div></div>
											Motors
                                            <i class="fa fa-angle-right"></i>
                        				<span class="small_count">(0)</span></a></li></h2>

                        			
													

											
<ul>

        <h3 class="subtitle subcategory_18124">
            <li><a href="fs/Boats/18124">
                Boats
            </a>
        </li>
      </h3>

        <h3 class="subtitle subcategory_18123">
            <li><a href="fs/Cars/18123">
                Cars
            </a>
        </li>
      </h3>

        <h3 class="subtitle subcategory_18131">
            <li><a href="fs/Commercial-Vehicles/18131">
                Commercial Vehicles
            </a>
        </li>
      </h3>

        <h3 class="subtitle subcategory_18126">
            <li><a href="fs/Motorcycles/18126">
                Motorcycles
            </a>
        </li>
      </h3>

</ul>
					

                    </div>

           									<div class="col_one_quarter">

										<h2 class="parent_title"><li><a href="fs/Antiques/1">
																							<div></div>
											Antiques
                                            <i class="fa fa-angle-right"></i>
                        				<span class="small_count">(0)</span></a></li></h2>

                        			
													

											
<ul>

        <h3 class="subtitle subcategory_2">
            <li><a href="fs/Antiquities/2">
                Antiquities
            </a>
        </li>
      </h3>

        <h3 class="subtitle subcategory_19">
            <li><a href="fs/Architectural-and-Garden/19">
                Architectural &amp; Garden
            </a>
        </li>
      </h3>

        <h3 class="subtitle subcategory_59">
            <li><a href="fs/Asian-Antiques/59">
                Asian Antiques
            </a>
        </li>
      </h3>

        <h3 class="subtitle subcategory_156">
            <li><a href="fs/Books-and-Manuscripts/156">
                Books &amp; Manuscripts
            </a>
        </li>
      </h3>

</ul>
					

                    </div>




			
<div class="divider"></div>

			<h3 class="all_cats">
            	<a class="cqdm_all_cats" href="#">View All Categories</a>

                </h3>

				</nav>
			</li>
		</ul>
	</div>
</div>

Thank you in advance.

2

Krazy, welcome to the forums.

When I paste the code that you have posted into a file, it does not create a drop-down menu. It does create an indented list.

Please click the link in the footer of my post and read our instructions for posting code.

We prefer that you create a minimal working page that demonstrates the problem… starts with <!doctype…>, ends with </html>, works when copied into a new file.

Clean up the code so it is human readable… indented preferably. No need to include superfluous stuff that does not contribute to the issue being presented.

Thank YOU very much IN ADVANCE.

3

This is the code that you posted. Copy it into a new file and give it .htm suffix, then double click it and open it in your browser. There are only 3 selectors in the CSS to address all of that HTML. Every other line of HTML flags a legitimate validation error. The HTML alone is badly malformed (although surprisingly all tags are properly matched). It does not give us much to go on. I hope this helps you see what we don’t see. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1219383-CSS-Menu-Closes-When-Clicking-Links-Inside-Dropdown-Using-Firefox-Focus-Problem
2014.07.26 23:45
Krazy
-->
<style type="text/css">
.cqd_wrapper {
    margin:0 auto;
    display:block;
    position: relative;
    z-index:9999;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height: 1;
}
.cqd_wrapper {
    margin: 0 0 0 380px;
    max-width: 90px;
    position: absolute;
    width: 90px;
}
.cqd_container {
    height: 40px;
    max-width: 90px;
    width: 90px;
}
.cqd_wrapper .cqd_container {
    margin-top: 10px;
    max-width: 90px;
    width: 90px;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}
</style>
</head>
<body>
<div class="cqd_wrapper cqd_lt">
    <div class="cqd_container cqd_white">
        <ul class="cqdm">
            <li class="menuitem_fullwidth" onclick="return true" tabindex="0">
                <span class="cqdb-sub-title">Want Ads By<br />Category <i class="fa fa-caret-down"></i></span>
                <nav class="cqdm_drop_fw">
                    <div class="col_one_quarter">
                        <h2 class="parent_title">
                            <li>
                                <a href="fs/Motors/18122">
                                    <div></div>
                                    Motors<i class="fa fa-angle-right"></i><span class="small_count">(0)</span>
                                </a>
                            </li>
                        </h2>
                        <ul>
                            <h3 class="subtitle subcategory_18124">
                                <li><a href="fs/Boats/18124">Boats</a></li>
                            </h3>
                            <h3 class="subtitle subcategory_18123">
                                <li><a href="fs/Cars/18123">Cars</a></li>
                            </h3>
                            <h3 class="subtitle subcategory_18131">
                                <li><a href="fs/Commercial-Vehicles/18131">Commercial Vehicles</a></li>
                            </h3>
                            <h3 class="subtitle subcategory_18126">
                                <li><a href="fs/Motorcycles/18126">Motorcycles</a></li>
                            </h3>
                        </ul>
                    </div>
                    <div class="col_one_quarter">
                        <h2 class="parent_title">
                            <li>
                                <a href="fs/Antiques/1">
                                    <div></div>
                                    Antiques<i class="fa fa-angle-right"></i><span class="small_count">(0)</span>
                                </a>
                            </li>
                        </h2>
                        <ul>
                            <h3 class="subtitle subcategory_2">
                                <li><a href="fs/Antiquities/2">Antiquities</a></li>
                            </h3>
                            <h3 class="subtitle subcategory_19">
                                <li><a href="fs/Architectural-and-Garden/19">Architectural &amp; Garden</a></li>
                            </h3>
                            <h3 class="subtitle subcategory_59">
                                <li><a href="fs/Asian-Antiques/59">Asian Antiques</a></li>
                            </h3>
                            <h3 class="subtitle subcategory_156">
                                <li><a href="fs/Books-and-Manuscripts/156">Books &amp; Manuscripts</a></li>
                            </h3>
                        </ul>
                    </div>
                    <div class="divider"></div>
                    <h3 class="all_cats"><a class="cqdm_all_cats" href="#">View All Categories</a></h3>
                </nav>
            </li>
        </ul>
    </div>
</div>
</body>
</html>