Home > Article > Web Front-end > CSS implements horizontal drop-down menu_html/css_WEB-ITnose
CSS implements horizontal drop-down menu_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:18:051224browse
css
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><style type="text/css"> body{ color: black; } .father{ height: 31px; background-color: grey; position: relative; } .father li{ float: left; margin-right: 5px; } .son{ display: none; background-color: red; height: 30px; top: 31px; left: 0px; } .father li:hover ul{ display: block; } .son li{ float: left; margin-right: 5px; }</style></head><body><ul class="father"> <li>first</li> <li> <a href="#">father</a> <ul class="son"> <li>son1</li> <li>son1</li> <li>son1</li> </ul> </li></ul></body></html> This is my code but it is different under chrome and ie. Can any expert help to solve it? Thank you
Reply to the discussion (solved Solution)
I have initially sorted it out for the poster. IE7 is similar to Google. Generally, the horizontal drop-down menu controlled directly by CSS style is not very good. It is best to control it through JS. I hope it will be helpful to the poster.
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>横向菜单</title> <style type="text/css"> .horizontallyMenu{ padding: 10px; border: 1px solid red; } .father{ height: 31px; position: relative; list-style: none; margin: 0px; padding: 0px; } .father li{ cursor: pointer; float: left; padding: 5px; margin-right: 5px; } .father li a{ text-decoration: none; } .father li:hover ul{ display: block; } .son{ display: none; background-color: red; height: 30px; list-style: none; margin: 0px; padding: 0px; margin-top: 5px; } .son li{ cursor: pointer; padding: 5px; float: left; margin-right: 5px; } .son li:hover{ background-color: blue; } </style> </head> <body> <div class="horizontallyMenu"> <ul class="father"> <li>first</li> <li> <a href="#">father</a> <ul class="son"> <li>son1</li> <li>son1</li> <li>son1</li> </ul> </li> </ul> </div> </body></html> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn