CODEWITHSUNDEEP
jqueryhtmlcssweb
user3813130
user3813130

Reputation: 11

How to make submenu drop down display on hover

I can not seem to get this right, trying to make the submenu display on hover of parent list items. It keeps displaying some funky way , is there a standard way to do this? Cant seem to get any code adaptations to work with my code.

<div id="navBar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Artist</a>
            <ul>
                      <li><a href="#">sub menu item 1</a></li>
                      <li><a href="#">sub menu item 2</a></li>
                      <li><a href="#">sub menu item 3</a></li>
                      <li><a href="#">sub menu item 4</a></li>
            </ul>
        </li>
        <li><a href="#">Apprentice</a>
            <ul>
                      <li><a href="#">sub menu item 1</a></li>
                      <li><a href="#">sub menu item 2</a></li>
                      <li><a href="#">sub menu item 3</a></li>
                      <li><a href="#">sub menu item 4</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Store</a>
            <ul>
                      <li><a href="#">sub menu item 1</a></li>    
            </ul>
        </li>
    </ul>
</div>

CSS

 /*navigation bar*/
#navBar {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #000000;
    border-bottom: 1px solid #ffffff;
}
#navBar ul {
    list-style: none;
    width: 800px;
    margin: 0 auto;
    padding: 0;
} 
#navBar li {
     float: left;
    position:relative;
}
#navBar li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    color: #ffffff;
    border-right: 1px solid #ffffff;
    height: 30px;
    font-size: large;
}
 #navBar li:first-child a {
     border-left: 1px solid #ffffff; 
}
#navBar li a:hover {
    color: #000;
    background-color: #9DE4BD;
}
#navBar li ul {
    position:absolute;
    left:-9999;
}
#navBar li:hover > ul  {
 display: block;
  position: relative;
  left: 0px;
  float: none;
  clear: left;
}

Upvotes: 1

Views: 1212

Answers (2)

mostafaznv
mostafaznv

Reputation: 988

this is a simple example for your ;) you must set display:inline-block for li tags and set position:absolute for submenu (ul) ...

CSS:

#a{
    width:96%;
    height:600px;
    position:relative;
    background-color:#0F0;
    background:url(http://8pic.ir/images/lj80krsorpqzchx6xs8b.jpg);
    opacity:0.8;
    font-family:tahoma;
    font-size:12px;
    padding:2%;

}
#nav ul{
    position:relative;
    height:30px;
    list-style:none;
    background:#000;
    padding:0px;
}
#nav ul li{
    display:inline-block;
    width:100px;
    height:30px;
    text-align:center;
}
#nav li{
    background:#000;
}
#nav li:hover{
    background:#333;
}

#nav ul li ul{
    display:none;
    position:absolute;
    top:30px;
}
#nav ul li ul li{
    display:block;
}
#nav ul li:hover ul{
    display:block;
}
#nav a{
    line-height:25px;
    text-decoration:none;
    width:100px;
    color:#fff;
}

HTML:

<div id="a">
    <div id="nav">
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">mobile view</a></li>
            <li><a href="#">categories</a>
                <ul>
                    <li><a href="">Cat 1</a></li>
                    <li><a href="">Cat 2</a></li>
                </ul>
            </li>
            <li><a href="#">contact me</a></li>
        </ul>
    </div>
</div>

Live Demo on JSFiddle

Upvotes: 1

Shashi
Shashi

Reputation: 474

You can use display:none and display:block; property of CSS to accomplish this. All you need to do is hide the element usually and on Hover display:block; that's it. By the way there are many tutorials on this topic that can be found on internet so I am adding the link
http://code-tricks.com/simple-css-drop-down-menu/

EDIT: You should add classes to your ul and then you can target specific ul to hide by adding display:none; to their CSS property and then on hover of the particular element like .classname:hover{display:block;}.

Upvotes: 0

Related Questions