我在网站元素上无法达到预期的效果。
我想将指针悬停,然后会出现一个注册框。我没有关于登录和产品的菜单下拉菜单。但我不能在注册时这样做。请帮忙。 代码如下:
<div class="menu">
<!-- enter code here -->
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="products.html">Products</a>
<ul>
<li><a href="books.html">Books</a></li>
<li><a href="magazine">Magazines</a></li>
<li><a href="audio.html">Audio CDs</a></li>
<li><a href="dvd.html">DVDs</a></li>
</ul>
</li>
<li><a href="">login</a>
<ul >
<li><input type="text" name="username" value="" placeholder="Username" style="color:#939393" ></li>
<li><input type="password" name`enter code here`="password" value="" placeholder="Password" style="color:#939393" ></li>
<li><input type="button" value="login" style="color:#939393;width:158px" ></li>
</ul>
</li>
<li><a href="#register">Register</a></li>
<ul>
<!--This is the div I want to show-->
<div id="register">
<input type="text" placeholder="First Name" value="">
</div>
</ul>
</ul>
这是我的 CSS。请注意,“产品”选项卡和“登录”选项卡正在运行。
.menu { padding:38px 0 0 0; margin:0 ; width:380px; float:left; font-size:13px}
.menu ul {list-style:none; margin:0;padding:0; }
.menu li {float:left;position:relative; }
.menu li ul{ position:absolute; top:30px; left:0; visibility:hidden; background:url(images/main_bg.gif);}
.menu li:hover ul{visibility:visible; z-index:20;}
.menu li ul li {float:none;}
.menu ul li { float:left; margin:0; padding:0 10px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px 0; color:#939393; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover { color:#ddd;}
.menu ul li a.active { color:#ddd;}
.menu li:hover *#register{visibility:visible; z-index:20;}
#register {position:absolute; top:30px; left:0; visibility:hidden; background:url(images/main_bg.gif);}
最后两行似乎有效。谢谢你的帮助
最佳答案
“登录”链接是弹出窗口的同级链接,都包含在同一个 <li>
中。 ,而“注册”链接和弹出窗口位于单独的 <li>
中秒。如果您以相同的方式设置它们,它就可以正常工作。
关于html - 使用 CSS 对 div 应用可见性效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14728693/