Drop down menu not working

[balapriyanka]

I’m new to css. I’m trying to recreate google home page.when i hover/click “settings” button in footer my drop menu is not getting displayed.I’m able to hide it initially.Can anyone help me?

html code:

<div class="menus">
<ul style="list-style-type:none"> 
<li style="float:left"><a href="https://www.google.co.in/intl/en_in/policies/privacy/?fg=1">Privacy</a>   </li>
<li style="float:left"><a href="https://www.google.co.in/intl/en_in/policies/terms/regional.html">Terms</a>   </li>
<div class="settings">
<li style="float:left"><a href="#">Settings</a>
</div>
<ul>
    <div class="submenus">
   <li><a href="https://www.google.co.in/preferences?hl=en-IN&fg=1">Search settings</a></li>
   <li><a href="https://www.google.co.in/advanced_search?hl=en-IN&fg=1">Advanced search</a></li>
   <li><a href="https://myactivity.google.com/myactivity?hl=en-IN&fg=1">History</a></li>
   <li><a href="https://support.google.com/websearch/?visit_id=1-636506565713261044-875867970&hl=en-IN&rd=2#topic=3378866">Search Help</a></li>
   <li><a href="https://www.google.co.in/?gfe_rd=cr&dcr=0&ei=1_lNWsqTK_SG8Qen9LEI">Send feedback</a></li>
   </ul>
 </div>
</li>

</ul> 
</div>

css file:

.menus{

padding-right: 30px;
float: right;


}

.submenus{

    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid #999;
    float: right;
    list-style-type:none;
    width: 120%;
    margin-left: 10px;
    background-color:#fff;
    padding-left:30px;
    padding-right:0px;
    text-align: left;
    color: black;

}


.menus ul li .settings li:hover{
    color: red;
    display: block;

    }

[Beverleyh]

Your markup is invalid – you can’t have a div as a direct child of ul or as a sibling of li. There also looks to be some nesting issues.

I’m on mobile at the mo so can’t tidy up your code for you in order to test, but have a look at the source of this simplified CSS-only menu and see how it’s done there http://fofwebdesign.co.uk/template/_testing/keyboard-untabable-dropdown-menu.htm (ignore the :focus stuff for the purpose of your test case)

[Author]

Posts