Member Avatar for Shaziahussain

Sir I am trying to create dropdown menu, so i have these codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">

#box1 {
    width:350px;
         height:150px;
         padding:5px;
         border:1px solid blue;
         margin:50px auto;
         overflow:auto;
         }

 #menu ul li {
        list-style:none;
    float:left;
         margin:1px;
         background:khaki;
         width:100px;
         height:30px;
     line-height:30px;
         color:blue;
         font-size:14px;
         font-weight: bold;
         border-radius: 5px;
    text-align:center;
text-decoration:none;
padding:3px;

         }


#menu ul li ul li{
        list-style:none;
    float:left;
         margin:1px;
         background:lightblue;
         width:100px;
         height:30px;
     line-height:30px;
         color:blue;
         font-size:14px;
         font-weight: bold;
         border-radius: 5px;
    text-align:center;
text-decoration:none;
padding:3px;
         }

 #menu ul li ul {display:none;}    
 #menu ul li a:hover + ul {display:block;}   


#menu ul li a:hover {
  background-color: red;
  border-radius: 5px;
  color: white;
  font-size: 12pt;
  font-weight: bolder;
  float:left;
  width:100px;

}

</style>

<body>


 <div id="box1">
         <div id="menu">
            <ul>
               <li><a href="">Fruit</a>
<ul>
           <li><a href="#">Mango</a></li>
           <li><a href="#">Banana</a></li>
</ul>
</li>

<ul>
               <li><a href="">Vegitable</a>
<ul>
           <li><a href="#">Potato</a></li>
           <li><a href="#">Garbag</a></li>

            </ul>
</li>
   </ul>
         </div>
</div>

</body>
</html>

When I move cursor from MENU to submenu then submenu disappears immediately.
You can see result here
http://jsfiddle.net/o9shq1xo/6/

Please help

  • 3 Contributors
  • 5 Replies
  • 213 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by UK-1991
Member Avatar for DaveAmour

Try changing

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

To

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

Also remove horiztinal spacing with something like margin: 0; padding: 0; on #menu ul li ul li

Member Avatar for Shaziahussain

Sir I have removed horizontal spacing but still submenu is not working.

Submenu is not showing at the left point of Main Menu.

When second element of submenu gets focus then submenu disappears.

Please see this
http://jsfiddle.net/o9shq1xo/7/

Member Avatar for UK-1991

Hello,

please replace your css with the one provided below

    #box1 {
        width: 350px;
        height: 150px;
        padding: 5px;
        border: 1px solid blue;
        margin: 50px auto;
        overflow: auto;
    }
    #menu ul li {
        list-style: none;
        float: left;
        margin: 0 1px;
        background: khaki;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: blue;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        padding: 3px;
    }
    #menu ul li:hover ul {
        display : block;
    }
    #menu ul li ul li {
        list-style: none;
        float: left;
        margin: 0 1px;
        border-top:2px solid #fff;
        background: lightblue;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: blue;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        padding: 3px;
    }

    #menu ul li ul {display:none;}    

    #menu ul li a:hover {
        background-color: red;
        border-radius: 5px;
        color: white;
        font-size: 12pt;
        font-weight: bolder;
        float: left;
        width: 100px;
    }

Thank You

Member Avatar for UK-1991

and if you want to set the drop down just belo the navigatiion menu please set this css

#menu ul li ul {
  display: none;
  position: relative;
  left: -44px;
  right: 0px;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.