[英]Drop-down with CSS
I got a reallly simple drop-down menu but got a problem with the submenus width. 我有一个非常简单的下拉菜单,但子菜单宽度有问题。
See it here: http://dl.dropbox.com/u/70953/SOSfrontpage.html 在此处查看: http : //dl.dropbox.com/u/70953/SOSfrontpage.html
My HTML is: 我的HTML是:
<div id="navigation">
<div id="menu-dropdown">
<ul class="menu">
<li class="menu_punkt"><a href="http://itu.dk/people/lfel/Web-kodning/SOSfrontpage.html">Frontpage</a></li>
<li class="menu_punkt"><a href="http://itu.dk/hvem_er_vi_menu/hvem_er_vi.html">Who are we?</a></li>
<li class="menu_punkt"><a href="http://itu.dk/oplev_sos_menu/oplev_sos.html">This is a test</a>
<ul>
<li><a href="http://itu.dk/people/lfel/Web-kodning/xxx.html">Your profile</a></li>
<li><a href="http://itu.dk/people/lfel/Web-kodning/xxx.html">New profile</a></li>
</ul>
</li>
<li class="menu_punkt"><a href="http://itu.dk/sos_profil_menu/sos_profil.html">SOS Profile</a>
<ul>
<li><a href="http://itu.dk/people/lfel/Web-kodning/din_profil.html">Your profile</a></li>
<li><a href="http://itu.dk/people/lfel/Web-kodning/ny_bruger.html">New user</a></li>
</ul>
</li><li class="menu_punkt"><a href="http://itu.dk/log_ind.html">Log ind</a></li>
</ul>
</div>
</div>
and my CSS is: 而我的CSS是:
/*horisontal navbar*/
#menu-dropdown {
list-style: none;
position: absolute;
top: 600px;
}
#menu-dropdown ul li {
float:left;
list-style-type: none;
font-size: 0.8em;
}
#menu-dropdown li ul {
position: absolute;
display: none;
background-color:#cdc3a2;
padding: 0px;
margin-bottom:1px;
}
#menu-dropdown ul ul li {
clear: both;
}
#menu-dropdown ul li a {
display: block;
padding: 10px;
color:#102B47;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size: 1em;
}
#menu-dropdown ul li a:hover {
background-color: #cdc3a2;
}
#menu-dropdown li:hover ul, li.over ul {
display: block;
}
You can see my problem here: http://dl.dropbox.com/u/70953/SOSfrontpage.html 您可以在这里看到我的问题: http : //dl.dropbox.com/u/70953/SOSfrontpage.html
Regards - Mestika 问候-Mestika
I think you should add a width to the menu-dropdown ul li
class. 我认为您应该在menu-dropdown ul li
类中增加宽度。
A great way to build a css drop down menu is son of a suckerfish . 构建CSS下拉菜单的一种好方法是a鱼的儿子 。
Yes JAO is right u shoud give width to li like this 是的,JAO是对的,您应该像这样给li宽一些
#menu-dropdown ul ul li {
clear:both;
width:107px;}
you can get more clue from here http://www.cssnewbie.com/example/css-dropdown-menu/ 您可以从这里获得更多线索http://www.cssnewbie.com/example/css-dropdown-menu/
Add a width to the submenu anchors 为子菜单锚添加宽度
.menu ul li a { width:200px;}
Also add the hover to the li (not teh anchor) that way the top menu stays selected when you are in the submenus 还将悬停添加到li(不是锚)中,这样当您进入子菜单时,顶部菜单会保持选中状态
#menu-dropdown ul li:hover, #menu-dropdown ul li.hover {
background-color: #cdc3a2;
}
尝试:
.menu ul li li {width: 100%}
when I learnt to write css dropdown menus I based a lot of experiments on the ton of examples on this site : http://www.cssplay.co.uk/menus/ - very clear css / html examples, minimal, clean code 当我学会编写CSS下拉菜单时,我基于该网站上的大量示例进行了很多实验: http : //www.cssplay.co.uk/menus/-非常清晰的CSS / html示例,简洁,清晰的代码
hope it helps :) 希望能帮助到你 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.