CODEWITHSUNDEEP
htmlcssdrop-down-menu
user3308353
user3308353

Reputation: 17

I can't get this drop-down menu to work with CSS

I've been trying to display a drop-down menu for CSS, and it doesn't seem to work; can anyone point me in the right direction? I've been looking at examples and implementing parts, and none of it seems to be working.

Here is my HTML code:

<ul id="menu"> 
    <li><a href="Default.asp">Home</a></li>
        <ul id="subHome">
            <li><a href="Customers.asp">Customers</a></li>
        </ul>
    <li><a href="Customers.asp">Data</a></li>
    <li><a href="Register.asp">Register</a></li>
    <li><a href="Login.asp">Login</a></li>
</ul>

Here is my CSS code:

/*header*/

#menu {
    margin-left: -50px;
    margin-right: -50px;
    background-color: #4cff00; 
    line-height: none;
    border-radius: 4px 4px;
    margin: 0px;
}

#menu li {
    display: inline-table;
}

#menu li a {
    color: #000;
    padding: 0px 140px;
    text-decoration: none;
}

#subHome {
    list-style:none;
    position: absolute;
    left: 0;
    background: #fff;
    display:none;
}

#subHome li {
    display:block;
    width:120px;
    float:none;
}

#menu li a:hover {
    background-color: red;
    border-radius: 4px 4px;
} 

ul#menu li #subHome li a {
    color: #f00;
}

ul#menu li #subHome li a:hover {
    background: #333;
    color: #fff;
}

#menu li:hover ul{
    display: block;
}

Upvotes: 0

Views: 70

Answers (3)

Kisspa
Kisspa

Reputation: 584

$(document).ready(function(){
$('ul > li').mouseover(function(){$('#subHome').css('display','block');});$('ul > li').mouseout(function(){$('#subHome').removeAttr('style');});});

Upvotes: 0

Kisspa
Kisspa

Reputation: 584

<ul class="menu"> 
 <li><a href="#">Home</a>
     <ul>
        <li><a href="#">Link</a></li>
    </ul>     </li>  </ul>

ul.menu li{
    position:relative;
    list-style:none;
    float:left;
    padding:10px 20px;
    border:1px solid red; }  

ul.menu li ul {    
opactiy:0;    
transition:all 0.5s linear 1s;//slow speed effect   
position:absolute:    top:20px; } 
ul.menu li:hover ul {    top:0px;   
opactiy:1;    transition:all 0.5s linear 1s;  
}

Upvotes: 0

malteriechmann
malteriechmann

Reputation: 226

I would put the second <ul> into the <li>. As you can see at https://developer.mozilla.org/docs/Web/HTML/Element/ul (Nesting list).

<ul class="menu"> 
    <li><a href="Default.asp">Home</a>
        <ul>
            <li><a href="Customers.asp">Customers</a></li>
        </ul>
    </li>
    <li><a href="Customers.asp">Data</a></li>
    <li><a href="Register.asp">Register</a></li>
    <li><a href="Login.asp">Login</a></li>
</ul>

What about working with less css code first? Try this: 

ul.menu li ul {
    display: none;
}

ul.menu li:hover ul {
    display: block;
}

I hope this will help you.

Upvotes: 3

Related Questions