- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
February 9, 2018 at 4:09 pm #264950balapriyankaParticipant
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; }
February 10, 2018 at 3:19 am #266554BeverleyhParticipantYour markup is invalid – you can’t have a
div
as a direct child oful
or as a sibling ofli
. 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)
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.