Drop down menu woes

  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Hello,

I'm having a few issues with some drop down menus I'm working on. It's easiest to just show a screen cap demonstrating what I want to do and how it incorrectly displays in Internet Explorer and Opera. Basically, I'm trying to position some hidden DIVs directly below a main navigation bar. It works as desired in Firefox but I end up with a scroll bar in IE and Opera.

Here are some screen caps showing what I mean. Note that I've intentionally left the menus visible here and the style for the submenus isn't done yet (the giant Flash movie is going to be remade so that it's smaller as well). The first image shows how I'd like the menus/submenus to be positioned.
Attachments:
Menus_01.jpg

Firefox 3.6.3 (ignore orange bar from Flash movie)


Attachments:
Menus_02.jpg

IE7/8


Attachments:
Menus_03.jpg

Opera 10.53



Obviously I'm doing something wrong here but I'm at a complete loss. I've been staring at this for a while now and I'm sure I'm missing something simple. But...in the meantime, some help would be greatly appreciated.

Here's my relevant CSS and layout:
Code: [ Select ]
#header, #site {
  background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  overflow: auto;
  width: 850px;
}

#footer {
  background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  width: 850px;
  height: 41px;
}

#navbar {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px;
  background: url(images/bg_header.jpg) no-repeat right top;
  padding-top: 0px; padding-bottom: 0px;
  margin-left: auto; margin-right: auto;
  overflow: auto;
  width: 830px; height: 154px;
  z-index: 30;
}

#menu-navbar {
  border: 1px solid #000000;
  padding: 0px;
  margin-top: 135px; margin-left: 10px;
  text-align: left;
  height: 16px;
  float: left;
}

#menu-navbar div div
{
  position: absolute;
  /*visibility: hidden;*/
  margin: 0;
  padding: 0;
}

.menu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  display: block;
}

.menu ul {
  border: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.menu ul li a {
  font-weight: bold; text-decoration: none; font-variant: small-caps;
  padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  cursor: pointer;
  height: 16px;
  display: block;
}

.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  background: url(images/bg_menu.png) repeat-x left top;
  color: #FFFFFF;
}

.menu ul li a:hover, .menu ul li#current a {
  background: url(images/bg_menu_hover.png) repeat-x left top;
  text-decoration: none;
}

.submenu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  display: block;
}

.submenu ul {
  border: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.submenu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.submenu ul li a {
  font-weight: bold; text-decoration: none; font-variant: normal;
  padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  cursor: pointer;
  height: 16px;
  position: relative;
  display: block;
}

.submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  background: url(images/bg_menu.png) repeat-x left top;
  color: #FFFFFF;
}

.submenu ul li a:hover {
  background: url(images/bg_menu_hover.png) repeat-x left top;
  text-decoration: none;
}
  1. #header, #site {
  2.   background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  3.   overflow: auto;
  4.   width: 850px;
  5. }
  6. #footer {
  7.   background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  8.   width: 850px;
  9.   height: 41px;
  10. }
  11. #navbar {
  12.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px;
  13.   background: url(images/bg_header.jpg) no-repeat right top;
  14.   padding-top: 0px; padding-bottom: 0px;
  15.   margin-left: auto; margin-right: auto;
  16.   overflow: auto;
  17.   width: 830px; height: 154px;
  18.   z-index: 30;
  19. }
  20. #menu-navbar {
  21.   border: 1px solid #000000;
  22.   padding: 0px;
  23.   margin-top: 135px; margin-left: 10px;
  24.   text-align: left;
  25.   height: 16px;
  26.   float: left;
  27. }
  28. #menu-navbar div div
  29. {
  30.   position: absolute;
  31.   /*visibility: hidden;*/
  32.   margin: 0;
  33.   padding: 0;
  34. }
  35. .menu {
  36.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  37.   display: block;
  38. }
  39. .menu ul {
  40.   border: none;
  41.   list-style-type: none;
  42.   margin: 0px;
  43.   padding: 0px;
  44. }
  45. .menu li {
  46.   margin: 0px;
  47.   padding: 0px;
  48.   float: left;
  49. }
  50. .menu ul li a {
  51.   font-weight: bold; text-decoration: none; font-variant: small-caps;
  52.   padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  53.   cursor: pointer;
  54.   height: 16px;
  55.   display: block;
  56. }
  57. .menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  58.   background: url(images/bg_menu.png) repeat-x left top;
  59.   color: #FFFFFF;
  60. }
  61. .menu ul li a:hover, .menu ul li#current a {
  62.   background: url(images/bg_menu_hover.png) repeat-x left top;
  63.   text-decoration: none;
  64. }
  65. .submenu {
  66.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  67.   display: block;
  68. }
  69. .submenu ul {
  70.   border: none;
  71.   list-style-type: none;
  72.   margin: 0px;
  73.   padding: 0px;
  74. }
  75. .submenu li {
  76.   margin: 0px;
  77.   padding: 0px;
  78.   float: left;
  79. }
  80. .submenu ul li a {
  81.   font-weight: bold; text-decoration: none; font-variant: normal;
  82.   padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  83.   cursor: pointer;
  84.   height: 16px;
  85.   position: relative;
  86.   display: block;
  87. }
  88. .submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  89.   background: url(images/bg_menu.png) repeat-x left top;
  90.   color: #FFFFFF;
  91. }
  92. .submenu ul li a:hover {
  93.   background: url(images/bg_menu_hover.png) repeat-x left top;
  94.   text-decoration: none;
  95. }

Code: [ Select ]
<div id="header">
  <div id="navbar">
    <div id="menu-navbar">
      <div class="menu">
        <ul>
          <li>
            <a href="#">Menu Item 1</a>
            <div id="submenu_01" class="submenu">
              <ul>
                <li><a href="">Submenu Item 1</li>
                <li><a href="">Submenu Item 2</li>
                <li><a href="">Submenu Item 3</li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#">Menu Item 2</a>
            <div id="submenu_02" class="submenu">
              <ul>
                <li><a href="">Submenu Item 1</li>
                <li><a href="">Submenu Item 2</li>
                <li><a href="">Submenu Item 3</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="site">
  Stuff
</div>

<div id="footer">
  More stuff
</div>
  1. <div id="header">
  2.   <div id="navbar">
  3.     <div id="menu-navbar">
  4.       <div class="menu">
  5.         <ul>
  6.           <li>
  7.             <a href="#">Menu Item 1</a>
  8.             <div id="submenu_01" class="submenu">
  9.               <ul>
  10.                 <li><a href="">Submenu Item 1</li>
  11.                 <li><a href="">Submenu Item 2</li>
  12.                 <li><a href="">Submenu Item 3</li>
  13.               </ul>
  14.             </div>
  15.           </li>
  16.           <li>
  17.             <a href="#">Menu Item 2</a>
  18.             <div id="submenu_02" class="submenu">
  19.               <ul>
  20.                 <li><a href="">Submenu Item 1</li>
  21.                 <li><a href="">Submenu Item 2</li>
  22.                 <li><a href="">Submenu Item 3</li>
  23.               </ul>
  24.             </div>
  25.           </li>
  26.         </ul>
  27.       </div>
  28.     </div>
  29.   </div>
  30. </div>
  31. <div id="site">
  32.   Stuff
  33. </div>
  34. <div id="footer">
  35.   More stuff
  36. </div>

Thanks in advance! :)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I do these quite differently to you ... here's how I usually tackle this:

HTML
HTML Code: [ Select ]
<div id='menu'>
 <ul>
  <li><a href='#'>News</a>
   <ul>
    <li><a href='#'>Article One</a></li>
    <li><a href='#'>Article Two</a></li>
   </ul>
  </li>
  <li><a href='#'>Something</a></li>
 </ul>
</div>
  1. <div id='menu'>
  2.  <ul>
  3.   <li><a href='#'>News</a>
  4.    <ul>
  5.     <li><a href='#'>Article One</a></li>
  6.     <li><a href='#'>Article Two</a></li>
  7.    </ul>
  8.   </li>
  9.   <li><a href='#'>Something</a></li>
  10.  </ul>
  11. </div>


CSS
CSS Code: [ Select ]
div#menu{
width:980px;
height:20px;
}
div#menu ul li{
list-style-type:none;
height:20px;
float:left;
vertical-align:top;
margin:0px 11px 0px 0px;
position:relative;
background-color:#000000;
}
div#menu ul li a{
display:block;
font-size:9px;
color:#ffffff;
float:left;
text-decoration:none;
width:100%;
height:16px;
margin:2px 5px;
text-align:center;
}
div#menu ul li a:hover{
background-color:#343434;
}
div#menu ul li ul{
display:none;
position:absolute;
top:20px;
left:0px;
}
div#menu ul li:hover ul{
display:block;
width:120px;
background-color:#000000;
}
div#menu ul li:hover ul li{
width:111px;
background-color:#000000;
text-align:left;
}
div#menu ul li:hover ul li a{
background-color:#343434;
padding:2px 0px 0px 0px;
height:14px;
}
  1. div#menu{
  2. width:980px;
  3. height:20px;
  4. }
  5. div#menu ul li{
  6. list-style-type:none;
  7. height:20px;
  8. float:left;
  9. vertical-align:top;
  10. margin:0px 11px 0px 0px;
  11. position:relative;
  12. background-color:#000000;
  13. }
  14. div#menu ul li a{
  15. display:block;
  16. font-size:9px;
  17. color:#ffffff;
  18. float:left;
  19. text-decoration:none;
  20. width:100%;
  21. height:16px;
  22. margin:2px 5px;
  23. text-align:center;
  24. }
  25. div#menu ul li a:hover{
  26. background-color:#343434;
  27. }
  28. div#menu ul li ul{
  29. display:none;
  30. position:absolute;
  31. top:20px;
  32. left:0px;
  33. }
  34. div#menu ul li:hover ul{
  35. display:block;
  36. width:120px;
  37. background-color:#000000;
  38. }
  39. div#menu ul li:hover ul li{
  40. width:111px;
  41. background-color:#000000;
  42. text-align:left;
  43. }
  44. div#menu ul li:hover ul li a{
  45. background-color:#343434;
  46. padding:2px 0px 0px 0px;
  47. height:14px;
  48. }

I really hope you can use this ... maybe it will help.
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Thanks. I'll give that method a try.

The truth is, my current method is a bit convoluted. These menus had started as something completely different. Basically, the horizontal menu across the top of the site was originally a vertical menu down the left side. I've been in the process of updating it along with several other things to enhance the appearance and overall layout of the site. So I admit that my method may not be the best. And that's probably why I've gotten myself into trouble.

Anyway, I'll try out your suggestion. :D
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Unfortunately, the above method didn't quite work. Or more accurately, I couldn't get it to work for my layout. ;)

That said, I've more or less fixed this. :) Everything works great except in IE7. But more on that in a sec.

My solution was to take the navbar right out of #header and put it in its own container beneath it. I then set the position of #header, #site, and this new navbar container to relative. Finally I set margin-top to a negative value to have it sit on top of #header.

My new layout:
Code: [ Select ]
<div id="header" class="center">
Header info
</div>

<div id="navbar" class="center">
  <div id="menu">
    <div class="menu">
      <ul>
        <li>
          <a href="#">Menu Item 1</a>
          <div id="submenu_01" class="submenu">
            <ul>
              <li><a href="">Submenu Item 1</li>
              <li><a href="">Submenu Item 2</li>
              <li><a href="">Submenu Item 3</li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">Menu Item 2</a>
          <div id="submenu_02" class="submenu">
              <ul>
              <li><a href="">Submenu Item 1</li>
              <li><a href="">Submenu Item 2</li>
              <li><a href="">Submenu Item 3</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="site" class="center">
 Stuff
</div>

<div id="footer" class="center">
 More stuff
</div>

<div id="site-info" class="center">

</div>
  1. <div id="header" class="center">
  2. Header info
  3. </div>
  4. <div id="navbar" class="center">
  5.   <div id="menu">
  6.     <div class="menu">
  7.       <ul>
  8.         <li>
  9.           <a href="#">Menu Item 1</a>
  10.           <div id="submenu_01" class="submenu">
  11.             <ul>
  12.               <li><a href="">Submenu Item 1</li>
  13.               <li><a href="">Submenu Item 2</li>
  14.               <li><a href="">Submenu Item 3</li>
  15.             </ul>
  16.           </div>
  17.         </li>
  18.         <li>
  19.           <a href="#">Menu Item 2</a>
  20.           <div id="submenu_02" class="submenu">
  21.               <ul>
  22.               <li><a href="">Submenu Item 1</li>
  23.               <li><a href="">Submenu Item 2</li>
  24.               <li><a href="">Submenu Item 3</li>
  25.             </ul>
  26.           </div>
  27.         </li>
  28.       </ul>
  29.     </div>
  30.   </div>
  31. </div>
  32. <div id="site" class="center">
  33.  Stuff
  34. </div>
  35. <div id="footer" class="center">
  36.  More stuff
  37. </div>
  38. <div id="site-info" class="center">
  39. </div>


And the new corresponding CSS:
Code: [ Select ]
div#header, div#site {
  background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  overflow: auto;
}

div#header, div#site, div#footer, div#site-info {
  width: 850px;
  position: relative;
  z-index: 1;
}

div#navbar {
  position: relative;
  z-index: 2;
}

div#footer {
  background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  height: 41px;
}

div#navbar, div#site-info {
  width: 830px;
}

div#menu {
  border-left: 1px solid #000000; border-right: 1px solid #000000;
  padding: 0px;
  margin-top: -18px; margin-left: 172px;
  text-align: left;
  height: 16px;
  float: left;
}

div#menu div div
{
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  z-index: 30;
}

.menu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  display: block;
}

.menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.menu ul li a {
  font-weight: bold; text-decoration: none; font-variant: small-caps;
  padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  cursor: pointer;
  height: 16px;
  display: block;
}

.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  background: url(images/bg_menu.png) repeat-x left top;
  color: #FFFFFF;
}

.menu ul li a:hover, .menu ul li#current a {
  background: url(images/bg_menu_hover.png) repeat-x left top;
  text-decoration: none;
}

.submenu {
  font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  border: 1px solid #000000;
  display: block;
}

.submenu ul {
  border: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.submenu li {
  margin: 0px;
  padding: 0px;
  float: left;
}

.submenu ul li a {
  font-weight: bold; text-decoration: none; font-variant: normal;
  padding-left: 1.5em; padding-right: 1em; padding-top: 3px; padding-bottom: 3px;
  cursor: pointer;
  height: 16px;;
  display: block;
}

.submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  background: url(images/bg_submenu.png) repeat-x left top;
  color: #222222;
}

.submenu ul li a:hover {
  background: url(images/bg_submenu_hover.png) repeat-x left top;
  color: #e2e7eb;
  text-decoration: none;
}

.center {
  margin-left: auto; margin-right: auto;
}
  1. div#header, div#site {
  2.   background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
  3.   overflow: auto;
  4. }
  5. div#header, div#site, div#footer, div#site-info {
  6.   width: 850px;
  7.   position: relative;
  8.   z-index: 1;
  9. }
  10. div#navbar {
  11.   position: relative;
  12.   z-index: 2;
  13. }
  14. div#footer {
  15.   background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
  16.   height: 41px;
  17. }
  18. div#navbar, div#site-info {
  19.   width: 830px;
  20. }
  21. div#menu {
  22.   border-left: 1px solid #000000; border-right: 1px solid #000000;
  23.   padding: 0px;
  24.   margin-top: -18px; margin-left: 172px;
  25.   text-align: left;
  26.   height: 16px;
  27.   float: left;
  28. }
  29. div#menu div div
  30. {
  31.   position: absolute;
  32.   visibility: hidden;
  33.   margin: 0;
  34.   padding: 0;
  35.   z-index: 30;
  36. }
  37. .menu {
  38.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
  39.   display: block;
  40. }
  41. .menu ul {
  42.   list-style-type: none;
  43.   margin: 0px;
  44.   padding: 0px;
  45. }
  46. .menu li {
  47.   margin: 0px;
  48.   padding: 0px;
  49.   float: left;
  50. }
  51. .menu ul li a {
  52.   font-weight: bold; text-decoration: none; font-variant: small-caps;
  53.   padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
  54.   cursor: pointer;
  55.   height: 16px;
  56.   display: block;
  57. }
  58. .menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
  59.   background: url(images/bg_menu.png) repeat-x left top;
  60.   color: #FFFFFF;
  61. }
  62. .menu ul li a:hover, .menu ul li#current a {
  63.   background: url(images/bg_menu_hover.png) repeat-x left top;
  64.   text-decoration: none;
  65. }
  66. .submenu {
  67.   font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
  68.   border: 1px solid #000000;
  69.   display: block;
  70. }
  71. .submenu ul {
  72.   border: none;
  73.   list-style-type: none;
  74.   margin: 0px;
  75.   padding: 0px;
  76. }
  77. .submenu li {
  78.   margin: 0px;
  79.   padding: 0px;
  80.   float: left;
  81. }
  82. .submenu ul li a {
  83.   font-weight: bold; text-decoration: none; font-variant: normal;
  84.   padding-left: 1.5em; padding-right: 1em; padding-top: 3px; padding-bottom: 3px;
  85.   cursor: pointer;
  86.   height: 16px;;
  87.   display: block;
  88. }
  89. .submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
  90.   background: url(images/bg_submenu.png) repeat-x left top;
  91.   color: #222222;
  92. }
  93. .submenu ul li a:hover {
  94.   background: url(images/bg_submenu_hover.png) repeat-x left top;
  95.   color: #e2e7eb;
  96.   text-decoration: none;
  97. }
  98. .center {
  99.   margin-left: auto; margin-right: auto;
  100. }


Ok, so yeah. Works great. BUT, teeny tiny problem in IE7. It's ignoring display: block in .submenu ul li a:
Attachments:
IE7.jpg

IE7



When it should be displaying like this:
Attachments:
Firefox.jpg

Firefox



I've tried declaring display: block; to be important, I've placed redundant display: blocks in every single .submenu declaration, and nothing seems to take. Any ideas?

ETA: Ok, I fixed my issue with IE7. Apparently I just needed to force the links to be a set width. Otherwise it only applies the block attribute around the link and doesn't auto-expand to fill the entire element. I should have known that. :oops:
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Glad you got it sorted, IE is always a bitch.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 78 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.