[英]Creating a dropdown menu
I have a menu that contains a submenu which gets displayed below the main menu when a link inside the main menu is hovered over. 我有一个菜单,其中包含一个子菜单,当主菜单中的链接悬停在主菜单下方时,该菜单会显示在主菜单下方。 What I want to do is add a second submenu inside the first submenu but make it a dropdown.
我想要做的是在第一个子菜单中添加第二个子菜单,但将其设为下拉列表。 I am not that great at css and I was wondering if anyone can help me with this.
我在css上的表现并不是很好,我想知道是否有人可以帮助我。 I haved followed some tutorials online and I was not able to get the results I was looking for.
我已经在线跟踪了一些教程,但我无法得到我想要的结果。 Here is the html and css I have so far.
这是我到目前为止的html和css。
<div id="navigation">
<ul id="mymenu">
<li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(2)">Gallery</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(3)">What We Do</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(4)">Contact</a></li>
</ul>
</div>
<div id="sublinks">
<ul id="s1">
<li><a href="#">General</a></li>
<li><a href="#">Landon News</a></li>
<li><a href="#">Trust Us</a></li>
</ul>
<ul id="s2">
<li>
<a href="#">Security Systems</a>
<ul id="s2sys">
<li><a href="#">Arlington HA</a></li>
<li><a href="#">Enfield HA</a></li>
<li><a href="#">Revere HA</a></li>
</ul>
</li>
<li>
<a href="#">WLAN Systems</a>
<ul id="s2wlan">
<li><a href="#">Beverly HA</a></li>
<li><a href="#">Holyoke HA</a></li>
<li><a href="#">Meriden HA</a></li>
<li><a href="#">Revere HA</a></li>
</ul>
</li>
</ul>
<ul id="s3">
<li><a href="#">Computers</a></li>
<li><a href="#">Strategic Planning</a></li>
<li><a href="#">Security Systems</a></li>
<li><a href="#">WLAN, WiFi Broadband</a></li>
</ul>
<ul id="s4">
<li><a href="#">Email</a></li>
<li><a href="#">Address Info</a></li>
</ul>
</div>
Here is the javascript for the main menu which will display the first submenu 这是主菜单的javascript,它将显示第一个子菜单
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=4;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
sfHover = function() {
var sfEls = document.getElementById("sublinks").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Here is the CSS 这是CSS
#navigation{
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#1361A5;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#C3C2C1;
}
/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#C3C2C1;
height:30px;
font-size:11px;
border-radius:8px;
-moz-border-radius:8px; /* Firefox 3.6 and earlier */
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
-moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
behavior: url(http://localhost/landon/assets/pie/PIE.php);
position: relative;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 10px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
#sublinks li:hover ul{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#sublinks li:hover li {
float: none;
}
#sublinks li:hover li a {
background-color: #C3C2C1;
border-bottom: 1px solid #fff;
color: #000;
left:50;
}
#sublinks li li a:hover {
background-color: #8db3ff;
}
/* ----------- Hide Sub menu ----------- */
#s2, #s3, #s2sys, #s2wlan{display:none;}
What I am trying to do is make the second submenu a dropdown from the first submenu and at the moment it displays within the same line and not as a dropdown. 我想要做的是让第二个子菜单从第一个子菜单下拉,当前它显示在同一行内而不是下拉列表。 How can I do this?
我怎样才能做到这一点?
Try adding this css to your drop down ul
list that is within your sub-menu. 尝试添加这个CSS的下拉
ul
列表那是你的子菜单内。
position: absolute;
top: 30px;
Depending on the type of result your looking for, you might want to amend the top
value, or have the dropdown vertical by adding a width
根据您要查找的结果类型,您可能需要修改
top
值,或者通过添加width
使下拉列表垂直
Demo: http://jsfiddle.net/4k2Tx/2/ 演示:http://jsfiddle.net/4k2Tx/2/
http://jsfiddle.net/kVztG/1/ http://jsfiddle.net/kVztG/1/
To make the sub-sub-menu a dropdown change the css below. 要使子子菜单下拉,请更改下面的css。
#sublinks li:hover li {
display:block;
position:relative;
top:30px;
}
The position:relative and top:30px stop the dropdowns from appearing ontop of the sub-menu, and display:block stops the li from display inline. 位置:relative和top:30px停止显示在子菜单上的下拉菜单,并且display:block阻止li从显示内联。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.