Increasing the hover size property

Question

I've been building this site for my employer and this issue doesn't happen in any browser but IE. When hovering over the Services button two buttons appear to the right. When mousing over to the two options the buttons disappear within 5px of the button. I'd like to avoid putting the two buttons flush with the nav bar because it looks odd. Any ideas on how to increase the hover size?

HTML:

<div id="menu">
<ul>
    <li>
        <a href="index.htm">
            <img src="comps/PillarHP/ButtonLinks/Home.jpg" border="0" />
        </a>
    </li>
    <br />
    <br />
    <br />
    <li>
        <a href="TTUgalleries.html">
            <img src="comps/PillarHP/ButtonLinks/TTUgalbutton.jpg" border="0" />
        </a>
    </li>
    <br />
    <br />
    <br />
    <li>
        <a href="STATEgalleries.html">
            <img src="comps/PillarHP/ButtonLinks/Landgalbutton.jpg" border="0" />
        </a>
    </li>
    <br />
    <br />
    <br />
    <li>
        <a nohref="">
            <img src="comps/PillarHP/ButtonLinks/Services.jpg" border="0" hspace="50" />
        </a>
                <ul class="sub-menu">
                    <li>
                        <a href="classes.html" id="demargpadLink"><img src="comps/PillarHP/ButtonLinks/classes.jpg" border="0" /></a>
                    </li>
                    <li>
                        <a href="mats.html"><img src="comps/PillarHP/ButtonLinks/Mats.jpg" border="0" /></a>
                    </li>
                    </ul>
    </li>
    <br />
    <br />
    <br />
    <li>
        <a href="newsletter.html">
            <img src="comps/PillarHP/ButtonLinks/Newsletter.jpg" border="0" />
        </a>
                <ul class="sub-menu">
                    <li></li>   
                </ul>
    </li>
    <br />
    <br />
    <br />
    <li>
        <a href="artiststatement.html">
            <img src="comps/PillarHP/ButtonLinks/ArtStatement.jpg" border="0" />
        </a>
    </li>
    <br />
    <br />
    <br />
    <li>
        <a href="contact.html">
            <img src="comps/PillarHP/ButtonLinks/Contact Us.jpg" border="0" />
        </a>
</li>
</ul>

CSS:

    #menu {
    position: absolute;
    margin-left: 179px;
    margin-top: 200px;
    z-index:15;
    padding-bottom: 0px;

}
a {
    text-decoration: none;
    color: #838383;

}
a:hover {
    color: black;

}
#menu a {
    display: block;
    width: 140px;

}
#menu ul {
    list-style-type: none;
    padding-top: 10px;

}
#menu li {
    float: left;
    position: relative;
    margin-left: 1px;
    margin-right: 1px;
    text-align: center;

}
#menu ul.sub-menu {
    display: none;
    position: absolute;
    top: -14px;
    left: 139px;
    padding: 10px;
    z-index: 90;

}
#menu ul.sub-menu li {
    text-align: left;

}
#menu li:hover ul.sub-menu {
    display: block;

}
#menu li:hover ul.sub-menu a {
    margin-top: 4px;
    margin-bottom: 0;
    padding: 0;

}

Containing Div CSS:

#menu {
    position: absolute;
    margin-left: 179px;
    margin-top: 200px;
    z-index:15;
    padding-bottom: 0px;

}

I'd suggest starting with cleaner html. For instance, removing your br tags that are in between each of your list items. — Seth Flowers, May 24 '12 at 20:18
Are you sure your headers are correct ? See this answer : http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly — Denys Séguret, May 24 '12 at 20:18

Lewis Coulson · Answer 1 · 2012-05-25T08:21:44.037

1

http://jsfiddle.net/Vqw75/1/ - Have may some further improvements for you :)

Firstly scrap the br tags and simply set the 'li's' to 'display:block' in the css, this will give you the desired result.

Your img tags do not require the border attribute as this can be set in the css and I have added alt tags which are required for the markup to validate.

Also the submenu ul should have enough padding so the elements butt up against each other yet give you the desired distance from the main menu.

edited May 25 '12 at 08:21

answered May 24 '12 at 21:26

Lewis Coulson

46
3

Can you explain more into the 'display:block' because the use of the BR tags is for IE where when I use the 'display:block' property in the CSS for #minu li{ it lines them up horizontally across the screen. Is there an Align property I need to use to stack the buttons on top of each other? – Colton Fairley May 30 '12 at 17:19
I did a little research on methods and everything I find says that a Block property has similar properties of the BR tag, but in all my browsers it doesn't work. I still have to use the BR tag to drop down. – Colton Fairley May 30 '12 at 17:36
Sorry to spam back, But I tried using the padding property in a variety of ways but nothing seems to work in my IE browser. The pixel I leave the image the hover property disappears. – Colton Fairley May 30 '12 at 17:48
display:block instructs an element to fill all available space hence when you set the li's to display block they take up the full width of the parent. – Lewis Coulson Jun 12 '12 at 19:09

score 0 · Answer 2 · answered May 24 '12 at 21:03

0

http://jsfiddle.net/Vqw75/ - Is it me that you are looking for! Love by Lionel Richie

answered May 24 '12 at 21:03

srijan

1,504
1
13
24

Increasing the hover size property

2 Answers2