Html 如何创建响应式下拉菜单_Html_Css

Html 如何创建响应式下拉菜单

html css

Html 如何创建响应式下拉菜单,html,css,Html,Css,我正在尝试将本教程应用于我的导航菜单，我喜欢它的设计。唯一的问题是，对于“我的会员”部分，它的打开和关闭速度太快，没有给用户选择选项的机会。出于某种原因，它对我的“更多信息”部分很有效。我不确定是什么导致了这个问题？我试图删除一些列表项，看看这是否是问题所在。我有一种感觉，也许有什么东西在碰什么东西，但我想不出是什么。。。。我将包括我的移动设备的html和css代码：这是我的html主页 <!DOCTYPE html> <html> <head> <

我正在尝试将本教程应用于我的导航菜单，我喜欢它的设计。唯一的问题是，对于“我的会员”部分，它的打开和关闭速度太快，没有给用户选择选项的机会。出于某种原因，它对我的“更多信息”部分很有效。我不确定是什么导致了这个问题？我试图删除一些列表项，看看这是否是问题所在。我有一种感觉，也许有什么东西在碰什么东西，但我想不出是什么。。。。我将包括我的移动设备的html和css代码：

这是我的html主页

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<nav class="navbar">


<ul id="navmenu">
  <li><a href="index.php">Home</a></li>
  <li><a href="header2.php">Member's Section</a><span class="darrow">&#9660;</span>
       <ul class="sub1">
          <li><a href="#">Administrator</a></li>
             <li><a href="#">Watch Videos</a>
                <ul class="sub2">
                   <li><a href="primervideos.php">Primer Level Videos</a></li>
                     <li><a href="level1videos.php">Level 1 Videos</a></li>
                      <li><a href="level2videos.php">Level 2 Lesson</a></li>
                      <li><a href="level3videos.php">Level 3 Lesson</a></li>
                </ul>
             </li>
             <li><a href="practice_diary.php">Practice Diary</a></li>
             <li><a href="display_music_forum.php">Forum</a></li>
               <li><a href="#">Games</a><span class="rarrow">&#9654;</span>
                  <ul class="sub2">
                   <li><a href="guessing_game.php">Guessing Game</a></li>
                   <li><a href="paper_scissors_stone.php">Rock, Paper, Scissor</a></li>

                   </ul>
                 </li>
        </ul>
  </li>
  <li><a href="signup.php">Signup</a></li>
  <li><a href="activate.php">Activate Membership Plan</a></li>
  <li><a href="#">More Information</a><span class="darrow">&#9660;</span>
       <ul class="sub1">
          <li><a href="#">About Us</a></li>
             <li><a href="#">Contact Us</a></li>
             <li><a href="qa.php">Questions and Answers</a></li>

        </ul>

  </li>
</ul>
</nav>

This is my css code for the nav

@media screen and (max-width: 23em) {
  ul#navmenu li {

  width: 250px;
  text-align: center;
  position: relative; /*This is very important to get sub menu absolutely line up with it */
  float: none; 
  left: 3em;
  top: 2em;
}

ul#navmenu a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 25px;
  border: 1px solid #ccc;
  border-radius: 5px;
}



ul#navmenu .sub1 a {
  margin-top: 5px;

}

ul#navmenu .sub2 a {
  margin-left: 10px;
}




ul#navmenu ul.sub1 {
  display: none;
  position: static;



}



ul#navmenu ul.sub2 {
   display: none;
  position: static;



}

ul#navmenu li:hover .sub1 {
  display: block;
  margin-bottom: 5em;
}

ul#navmenu .sub1 li:hover .sub2 {
  display:block;
}




▼；












▶；









▼；







这是我的导航css代码
@媒体屏幕和屏幕（最大宽度：23em）{
ul#navmenu li{
宽度：250px；
文本对齐：居中；
位置：相对；/*这对于使子菜单与它完全对齐非常重要*/
浮动：无；
左：3em；
顶部：2米；
}
ul#nava菜单{
文字装饰：无；
显示：块；
宽度：100%；
高度：30px；
线高：25px；
边框：1px实心#ccc；
边界半径：5px；
}
ul#navmenu.sub1 a{
边缘顶部：5px；
}
ul#navmenu.sub2 a{
左边距：10px；
}
ul#导航菜单ul.sub1{
显示：无；
位置：静态；
}
ul#导航菜单ul.sub2{
显示：无；
位置：静态；
}
ul#navmenu li:悬停。sub1{
显示：块；
边缘底部：5em；
}
ul#navmenu.sub1 li:悬停。sub2{
显示：块；
}

这是我一直试图实现的视频：

如果您能在这里指导我，尽量不要添加太多代码，我将不胜感激。…

请按照我的代码片段进行响应性下拉列表

$（文档）.ready（函数（）{
$（“.nav li a”）。每个（函数（）{
if（$（this）.next（）.length>0）{
$（此）.addClass（“父级”）；
};
})
$（“.toggleMenu”）。单击（函数（e）{
e、 预防默认值（）；
$（此）.toggleClass（“活动”）；
$（“.nav”）.toggle（）；
});
调整菜单（）；
})
$（窗口）.bind（'resize orientationchange'，function（）{
ww=document.body.clientWidth；
调整菜单（）；
});
var adjustMenu=功能（）{
var ww=document.body.clientWidth；
如果（ww<768）{
$（“.toggleMenu”）.css（“显示”、“内联块”）；
if（！$（“.toggleMenu”）.hasClass（“活动”））{
$（“.nav”）.hide（）；
}否则{
$（“.nav”）.show（）；
}
$（“.nav li”）.unbind（'mouseenter mouseleave'）；
$（“.nav li a.parent”）.unbind（'click'）.bind（'click'，函数（e）{
//必须连接到锚定元件，以防止起泡
e、 预防默认值（）；
$（this.parent（“li”）.toggleClass（“hover”）；
});
} 
否则如果（ww>=768）{
$（“.toggleMenu”）.css（“显示”、“无”）；
$（“.nav”）.show（）；
$（“.nav li”）.removeClass（“悬停”）；
$（“.nav li a”）.unbind（'click'）；
$（“.nav li”）.unbind（'mouseenter mouseleave'）.bind（'mouseenter mouseleave'，function（）{
//必须连接到li，以便鼠标悬停在子菜单上时不会触发mouseleave
$（this.toggleClass（'hover'）；
});
}
}

body，nav，ul，li，a{margin:0；padding:0；}
正文{字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；}
a{文本装饰：无；}
.集装箱{
宽度：90%；
最大宽度：900px；
利润率：10px自动；
}
.切换菜单{
显示：无；
背景:#666；
填充：10px 15px；
颜色：#fff；
}
.导航{
列表样式：无；
*缩放：1；
背景：#175e4c；
}
.导航：之前，
.导航：之后{
内容：“；
显示：表格；
}
.导航：之后{
明确：两者皆有；
}
美国海军{
列表样式：无；
宽度：9em；
}
.导航a{
填充：10px 15px；
颜色：#fff；
}
李国荣先生{
位置：相对位置；
}
.nav>li{
浮动：左；
边框顶部：1px实心#104336；
}
.nav>li>.parent{
背景图像：url（“https://cdn4.iconfinder.com/data/icons/spirit20/sort-desc-alt.png");
背景重复：无重复；
背景位置：右；
}
.nav>li>a{
显示：块；
}
李国荣先生{
位置：绝对位置；
左：-9999px；
}
.nav>li.hover>ul{
左：0；
}
.nav li li.hover ul{
左：100%；
排名：0；
}
李丽娜先生{
显示：块；
背景：1d7a62；
位置：相对位置；
z指数：100；
边框顶部：1px实心#175e4c；
}
李娜{
背景：#249578；
z指数：200；
边框顶部：1px实心#1d7a62；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.主动{
显示：块；
}
.nav>li{
浮动：无；
}
.nav>li>.parent{
背景位置：95%50%；
}
.nav li li.家长{
背景图像：url（“https://cdn4.iconfinder.com/data/icons/spirit20/sort-desc-alt.png");
背景重复：无重复；
背景位置：95%50%；
}
美国海军{
显示：块；
宽度：100%；
}
.nav>li.hover>ul，.nav-li.hover-ul{
位置：静态；
}
}