CODEWITHSUNDEEP
htmlcss
Giant
Giant

Reputation: 1649

dropdown on menu hover

i have a menu that when i hover has a drop down i follow this and this but unfortunately im getting different result than expected..im getting list but it is displayed as line horizontally and not vertically like the example here is the code i added to make the drop down

css
ul # menu li  ul .submenu{
    display:none;
}
ul # menu li : hover ul .submenu{
    display:block;
}

here is the html

<div id="menu">
                        <ul id="menu-list">
                            <li id=""><a href="#">Home</a></li>
                            <li id="">
                                <a href="#">Menu</a>
                                <ul class="sub-menu">
                                    <li><a href="#">Sub Menu 1</a></li>
                                    <li><a href="#">Sub Menu 2</a></li>
                                    <li><a href="#">Sub Menu 3</a></li>
                                    <li><a href="#">Sub Menu 4</a></li>
                                </ul>
                            </li>
                            <li id=""><a href="#">Menu</a></li>

                            <li id=""><a href="#">Menu</a></li>
                            <li id=""><a href="#">Menu</a></li>
                        </ul>
                </div>

Upvotes: 0

Views: 58

Answers (2)

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

<ul id="nav" class="sixteen columns">
    <li><a href="index.html">Home</a>

    </li>
    <li><a href="#">Portfolio</a>

        <ul>
            <li><a href="asia.html">Asia</a>

                <ul>
                    <li><a href="#">Korea</a></li>
                    <li><a href="#">China</a></li>
                    <li><a href="#">Japan</a></li>
                </ul>
            </li>
            <li><a href="europe.html">Europe</a>

                <ul>
                    <li><a href="#">France</a></li>
                    <li><a href="#">Germany</a></li>
                    <li><a href="#">Italy</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

#nav {
    width:800px;
    margin:30px 50px;
   padding: 0;
    float:left;
}
#nav li {
    list-style: none;
    float: left;
    padding:0 10px;
   background-color:#367FB3;
    color:white;
}


#nav li a:hover {
   background-color:#52baff;
    color:#fff;
}
//daf adf
/*--temp--*/
 #nav ul ul li {
    clear:left;
}
#nav ul ul {
    position:absolute;
    left:14em;
    top:0;
}
#nav ul ul li a {
    display:block;
    padding: 3px 15px;
    color: #242424;
    text-decoration: none;
    font-size:13px;
    font-family:"Lato" !important;
}
/*--end temp--*/
 #nav li a {
    display: block;
    padding: 3px 15px;
    color: #242424;
    text-decoration: none;
    font-size:13px;
    font-family:"Lato" !important;
}
#nav a:hover {
    color:#367FB3;
}
#nav a:active {
    color:#367FB3;
}
#nav li ul {
    display: none;
    width: 14em;
    /* Width to help Opera out */
    background-color:transparent;
    z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
    display: block;
    position: absolute;
    margin:0px -10px;
    padding:0px;
}
#nav li:hover ul ul {
    display:none;
}
#nav li ul li:hover ul {
    display:block
}
#nav li:hover li, #nav li.hover li {
    float: none;
    line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
    background-color:#367FB3;
    color:#fff;
    font-size:13px;
    font-family:"Lato" !important;
}
#nav li li a:hover {
    background-color:#52baff;
    color:#fff;
}

FIDDLE

Upvotes: 1

Jatin
Jatin

Reputation: 3089

Here you go:

Updated Fiddle

Just the small change. Made UL id = "menu"

                       <ul id="menu">
                        <li id="home"><a href="#">Home</a></li>
                        <li id="townoffice">
                            <a href="#">Menu</a>
                            <ul class="sub-menu">
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 3</a></li>
                                <li><a href="#">Sub Menu 4</a></li>
                            </ul>
                        </li>
                        <li id="busines"><a href="#">Menu</a></li>

                        <li id="residents"><a href="#">Menu</a></li>
                        <li id="tourists"><a href="#">Menu</a></li>
                    </ul>

Upvotes: 1

Related Questions