CSS菜单帮助(第二个菜单消息)(CSS Menu Help (Second menu dissapear))

编程入门 行业动态 更新时间:2024-10-26 23:40:24
CSS菜单帮助(第二个菜单消息)(CSS Menu Help (Second menu dissapear))

我想把这个css菜单放在一起,但我无法正常工作。 当您浏览顶部菜单中的任何链接时,它会打开第二个菜单,但是当您继续它时,第二个菜单会消失。 另外,它错位了。 我不能把它放在左边:0

http://tinyurl.com/7rxskdj

#menu {width:800px;background-color:#FFF;min-height:30px;border:0;border-top:2px solid #8BD2E4;padding:0 5px;margin:0 auto;}
#nmenu {list-style:none;padding:0;margin:0;width:700px;}
#nmenu li {display:inline;float:left;height:20px;margin-left:45px;position:relative;}
#nmenu li.frst {margin-left:0}
#nmenu li a {font: 11px/30px Tahoma, Geneva, sans-serif;text-decoration:none;color:#979598;letter-spacing:2px;font-weight:bold;text-transform:uppercase;}
#smedia {width:100px;height:30px;float:left;}
#fb, #tw, #pt {background: #FFF url(smedia.png) no-repeat center;width:16px;height:16px;display:block;float:right;margin:7px 3px;}
#fb {background-position: -1px -1px;}
#tw {background-position: -18px -1px;}
#pt {background-position: -35px -1px;}
#nmenu li ul {display:none;position:absolute;top:30px;left:0;border:1px solid red;background-color:#FFF;}
#nmenu li:hover ul {display:block}
#nmenu li ul li {float:left;width:100px;}

I am trying to put this css menu together but I couldn`t get it working right. When you go over any link in top menu it opens up second menu although second menu disappears when you go on it. Plus, its misplaced. I couldn't place it in left:0

http://tinyurl.com/7rxskdj

#menu {width:800px;background-color:#FFF;min-height:30px;border:0;border-top:2px solid #8BD2E4;padding:0 5px;margin:0 auto;}
#nmenu {list-style:none;padding:0;margin:0;width:700px;}
#nmenu li {display:inline;float:left;height:20px;margin-left:45px;position:relative;}
#nmenu li.frst {margin-left:0}
#nmenu li a {font: 11px/30px Tahoma, Geneva, sans-serif;text-decoration:none;color:#979598;letter-spacing:2px;font-weight:bold;text-transform:uppercase;}
#smedia {width:100px;height:30px;float:left;}
#fb, #tw, #pt {background: #FFF url(smedia.png) no-repeat center;width:16px;height:16px;display:block;float:right;margin:7px 3px;}
#fb {background-position: -1px -1px;}
#tw {background-position: -18px -1px;}
#pt {background-position: -35px -1px;}
#nmenu li ul {display:none;position:absolute;top:30px;left:0;border:1px solid red;background-color:#FFF;}
#nmenu li:hover ul {display:block}
#nmenu li ul li {float:left;width:100px;}

                

最满意答案

试试下面的css:

#nmenu li { display: inline; float: left; margin-left: 44px; position: relative; } #nmenu li ul { background-color: #FFFFFF; border: 1px solid red; display: none; left: -5px; padding: 0; position: absolute; top: 30px; } #nmenu li a { color: #979598; display: block; font: bold 11px/30px Tahoma,Geneva,sans-serif; letter-spacing: 2px; padding-left: 2px; text-decoration: none; text-transform: uppercase; }

try the below css:

#nmenu li { display: inline; float: left; margin-left: 44px; position: relative; } #nmenu li ul { background-color: #FFFFFF; border: 1px solid red; display: none; left: -5px; padding: 0; position: absolute; top: 30px; } #nmenu li a { color: #979598; display: block; font: bold 11px/30px Tahoma,Geneva,sans-serif; letter-spacing: 2px; padding-left: 2px; text-decoration: none; text-transform: uppercase; }

更多推荐

本文发布于:2023-07-24 17:20:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1248851.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:菜单   第二个   消息   CSS   menu

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!