Need help in drop down sub menu?

HTML & CSS
1

I have tried a lot and made the Drop down menu learning and referring books
almost down but issue arising here can anyone help me out with it CSS and CODE OF DIV

1430×458 15.8 KB

the code is here almost 95 % working need that issue to be fixed on click of andriod the another subemenu should arise like shown above pic andriod 1.1 , 1.2 , 1.3

https://drive.google.com/open?id=1pNly2_pa9mvaGDa6385tBl0MFPW1vBU7

2

Why did you not use the list structure I gave you in the other thread?

A nested list is the semantic way to do this and needs no extra classes as the hierarchy takes care of it.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
#menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color:#5b2e93;
}
#menu > ul {
	display:table;
	width:100%;
}
#menu li {
	float: left;
	position:relative;
}
#menu li li {
	float:none;
}
#menu li a {
	display:block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
#menu > ul > li:hover > a {
	background-color: red;
}
#menu li ul {
	position: absolute;
	left:-999em;
	top:100%;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1000;
	transition:opacity .5s ease;
	opacity:0;
}
#menu ul ul a {
	color: black;
	padding: 15px 20px;
	text-decoration: none;
	text-align: left;
}
#menu > ul li li:hover > a {
	background-color:orange
}
#menu > ul > li:hover > ul {
	left:0;
	opacity:1;
}
#menu > ul > li:hover li:hover > ul {
	left:100%;
	top:0;
	opacity:1;
}
</style>
</head>

<body>
<div id='menu'>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#" >Tricks</a>
      <ul>
        <li><a href="#">Android</a>
          <ul>
            <li><a href="#">Android 1.1</a></li>
            <li> <a href="#">Android 1.2</a></li>
            <li><a href="#">Andriod 1.3</a></li>
          </ul>
        <li><a href="#">Windows</a></li>
        <li><a href="#">Iphone</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>
3

thank u sir seriously i am making my life complicated with this programming :grinning:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.