CODEWITHSUNDEEP
cssinternet-explorerdrop-down-menu
Gas
Gas

Reputation: 737

Hover Drop-down menu problems in IE7

I have a problem with a hovered menu in IE7, in a site I'm developing now. It works fine on a compliant browser (eg. Firefox).

This is the link: http://kaplareva.com/elet-ter-WP/

The HTML looks like this:

<div id ="menu-maincontent">
<h2>Társas kapcsolatok</h2>
<ul>
<li><a href="#">Egyedül</a> | 
<ul>
<li><a href="#">Szingli</a> | </li> 
<li><a href="#">Gyász</a> | </li> 
<li><a href="#">Egyedülálló szülő</a></li> 
</ul>
</li> 
<li><a href="#">Párkapcsolat</a> | 
<ul>
<li><a href="#">Párterápia</a> | </li> 
<li><a href="#">Párkapcsolat zavarai</a></li> 
</ul>
</li> 
<li><a href="#">Család</a> | 
<ul>
<li><a href="#">Családterápia</a></li> 
</ul>
</li> 
<li><a href="#">Szülő-gyerek</a>
<ul>
<li><a href="#">Anya-gyerek kapcsolat</a> | </li> 
<li><a href="#">Apával való kapcsolat</a></li> 
</ul>
</li> 
</ul>
</div>

The CSS:

#menu-maincontent ul li {
    float: left;
    display: block;
    margin-right: 5px;
    font-family: 'GiacomoMedium',Arial,sans-serif;
    font-weight: normal;
    }

#menu-maincontent ul li ul { 
    display: none;
    font-size: 10pt;
    height: 0;
    overflow: hidden;
    text-transform: none;
    background-color: white;
}

#menu-maincontent ul li:hover > ul {
    display: block;
    height: 24px;
    margin-bottom: 10px;
    margin-top: 5px;
    overflow-y: visible;
    position: absolute;
}

Any help please? Sorry if similar case is already solved somewhere else, but i couldn't find an appropriate solution.

Best Regards, gas

Upvotes: 0

Views: 508

Answers (1)

ptriek
ptriek

Reputation: 9276

Just add a <br> behind the | in your menu, so the embedded ul will be forced to go to new line.

Works for me in IE7.

Upvotes: 1

Related Questions