Khalil Hijazi Khalil Hijazi - 5 months ago 9
CSS Question

Dropdown Menu Bar

Apparently, when I go down the list in the menu from the left side, the text becomes black and the background darkens however when i do it from the right, the text is still white. Also, when I resize the page and make it smaller, the words in the header of the menu converge with each other. I want the page to remain static when the window is resized like as in http://www.nfl.com when it's resized.
Here's my code:
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>My Webpage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
</html>


CSS:

body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
width:20%;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu ul li:hover li {
display:block;
width:100%;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
color:#000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}

Answer

With your fiddle, you did not center the li elements which would not stretch the a elements to full width. You need to change this CSS selector:

#navMenu ul li a {
    text-align:center;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    height:32px;
    width:100%;
    display:block;
    color:#FFFFFF;
    text-shadow:1px 1px 1px #000;
}

This will stop the cutoff on the a tags. This also centers the list elements, which may not be desired, but you may build off and customize. Another thing, the dropdown will not conform to the parent unless you add this:

#navMenu ul li ul {
    width: 100%;
}

Finally, to prevent tab converging, set the min-width attribute on the tabs. This is an arbitrary number and you may change to your liking. A side note, since min-width overrides width, this will affect the dropdown. You may want to omit this:

#navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    min-width: 500px;
}

I've included a snippet with the JSFiddle code edited:

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
header{
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
#navMenu {
	margin: 0;
	padding: 0;
}
#navMenu ul {
	margin:0;
	padding:0;
	line-height:30px;
}
#navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-color: #43a286;
	width:20%;
}
#navMenu ul li a {
	text-align:center;
	font-family:"Comic Sans MS", cursive;
	text-decoration:none;
	height:32px;
	//width:150px;
  width: 100%;
	display:block;
	color:#FFFFFF;
	text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
	position:absolute;
	visibility:hidden;
	top:32px;
}
#navMenu ul li:hover ul {
	visibility:visible;
}
#navMenu ul li:hover li {
    display:block;
    width:100%;
}
#navMenu ul li ul {
  width: 100%;
}

#navMenu li:hover {
	background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
  color: #000000;
}
.clearFloat {
	clear:both;
	margin:0;
	padding:0;
}
section{
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}
     <title>My Webpage</title>   
    <body>
    <header>
        My Webpage</header>
    <div id="wrapper">
      <div id="navMenu">
        <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li> 
        </ul>
        </li>
      </ul>
      <br class ="clearFloat" />
      </div>    
    </div>
    <section>  
    Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
        a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
        a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
        ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
        al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
    </section> 
    </body>

Comments