I just want create submenu in my drop down ... but I cant find code to fix this.
HTML CODE :
<nav id='menu'> <ul> <li><a class='home' href='/'>Home</a></li> <li><a class='prett' href='#' title='Menu'>Menu</a> <ul class='menus'> <li><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a> <ul class='submenu'> <li><a href="#" title="Sub Menu">Sub Menu</a></li> </ul> </li> <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li> <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li> </ul> </li> </ul> </nav>
CSS CODE :
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded} #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none} #menu ul{height:35px} #menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase} #menu li:first-child{border-left: none} #menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;} #menu li:hover > a,#menu li a:hover{background:#111} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:12px;position:absolute;left:35px} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;} #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;} #menu li:hover ul.menus{display:block} #menu a.home {background: #c00;} #menu a.prett{padding:0 27px 0 14px} #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px} #menu ul.menus a:hover{background:#333;}
Thanks , this site will really help me so much
I'm not quite sure what kind of result are you expecting but one way to do this is to add a class to the submenu li and watch when it's hovered, after which you show the submenu. Like this:
#menu { background: #343434; color: #eee; height: 35px; border-bottom: 4px solid #eeeded } #menu ul, #menu li { margin: 0 0; padding: 0 0; list-style: none } #menu ul { height: 35px } #menu li { float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 -1px 0 #000; border-right: 1px solid #444; border-left: 1px solid #111; text-transform: uppercase } #menu li:first-child { border-left: none } #menu a { display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #eee; } #menu li:hover > a, #menu li a:hover { background: #111 } #menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer } #menu label { font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center } #menu label span { font-size: 12px; position: absolute; left: 35px } #menu ul.menus { height: auto; width: 180px; background: #111; position: absolute; z-index: 99; display: none; border: 0; } #menu ul.menus li { display: block; width: 100%; font: 12px Arial; text-transform: none; } #menu li:hover ul.menus { display: block } #menu a.home { background: #c00; } #menu a.prett { padding: 0 27px 0 14px } #menu a.prett::after { content: ""; width: 0; height: 0; border-width: 6px 5px; border-style: solid; border-color: #eee transparent transparent transparent; position: absolute; top: 15px; right: 9px } #menu ul.menus a:hover { background: #333; } #menu ul.menus .submenu { display: none; position: absolute; left: 180px; background: #111; top: 0; width: 180px; } #menu ul.menus .submenu li { background: #111; } #menu ul.menus .has-submenu:hover .submenu { display: block; }
<nav> <ul id='menu'> <li><a class='home' href='/'>Home</a></li> <li><a class='prett' href='#' title='Menu'>Menu</a> <ul class='menus'> <li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a> <ul class='submenu'> <li><a href="#" title="Sub Menu">Sub Menu</a></li> <li><a href="#" title="Sub Menu">Sub Menu 2</a></li> <li><a href="#" title="Sub Menu">Sub Menu 3</a></li> </ul> </li> <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li> <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li> </ul> </li> </ul> </nav>
EDIT:
With Javascript and click to open: https://jsfiddle.net/thepio/pn0ym10e/2/
