SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown Menus Hiding Behind Content

    Hi! I'm having an issue with my new drop down bars. Here is my website: www.wifemotherteacher.com

    The code for the drop down menu can be found here: http://mybloggertopic.blogspot.com/2...ss3-multi.html

    Thank you in advance for your advice!
    Tiffany

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Tiffany. Welcome to the forums.

    The first problem here is the overflow: hidden set on the UL:

    Code:
    .tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    }
    Remove that, and the drop menus won't be cut off.

    However, there are further problems to fix, as the sub menus still can't be hovered properly. But one thing at a time ...
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,
    Thanks for your response!
    Please pardon my elementary level knowledge of HTML. Can you please tell me what you mean by "hidden set on teh UL"?
    I'm sorry!
    Tiffany

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    In the HTML code of your pages, your menu is contained inside a UL, or unordered list (<ul>):

    Code:
    <ul id="nav">
     - links here
    </ul>
    Then there are styles set for your UL, such as the green background etc. In your styles, there is the "overflow: hidden" rule I highlighted above, but that sholdn't be there.

    Are you familiar with HTML and CSS? If not, we'll have to talk you through this a little more carefully. It would be helpful to know how the site was set up, and what you know about the code at this stage.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks again for your patience with me. I've created my blog using blogger. I don't know the difference between HTML and CSS. My knowledge is limited to what I've added to my page in the last two months through online tutorials. Today's problem arose when I decided I wanted a drop down menu instead of a normal menu to better organize my site for my readers.

    I copied the code over to a word document - that's what I'm looking at it in. That way I always have the option of the undo button if I screw up! haha!

    I don't see the word overflow anywhere... Will I actually see that word somewhere in the code I linked to in my original post?

    Thank you again!!!!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, that's fine. Unfortunately, I don't know Blogger at all, but I think I get a sense of how it works.

    CSS is a styling language for web pages. A lot of the code you pasted in for the menu is CSS code. In Blogger, the CSS code is stored in various places—some on the HTML page itself, near the top, inside <style> </style> tags, other styles stores in separate files that end in .css. The styles that I was referencing above are in this lovely little file here, to which you may not have access:

    http://www.blogger.com/static/v1/wid...s_2_bundle.css

    So, a different approach might be needed.

    You could try adding this to the styles in your HTML:

    Code:
    .tabs .widget ul, .tabs .widget ul {
    overflow: auto !important;
    }
    So, look at your site's HTML code, and try to find the section that starts with this, near the top:

    Code:
    <style id='page-skin-1' type='text/css'>
    Paste the code above somewhere under there, perhaps just before the </style> tag further down.

    Off Topic:

    As an aside, don't use Word for code like you described above, because it has a terrible habit of inserting extra code that will mess things up for you. Instead, get a proper code editor for doing this kind of thing. there are lots of good ones for free. Here is a list I made up recently: http://pageaffairs.com/notebook/a-ro...f-code-editors
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •