如何在博客中添加下拉菜单的子菜单

How to Add sub menu to dropdown menu in Blogger

本文关键字：下拉菜单 菜单 添加      更新时间：2023-09-26

我想添加一个" sub menu "到下拉菜单。但是不工作，我对CSS知之甚少，我不知道怎么做。我希望子菜单打开到右边时，光标放在它这里是css和html与它有关。请帮帮我……

CSS和HTML 

#menu{background:#f0f0f0;border:1px solid #ddd;color:#ddd;height:35px;font-family:'Oswald', Arial, sans-serif;width:1090px;margin:0 auto;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:35px;width:1100px}
#menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#77778b;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 1px 0 #fff;}
#menu li a{border-right:1px solid #e5e5e5;}
#menu li a:hover {color:#444;background-color:#e5e5e5;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#77778b}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#f0f0f0;border-top:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#77778b;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#9292a2 transparent transparent transparent;position:absolute;top:14px;right:9px}
#menu ul.menus a:hover{background:#ddd;color:#333}
<nav id='menu'>
<input type='checkbox'/>
  <label><i class='icon-reorder'/><span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a class='dropdown' href='#'>Regulation 2008</a>
<ul class='menus'>
 <li>
	<a class='dropdown' href='#'>B.E. Mechanical Engineering</a>
    <ul class='menus'>
      <li><a href='#'>Syllabus</a></li>
      <li><a href='#'>Previous Year Question Papers</a></li>
    </ul>
 </li>
 <li><a href='#'>B.E. Automobile Engineering</a></li>
 <li><a href='#'>B.E. Aeronautical Engineering</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>Regulation 2013</a>
<ul class='menus'>
 <li><a href='#'>B.E. Mechanical Engineering</a></li>
 <li><a href='#'>B.E. Automobile Engineering</a></li>
 <li><a href='#'>B.E. Aeronautical Engineering</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
       </ul>
    </nav>

试试这个CSS，这可能会帮助你…

#nav {
list-style:none inside;
margin:0;
padding:0;
text-align:center;
}
#nav li {
display:block;
position:relative;
float:left;
background: #006633; /* menu background color */
}
#nav li a {
display:block;
padding:0;
text-decoration:none;
width:200px; /* this is the width of the menu items */
line-height:35px; /* this is the hieght of the menu items */
color:#ffffff; /* list item font color */
}
#nav li li a {font-size:80%;} /* smaller font size for sub menu items */
#nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */

#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}
#nav li:hover ul ul {display:none;} /* hides sub-sublists */
#nav li:hover ul {display:block;} /* shows sublist on hover */
#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:200px; /* this should be the same width as the parent list item  */
margin-top:-35px; /* aligns top of sub menu with top of list item */
}

检查此提琴-> http://jsfiddle.net/oqww08s4/2/

或者如果你想以不同的方式，然后尝试这个提琴-> http://jsfiddle.net/6kDG8/2/

相关文章：