Solved

Weird CSS issue on Dropdown Menu

Posted on 2014-01-29
8
445 Views
Last Modified: 2014-01-30
I have a dropdown menu that's producing some weird results.  

The menu is designed to so that the dropdown menu stretches the width of the navigation bar.  Each dropdown menu has 4 columns of links. Each column of links has a <h2> title with a class of "headLink" at the top of it.   When I add a link to the title as in <h2 class="headlink"><a href="#">Column Head</a></h2>, the border-bottom defined in ".headlink" appears above the <h2> as opposed to under.

The rest of the menu works & looks as expected...

I'm including my CSS and simplified code:
@charset "utf-8";
/* CSS Document */

* {
	margin:0px;
	padding:0px;
}

body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#666;
	background-color:fff;

}

.content{
	width:100%;
	min-height:100%;
	position:relative;	
	height:100%;
}

.wrapper{
	width:968px;
	margin-left:auto;
	margin-right:auto;
	position:relative;	
	min-height:100%;
}

.header{
	width:100%;
	position:relative;
}

.base_nav{
	width:100%;
	position:relative;
	height:30px;	
	background-color:#006;

}

/* BASE NAV POSITION -----------------------------------------  */
/* this is for the UL under .base_nav */
#base_nav_ul{
	position:absolute;
	list-style:none;
}

#base_nav_ul li{
	float:left;
	position:relative;
	height:40px;
}

/* COLOR INFORMATION FOR base_nav_ul */
#base_nav_ul a{
	display:block;
	padding:5px;
	color:#fff;
	text-decoration:none;
	float: left;
}

#base_nav_ul a:hover{
	color:#bc8e30;
	text-decoration:none;
}

/*---------------  DROP DOWN ------------------   */

#base_nav_ul ul{
	list-style:none;
	position:absolute;
	left:-9999px;
	margin-top:30px;
}

#base_nav_ul ul li{
	padding-top:1px;
	float:none;	
}

#base_nav_ul ul a{
	white-space:nowrap;	
}

#base_nav_ul li:hover ul{
	left:0px;	
	z-index:100;
}

#base_nav_ul li:hover a{
	color:#bc8e30;
	text-decoration:underline;	
}

/*--------------- END DROP DOWN ----------------  */
.base_nav_link{
	margin-left:6px;
	width:90px;
	margin-right:26px;
	background-repeat:no-repeat;
	font-size:12px !important;
	margin-top:3px;
}


.base_nav_link:hover{
	margin-left:6px;
	width:90px;
	margin-right:26px;
	background-repeat:no-repeat;
	
}

.base_nav_link:hover a{
	text-decoration:none !important;	
}


/* This is the actual dropdown box */
.link_div{
	position:relative;
	margin-top:-4px;
	dispaly:block;
	width:962px;
	height:375px;	
	background-color:#FFF;
	border-left:#ccc solid 1px;
	border-right:#ccc  solid 1px;
	border-bottom:#ccc  solid 1px;
	-moz-box-shadow: 3px 3px 4px #ccc;
	-webkit-box-shadow: 3px 3px 4px #ccc;
	box-shadow: 3px 3px 4px #ccc;
	padding-top:4px;
	padding-left:4px;
	
}

.link_div ul{
	margin:0px !important;
	padding:0px !important;
	position:relative !important;
	
	
}

.link_div li{
	position:relative !important;
	color:#333;
	clear:both;	
	margin:0px !important;
	padding:0px !important;
	height:16px !important;
	margin-bottom:4px !important;
	margin-left:10px !important;
}

.link_div li a{
	color:#666 !important;
	padding:0px !important;
	margin:0px !important;
	text-decoration:underline !important;
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
}

.link_div li a:hover{
	background-color:inherit !important;
	margin:0px !important;
	padding:0px !important;	
	text-decoration:underline;
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
}


.bottom{
	width:100% !important;	
	overflow: hidden;
	padding-left:6px;
	margin-top:10px;
	font-size:12px;
}

.bottom a{
	font-size:12px;
	color:#666;
	width:auto !important;
	text-decoration:underline !important;
	display:inline !important;
	float:none !important;
}

.bottom a:hover{
	color:#333;
	text-decoration:none !important;
	background:none !important;	
}

/* --------------------- END LINKS --------------------------- */

.link_a{
	position:relative;
	width:200px;
	margin-right:32px;
	float:left;	
}

.link_b{
	position:relative;
	width:200px;
	margin-right:32px;
	float:left;	
}

.link_c{
	position:relative;
	width:200px;
	margin-right:32px;
	float:left;	
}

.link_d{
	position:relative;
	width:200px;
	float:left;	
}

.dropdown a{
	padding-left:10px;
	padding-right:10px;
}

/* DROP DOWN MENUS */
.headLink {
	font-size:13px !important; 	
	font-family:Verdana, Geneva, sans-serif;
	border-bottom:#666 solid 1px;
	margin-bottom:5px;
	padding-bottom:5px;
	display:block;
	width:100px;
}

.headLink a:link, .headLink a:visited{
	color:#666 !important;
	background:none !important;
	width:100%;
	
}

.headLink a:hover{
	color:#bc8e30 !important;
	background:none !important;	
}

/* DD = DROP DOWN LINKS  - for MENUS */
.ddLinks a:links, .ddLinks a:visited{
	color:#666;
	text-decoration:none;
}

.ddLinks a:hover{
	color:#bc8e30 !important;
	text-decoration:underline !important;
}

/* END DROP DOWN MENUS */

Open in new window



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test DD Menu</title>
<link href="styles/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="content">
	<div class="wrapper">
    	<div class="header">
        	<div class="base_nav">
                <ul id="base_nav_ul">
                    <!-- 01 -->
                    <li class="base_nav_link" style="width:78px;"><a href="#">Link 01</a>
                        <ul>
                            <li>
                                <div class="link_div" style="margin-left:-6px;">
                                    <div class="link_a">
                                    	<h2 class="headLink"><a href="#">Column A</a></h2>
                                        <ul class="ddLinks">
                                        	<li><a href="1">Sub Link 1</a></li>
                                        </ul>
                                    </div>
                                    <div class="link_b">Column B</div>
                                    <div class="link_c">Column C</div>
                                    <div class="link_d">Column D</div>
                                    <div style="clear:both;"></div>
                                	<div class="bottom">Bottom Code</div>
                           		</div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 01 -->
                    <!-- 02 -->
                    <li class="base_nav_link" style="width:60px;"><a href="#">Link 02</a>
                        <ul>
                            <li>
                                <div class="link_div" style="margin-left:-116px;">
                                    <div class="link_a">Column E</div>
                                    <div class="link_b">Column F</div>
                                    <div class="link_c">Column G</div>
                                    <div class="link_d">Column H</div>
                                    <div style="clear:both;"></div>
                                	<div class="bottom">Bottom Code</div>
                            	</div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 02 -->
                    <!-- 03 -->
                    <li class="base_nav_link" style="width:80px"><a href="#">Link 03</a>
                        <ul>
                            <li>
                                <div class="link_div" style="margin-left:-208px;">
                                    <div class="link_a">Column I</div>
                                    <div class="link_b">Column J</div>
                                    <div class="link_c">Column K</div>
                                    <div class="link_d">Column L</div>
                                    <div style="clear:both;"></div>
                                    <div class="bottom">Bottom Code</div>
                            	</div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 03 -->
                    <!-- 04 -->
                    <li class="base_nav_link" style="width:80px"><a href="#">Link 04</a>
                        <ul>
                            <li>
                                <div class="link_div" style="margin-left:-320px;">
                                    <div class="link_a">Column M</div>
                                    <div class="link_b">Column N</div>
                                    <div class="link_c">Column O</div>
                                    <div class="link_d">Column P</div>
                                    <div style="clear:both;"></div>
                                    <div class="bottom">Bottom Code</div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 04 -->
                    <!-- 05 -->
                    <li class="base_nav_link" style="width:79px"><a href="#">Link 05</a>
                        <ul>
                            <li>
                                <div class="link_div" style="margin-left:-432px;">
                                    <div class="link_a">Column Q</div>
                                    <div class="link_b">Column R</div>
                                    <div class="link_c">Column S</div>
                                    <div class="link_d">Column T</div>
                                    <div style="clear:both;"></div>
                                    <div class="bottom">Bottom Code</div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 05 -->
                    <!-- 06 -->
                    <li class="base_nav_link"><a href="#">Link 06</a>
                        <ul>
                            <li >
                                <div class="link_div" style="margin-left:-543px;">
                                    <div class="link_a">Column U</div>
                                    <div class="link_b">Column V</div>
                                    <div class="link_c">Column W</div>
                                    <div class="link_d">Column X</div>
                                    <div style="clear:both;"></div>
                                    <div class="bottom">Bottom Code</div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 06 -->
                    <!-- 07 -->
                    <li class="base_nav_link" style="width:80px"><a href="#">Link 07</a>
                        <ul>
                            <li>
                                <div class="link_div" style="margin-left:-665px;">
                                    <div class="link_a">Column Y</div>
                                    <div class="link_b">Column Z</div>
                                    <div class="link_c">Column AA</div>
                                    <div class="link_d">Column BB</div>
                                    <div style="clear:both;"></div>
                                    <div class="bottom">Bottom Code</div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 07 -->
                    <!-- 08 -->
                    <li class="base_nav_link" style="width:84px"><a href="#">Link 08</a>
                        <ul>
                            <li>
                                <div class="link_div" style="margin-left:-777px;">
                                    <div class="link_a">Column CC</div>
                                    <div class="link_b">Column DD</div>
                                    <div class="link_c">Column EE</div>
                                    <div class="link_d">Column FF</div>
                                    <div style="clear:both;"></div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- END 08 -->
                </ul>
        	</div>
		</div>
    </div>
</div>

</body>
</html>

Open in new window


So I'm not sure why the H2 border isn't working properly. I'd appreciate any insight.

Thanks!
0
Comment
Question by:slightlyoff
  • 4
  • 4
8 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818770
Change to
.headLink  {
to
.headLink a {

Also, I think you are better off using a div rather than h2 and making it <strong> or bold in css.

The reason is your page should have 1 main topic that is not duplicated (h1) then multiple supporting topics (h2).  

By placing the h2 in the nav, you are duplicating the same sub topic all over the site.  That is just my personal preference though.
0
 
LVL 1

Author Comment

by:slightlyoff
ID: 39818823
Thanks!  Changing to a DIV makes sense - but quick question...

My thought behind having a plain .headLink  as opposed to .headLink a was that some column heads do not have a link, but I wanted them to look the same.  I know I could achieve this with two different classes, but I thought perhaps only needing to change one would be better.

Does that make sense?

Thanks for the quick reply!  I made the change and it works.
0
 
LVL 1

Author Comment

by:slightlyoff
ID: 39818841
I spoke a little too soon...

I changed the code to this:
<div class="headLink"><a href="#">Column A</a></div>
                                        <ul class="ddLinks">
                                        	<li><a href="1">Sub Link 1</a></li>
                                        </ul>

Open in new window


and the underline now works, but it's no longer a link. (or at least, no longer clickable)
It looks good though... :)
0
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818866
I see.

/* DROP DOWN MENUS */
.headLink  {
	font-size:13px !important; 	
	font-family:Verdana, Geneva, sans-serif;
	/*border-bottom:#666 solid 1px;  /// move border style to ".headlink a"  */
	margin-bottom:5px;
	padding-bottom:5px;
	display:block;
	width:100px;
}
/* move border here */
.headLink a {
  border-bottom:#666 solid 1px;
}
}
.headLink a:link, .headLink a:visited{
	color:#666 !important;
	background:none !important;
	width:100%;
	
}

.headLink a:hover{
	color:#bc8e30 !important;
	background:none !important;	
}

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39818881
http://jsbin.com/oziLUsip/2/

/* DROP DOWN MENUS */
.headLink  {
	font-size:13px !important; 	
	font-family:Verdana, Geneva, sans-serif;
	/*border-bottom:#666 solid 1px;*/
	margin-bottom:5px;
	padding-bottom:5px;
	display:block;
	width:100px;
}



.headLink a:link, .headLink a:visited{
	color:#666 !important;
	background:none !important;
	width:100%;
	 border-bottom:#666 solid 1px;
}

.headLink a:hover{
	color:#bc8e30 !important;
	background:none !important;	
   border-bottom:#666 solid 1px;
}

Open in new window

0
 
LVL 1

Author Comment

by:slightlyoff
ID: 39818897
Thank you very much for your help.  I really appreciate it.

After making the change you suggested, the link works again - except...
When you rollover the column header,  "Column A" - it seems that only the top 1/2 of the word is a link.  If you move the cursor to the bottom half of the link, it doesn't work.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39818966
That is because you have a height in link below.  Give that some height

/* DROP DOWN MENUS */
.headLink  {
      font-size:13px !important;       
      font-family:Verdana, Geneva, sans-serif;
      /*border-bottom:#666 solid 1px;*/
      margin-bottom:5px;
      padding-bottom:5px;
      display:block;
      width:100px;
   height:15px;
}

Also I found an error dispaly should be display

/* This is the actual dropdown box */
.link_div{
      position:relative;
      margin-top:-4px;
      dispaly:block;
      width:962px;
      height:375px;      
      background-color:#FFF;
      border-left:#ccc solid 1px;
      border-right:#ccc  solid 1px;
      border-bottom:#ccc  solid 1px;
      -moz-box-shadow: 3px 3px 4px #ccc;
      -webkit-box-shadow: 3px 3px 4px #ccc;
      box-shadow: 3px 3px 4px #ccc;
      padding-top:4px;
      padding-left:4px;
      
}
0
 
LVL 1

Author Closing Comment

by:slightlyoff
ID: 39820879
Thank you very much for your help!  This had been driving me crazy!
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Understanding mobile browsers 9 65
Link a VBS to an HTA 6 36
Problem with spacing columns on a row in a table 10 25
HTML &#0153 2 17
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question