CODEWITHSUNDEEP
css
Beginner
Beginner

Reputation: 29573

how to make sub menu appear when hover over link?

how do i make a sub menu dissapear and appear when i hover over a link?

this is my menu:

<div class="sideMenu2">
      <ul>
        <li><a href>retail</a>
                <ul class="subsideMenu2">
                            <li>cabot circus</li>
                            <li>st. stephen&#39;s</li>
                            <li>silverburn</li>
                            <li>braehead</li>
                </ul>
        </li>
            <li><a href>sports &amp; leisure</a>
                <ul class="subsideMenu2">
                </ul>
        </li>
      </ul>  
      </div>

This is my current css:

    .sideMenu2 ul li.on a
{
    height:2em;
    padding-top: 2px;
    background:url(../images/point.png) no-repeat;
    font-weight:bold;   
}

.sideMenu2 ul
{    
    padding: 15px 0px 0px 0px;  
    list-style-type:none;
    font-size:0.9em;
    width:20em;
    color:#fff;   
    margin-left:-10px;
}

.sideMenu2 ul a{
    padding: 2px 20px 0px 0px;  
    color:#fff;
    text-decoration:none;
    float:left;
    width:19.2em;
}

.sideMenu2 li a
{
    height:2em;
    padding-top: 1px;
    padding-left:15px;
}

.sideMenu2 li a:hover{
    background:url(../images/point.png) no-repeat;
    cursor:pointer; 
    padding-left:-15px;

}

Upvotes: 0

Views: 19121

Answers (2)

Imam Mubin
Imam Mubin

Reputation: 294

see this example script of header menu dropdwon style

http://bit.ly/1abEJ9o

Upvotes: 0

Waiting for Dev...
Waiting for Dev...

Reputation: 13037

.subsideMenu2 {
  display: none;
}

.sideMenu2 li:hover .subsideMenu2 {
  display: block;
}

But won't work in old Internet Explorer, for them the only option is javascript.

Upvotes: 7

Related Questions