Skip navigation
Purduejaime
Currently Being Moderated

Please Help me fix the css for font colors in this menu!

Sep 20, 2013 11:02 AM

I have finally figured out how to make my drop down menu work, but I need some help troubleshooting this code. I have fiddled with the code for several hours and have still been unable to fix it. My issue is that I have been unable to distinguish between the top level links and the dropdown menu links. I want the dropdown menu links to be a light cream color. However, they are being displayed as the same color as the hover color.

 

Here is the webpage loaded online: www.theriveroverlook.com/Trial.html

 

If you hover over "Accomodations", you will see the issue. The green color of the hovered links is also being displayed in the lower level menu. This makes them unable to be read easily and presents a problem.

 

Here is applicable css code:

 

body {

           width:1170px;

           height:1300px;

           background-image:url(BackgroundImage.jpg);

background-repeat:no-repeat;

padding-left:0px;

padding-right:0px;

padding-top:0px;

}

 

/* BEGIN HORIZONTAL DROP-MENU */

 

 

#navcontainer {

          margin-left:0px;

          padding-left:0px;

          margin-top:200px;      

          background-image:url(MenuBarFINAL.png);

          background-repeat: no-repeat;

          height: 192px;

                      width:1170;

}

 

 

nav {

         

                       font-size:22px;

                       font:"goudy-bookletter-1911";

                       font-weight:500;

          text-align: left;

          padding-top: 65px;

                      margin-left:0px;

                      padding-left:0px;

                    

                     

 

 

 

 

}

 

 

nav ul ul {

          display: none;

}

nav ul li:hover > ul {

          display: block;

}

nav ul {

                              margin-left:0px;

          padding: 0 0px;

          list-style: none;

          display: inline-table;

}

 

 

 

 

/*Top level nav spacing, listing*/

nav ul li {

          float: left;

                       margin-left:0px;

}

 

 

nav ul li:hover a {color:#060;}

nav ul li:active a {color:#300;}

nav ul li:visited a {color:#900;}

 

 

 

 

/*top level text display*/

nav ul li a {

          display:inline;

          text-decoration: none;

                      color:#55390e; 

}

 

 

 

 

ul.accomdrop a {

          color:#fbf1cc;

}

#accomdrop {

                  background-image:url(dropdownpng.png);

                              margin-top: 13px;

                              width: 155px;

                              padding-bottom: 69px;

                              background-repeat:no-repeat;

 

}

nav ul ul li {

                              font-size:18px;

                              font-weight: 100;

          float: none;

                      color:#e4ddc8;

 

 

}

 

 

#home {

          margin-left: 75px;

 

}

 

 

#accom {

          margin-left: 35px;

          width: 120 px;

          padding-right: 25px;

}

 

 

#holston {

          padding-top: 10px;

          padding-bottom:10px;

          padding-left: 17px;

          word-wrap:normal;

          text-align:center;

          width:120px;

}

 

 

#tennessee {

          padding-top: 10px;

          padding-bottom: 15px;

          padding-left:17px;

          word-wrap: normal;

          text-align:center;

          width: 120px;

}

 

 

#french {

          padding-top: 8px;

          padding-bottom: 10px;

          padding-left: 17px;

          word-wrap:normal;

          text-align:center;

          width: 120px;

}

 

 

#amenities {

          margin-left: 15px;

          width: 110px;

}

 

 

#packages {

          margin-left: 285px;

          width:120px;

}

 

 

#packdrop {

          background-image:url(dropdownpng2.png);

          margin-left:-35px;

          margin-top: 13px;

                              width: 155px;

                              padding-bottom: 80px;

                              background-repeat:no-repeat;

}

 

 

#romance {

                    padding-top: 5px;

          padding-bottom:8px;

          padding-left: 2px;

          word-wrap:normal;

          text-align:center;

          width:150px;

}

 

 

#golf {

          padding-top: 15px;

          padding-bottom:12px;

          padding-left:2px;

          word-wrap:normal;

          text-align:center;

          width: 150px;

 

}

 

 

#photo {

          padding-top: 5px;

          padding-bottom:13px;

          padding-left:2px;

          word-wrap:normal;

          text-align:center;

          width:150px;

}

 

 

#cook {padding-top: 7px;

          padding-bottom:10px;

          padding-left:2px;

          word-wrap:normal;

          text-align:center;

          width:150px;

}

 

#fish {padding-top: 10px;

          padding-bottom:10px;

          padding-left:2px;

          word-wrap:normal;

          text-align:center;

          width:150px;

}

#directions {

          margin-left: 20px;

}

 

I really appreciate any help you can give me! Sometimes, you stare at something so long that you can't see the obvious problem before you!

 

Jaime

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points