CODEWITHSUNDEEP
htmlcss
Colton Fairley
Colton Fairley

Reputation: 11

Increasing the hover size property

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;

}

Upvotes: 0

Views: 1403

Answers (2)

Lewis Coulson
Lewis Coulson

Reputation: 46

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.

Upvotes: 1

srijan
srijan

Reputation: 1512

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

Upvotes: 0

Related Questions