响应式菜单(CSS 问题)[顶级菜单之间的间距]

我m new to responsive UI s，实际上我正在尝试使用角度js从json数据创建一个响应式菜单。

当我的屏幕

尺寸已满时，它可以正常工作，但是当我的屏幕最大宽度小于500px时，菜单无法正确显示，下拉菜单之间有空格。

请让我知道我在哪里犯了错误。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
      background: #333;
      margin: 15px;
    }
    
    h1 {
      font-size: 45px;
      font-weight: 100;
      letter-spacing: 15px;
      text-align: center;
      color:gray;
    }
    h3{
    
    color:gray;
    
    }
    
    h1,
    #main_content,
    #dog_link {
      padding: 15px;
    }
    
    p {
      margin: 15px 0;
    }
    
    a {
      color: #06c;
    }
    
    #main_nav ul {
      background: white;
      float: left;
      -webkit-transition: .5s;
      transition: .5s;
    }
    
    #main_nav li {
      float: left;
      position: relative;
      width: 150px;
      list-style: none;
      -webkit-transition: .5s;
      transition: .5s;
    }
    
    #main_nav>ul>li>a,
    h1 {
      text-transform: uppercase;
    }
    
    #main_nav a {
      display: block;
      text-decoration: none;
      padding: 5px 15px;
      color: #000;
    }
    
    #main_nav ul ul {
      position: absolute;
      left: 0;
      top: 100%;
      visibility: hidden;
      opacity: 0;
    }
    
    #main_nav ul ul ul {
      left: 100%;
      top: 0;
    }
    
    #main_nav li:hover,
    #main_nav li:hover li {
      background: #ddd;
    }
    
    #main_nav li li:hover,
    #main_nav li li:hover li {
      background: #bbb;
    }
    
    #main_nav li li li:hover {
      background: #999;
    }
    
    #main_nav li:hover>ul {
      visibility: visible;
      opacity: 1;
    }
	
    @media only screen and (max-width: 500px) {
    
      li { display: block; border-bottom: 1px #D25458 solid; } li:last-child { border-bottom: none; }  
    
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
      background: gray;
      margin: 15px;
      color:white;
    }
    
    h1 {
      font-size: 25px;
      font-weight: 100;
      letter-spacing: 5px;
      text-align: center;
      color:#333;
    }
    h3{
    
    color:gray;
    
    }
    
    h1,
    #main_content,
    #dog_link {
      padding: 15px;
    }
    
    p {
      margin: 15px 0;
    }
    
    a {
      color: #06c;
    }
    
    #main_nav ul {
      background: white;
      float: left;
      -webkit-transition: .5s;
      transition: .5s;
    }
    
    #main_nav li {
      float: left;
      position: relative;
      width: 150px;
      list-style: none;
      -webkit-transition: .5s;
      transition: .5s;
    }
    
    #main_nav>ul>li>a,
    h1 {
      text-transform: uppercase;
    }
    
    #main_nav a {
      display: block;
      text-decoration: none;
      padding: 5px 15px;
      color: #000;
    }
    
    #main_nav ul ul {
      position: relative;
      left: 0;
      top: 100%;
      visibility: hidden;
      opacity: 0;
    }
    
    #main_nav ul ul ul {
      left: 100%;
      top: 0;
    }
    
    #main_nav li:hover,
    #main_nav li:hover li {
      background: #ddd;
    }
    
    #main_nav li li:hover,
    #main_nav li li:hover li {
      background: #bbb;
    }
    
    #main_nav li li li:hover {
      background: #999;
    }
    
    #main_nav li:hover>ul {
      visibility: visible;
      opacity: 1;
    }
}
#animation {-webkit-animation-timing-function: ease-in-out;}
</style>
<script>
history.forward();
var helloAjaxApp = angular.module("myApp", []);
helloAjaxApp.controller("myCtrl3", [ '$scope', '$http', function($scope, $http) {
	 
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
    $scope.sendGet3 = function() {
        
            $scope.menus = [{"name":"home","url":"#","submenus":[]},{"name":"enrollment","url":"#","submenus":[{"name":"New Enrollment","url":"#","submenus":[{"name":"Ekyc","url":"#"},{"name":"Non_ekyc","url":"#"}]},{"name":"Modify_Old ","url":"#","submenus":[{"name":"Ekyc","url":"#"},{"name":"Non-Ekyc","url":"#"}]}]},{"name":"User Module","url":"#","submenus":[{"name":"Create","url":"#","submenus":[]},{"name":"Modify","url":"#","submenus":[{"name":"Operator","url":"#"},{"name":"BC","url":"#"}]},{"name":"Delete","url":"#","submenus":[]}]},{"name":"Reports","url":"#","submenus":[{"name":"Summery_Reports","url":"#","submenus":[{"name":"Accounts Opened","url":"#"},{"name":"Enrollments","url":"#"}]},{"name":"General Report","url":"#","submenus":[]}]}];
        };
} ]);
	
</script>
</head>
<body>
<h1 align="center">Enrollment System</h1>
      <div ng-app="myApp"> 
      
    <div ng-init="sendGet3()" ng-controller="myCtrl3" >
      <nav id="main_nav">
        <ul>
          <li ng-repeat="menu in menus"><a href="{{menu.url}}">{{menu.name}}</a>
            <ul>
              <li ng-repeat="submenu1 in menu.submenus"><a href="{{submenu1.url}}">{{submenu1.name}}</a>
                <ul>
                  <li ng-repeat="submenu2 in submenu1.submenus"><a href="{{submenu2.url}}">{{submenu2.name}}</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      
      
    </div>  
 
</div> 
</body>
</html>

在屏幕尺寸为 500 像素的媒体查询中，添加以下样式

#main_nav ul ul>li{
		height:30px;
	}

也许它会有所帮助。

* {
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
      background: #333;
      margin: 15px;
    }
    
    h1 {
      font-size: 45px;
      font-weight: 100;
      letter-spacing: 15px;
      text-align: center;
      color:gray;
    }
    h3{
    
    color:gray;
    
    }
    
    h1,
    #main_content,
    #dog_link {
      padding: 15px;
    }
    
    p {
      margin: 15px 0;
    }
    
    a {
      color: #06c;
    }
    
    #main_nav ul {
      background: white;
      float: left;
      -webkit-transition: .5s;
      transition: .5s;
    }
    
    #main_nav li {
      float: left;
      position: relative;
      width: 150px;
      list-style: none;
      -webkit-transition: .5s;
      transition: .5s;
    }
    
    #main_nav>ul>li>a,
    h1 {
      text-transform: uppercase;
    }
    
    #main_nav a {
      display: block;
      text-decoration: none;
      padding: 5px 15px;
      color: #000;
    }
    
    #main_nav ul ul {
      position: absolute;
      left: 0;
      top: 100%;
      visibility: hidden;
      opacity: 0;
    }
    
    #main_nav ul ul ul {
      left: 100%;
      top: 0;
    }
    
    #main_nav li:hover,
    #main_nav li:hover li {
      background: #ddd;
    }
    
    #main_nav li li:hover,
    #main_nav li li:hover li {
      background: #bbb;
    }
    
    #main_nav li li li:hover {
      background: #999;
    }
    
    #main_nav li:hover>ul {
      visibility: visible;
      opacity: 1;
    }
	
    @media only screen and (max-width: 500px) {
    
     #main_nav li { display: block; border-bottom: 1px #D25458 solid; } li:last-child { border-bottom: none; }  
    
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
      background: gray;
      margin: 15px;
      color:white;
    }
    
    h1 {
      font-size: 25px;
      font-weight: 100;
      letter-spacing: 5px;
      text-align: center;
      color:#333;
    }
    h3{
    
    color:gray;
    
    }
    
    h1,
    #main_content,
    #dog_link {
      padding: 15px;
    }
    
    p {
      margin: 15px 0;
    }
    
    a {
      color: #06c;
    }
    
    #main_nav ul {
      background: white;
      float: none !important;
      -webkit-transition: .5s;
      transition: .5s;
    }
    
    #main_nav li {
      position: relative;
      list-style: none;
      -webkit-transition: .5s;
      transition: .5s;
      float: none;
      width: auto;
    }
    
    #main_nav>ul>li>a,
    h1 {
      text-transform: uppercase;
    }
    
    #main_nav a {
      display: block;
      text-decoration: none;
      padding: 5px 15px;
      color: #000;
    }
    
    #main_nav ul ul {
      position: relative;
      left: 0;
      top: 100%;
      max-height: 0;
      overflow: hidden;
    }
    
    #main_nav ul ul ul {
      left: 100%;
      top: 0;
    }
    
    #main_nav li:hover,
    #main_nav li:hover li {
      background: #ddd;
    }
    
    #main_nav li li:hover,
    #main_nav li li:hover li {
      background: #bbb;
    }
    
    #main_nav li li li:hover {
      background: #999;
    }
    
    #main_nav li ul {
      position: static !important;
    }
    
    #main_nav li:hover>ul {
      max-height: 400px;
    }
}
#animation {-webkit-animation-timing-function: ease-in-out;}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
    
</style>
<script>
history.forward();
var helloAjaxApp = angular.module("myApp", []);
helloAjaxApp.controller("myCtrl3", [ '$scope', '$http', function($scope, $http) {
	 
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
    $scope.sendGet3 = function() {
        
            $scope.menus = [{"name":"home","url":"#","submenus":[]},{"name":"enrollment","url":"#","submenus":[{"name":"New Enrollment","url":"#","submenus":[{"name":"Ekyc","url":"#"},{"name":"Non_ekyc","url":"#"}]},{"name":"Modify_Old ","url":"#","submenus":[{"name":"Ekyc","url":"#"},{"name":"Non-Ekyc","url":"#"}]}]},{"name":"User Module","url":"#","submenus":[{"name":"Create","url":"#","submenus":[]},{"name":"Modify","url":"#","submenus":[{"name":"Operator","url":"#"},{"name":"BC","url":"#"}]},{"name":"Delete","url":"#","submenus":[]}]},{"name":"Reports","url":"#","submenus":[{"name":"Summery_Reports","url":"#","submenus":[{"name":"Accounts Opened","url":"#"},{"name":"Enrollments","url":"#"}]},{"name":"General Report","url":"#","submenus":[]}]}];
        };
} ]);
	
</script>
</head>
<body>
<h1 align="center">Enrollment System</h1>
      <div ng-app="myApp"> 
      
    <div ng-init="sendGet3()" ng-controller="myCtrl3" >
      <nav id="main_nav">
        <ul>
          <li ng-repeat="menu in menus"><a href="{{menu.url}}">{{menu.name}}</a>
            <ul>
              <li ng-repeat="submenu1 in menu.submenus"><a href="{{submenu1.url}}">{{submenu1.name}}</a>
                <ul>
                  <li ng-repeat="submenu2 in submenu1.submenus"><a href="{{submenu2.url}}">{{submenu2.name}}</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      
      
    </div>  
 
</div> 
</body>
</html>

或者你能显示你想要的结果，你实际上需要什么吗？

相关内容

最新更新

热门标签：