Home > Article > Web Front-end > css hover drop-down menu_html/css_WEB-ITnose
css hover drop-down menu_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:411174browse
My code is now that when the mouse moves over the root, the drop-down menu appears under the root. I want to change it so that when the mouse moves over it, the drop-down menu appears on the right side of the root (on the same line as the root). Is it possible? How do I change the code?
ul.cssMenu, ul.cssMenu ul{ list-style:none; margin:0; padding:-10; position: relative;}ul.cssMenu ul { display:none; /*initially menu item is hidden*/ position: absolute; /*absolute positioning is important for menu to float*/ }ul.cssMenu li:hover > ul { display:block; background-color:red;} <html><link href="1.css" type="text/css" rel="stylesheet" /><ul class="cssMenu"> <li> <font color="blue">root<font> <ul> <li><a href=#>sub</a></li> </ul> </li></ul></html>
Reply to discussion (solution)
Thanks for sharing your experience
ul.cssMenu li:hover > ul { display:block; background-color:red; top:-150px; left:50px;} There seems to be a problem with positioning
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