Fatal编程技术网
  • javascript/
  • Javascript HTML居中导航栏中具有无序列表/列表的所有内容div

Javascript HTML居中导航栏中具有无序列表/列表的所有内容div

javascript html css

Javascript HTML居中导航栏中具有无序列表/列表的所有内容div,javascript,html,css,html-lists,center,Javascript,Html,Css,Html Lists,Center,这可能是一个不切实际的问题，但我尝试了许多在这里和网上找到的解决方案，但仍然无法解决。 我有一个主菜单栏，每个项目都是ul中的li。 如何使其始终显示在浏览器的中心 顺便说一下，我需要让javascript在主菜单项悬停时显示相应的子菜单 下面是html <!doctype html> <html> <head> <meta charset="utf-8"> <title>nothing</title> <link r

这可能是一个不切实际的问题，但我尝试了许多在这里和网上找到的解决方案，但仍然无法解决。 我有一个主菜单栏，每个项目都是ul中的li。 如何使其始终显示在浏览器的中心

顺便说一下，我需要让javascript在主菜单项悬停时显示相应的子菜单

下面是html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nothing</title>
<link rel="stylesheet" type="text/css" href="final.css">
<script language="javascript" type="text/javascript" src="final.js"></script>
</head>

<body>  
    <div id="header">
        <div id="logo">
            <div class="verti">
                    <a href="1.html"><img src="../Images/logo.png" width="642" height="68" border="0" /></a>            
            </div>
        </div>   

        <div id="menu">
            <div class="verti"> 
                <ul>
                    <li id="m1" class='menulist' onmouseover='mov(1);' ><a href="1.html">Main</a></li>
                    <li id="m2" class='menulist' onmouseover='mov(2);' ><a href="1.html">Intro</a></li>
                    <li id="m3" class='menulist' onmouseover='mov(3);' ><a href="1.html">Info</a></li>
                    <li id="m4" class='menulist' onmouseover='mov(4);' ><a href="1.html">Details</a></li>
                    <li id="m5" class='menulist' onmouseover='mov(5);' ><a href="1.html">Contact</a></li>
                    <li id="m6" class='menulist' onmouseover='mov(6);' ><a href="1.html">Service</a></li>
                    <li id="m7" class='menulist' onmouseover='mov(7);' ><a href="1.html">News</a></li>
                    <li id="m8" class='menulist' onmouseover='mov(8);' ><a href="1.html">About</a></li>
                    <li id="m9" class='menulist' onmouseover='mov(9);' ><a href="1.html">Contact</a></li>
                </ul>
            </div>
        </div>        

        <div id="submenu">
            <div class="verti">
                <ul>
                    <li id= "s3_1" class='s3' onmouseover='mov(3);'><a href="1.html">Real Info</a></li>
                    <li id= "s3_2" class='s3' onmouseover='mov(3);'><a href="1.html">Fake Info</a></li>
                    <li id= "s3_3" class='s3' onmouseover='mov(3);'><a href="1.html">Disinfo</a></li>
                </ul>   
                <ul>
                    <li id= "s4_1" class='s4' onmouseover='mov(4);'><a href="1.html">Poor details</a></li>
                    <li id= "s4_2" class='s4' onmouseover='mov(4);'><a href="1.html">Rich details</a></li>
                    <li id= "s4_3" class='s4' onmouseover='mov(4);'><a href="1.html">None-details</a></li>
                </ul>                
            </div>

        </div>
    </div><!--header-->     
</body>
</html>
下面是用于显示子菜单的js

function mov(object){           
    //reset submenu display to none
    displaynone();      

    //set selected menu styles
    ssms(object);

    //display submenu for selected menu
    displaysub(object); 
}

function displaynone(){
    var n;
    for (n = 0; n < 10; n++) {
        var s = document.getElementsByClassName("s"+n);
        for (k = 0; k < s.length; k++) {
            s[k].style.display ="none";
        }        
    }   
}

function menurestore(){
    for(m = 1; m<10; m++){
        var ml = document.getElementById("m"+m);
        ml.className = "menulist";
    }   
}

function ssms(n){   
    //reset unselected menu styles
    menurestore();  
    var y = document.getElementById("m"+n);
    y.className = "currenttab"; 
}

function displaysub(object){
    var x = document.getElementsByClassName("s"+object);
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.display ="inline";
    }
}
非常感谢你的帮助。。在这件事上挣扎了好几天。

尝试将此类添加到您的标记中：

Flexbox是一种新的CSS属性，并非所有浏览器都完全支持它，但大多数浏览器都支持它

要使用jQuery在悬停时显示子菜单：

<!doctype html>
<html lang="en">
  <head>
    <title>Hover Menu</title>
    <meta charset="utf-8">

    <style>
      ul {
        list-style-type: none;
        text-align: center;
      }
      .hover-menu {
        position: relative;
      }
      .hover-menu  li {
        padding: 15px;
        background-color: silver;
        color: black;
        border: 1px solid black;
        width: 100px;
      }
      .sub-menu {
        position: absolute;
        visibility: hidden;
        top: 0px;
        left: 140px;
      }
      .hover-menu li:nth-child(3) .sub-menu {
        top: 50px;
        left: 140px;
      }
      .hover-menu li:nth-child(4) .sub-menu {
        top: 100px;
        left: 140px;
      }
    </style>
  </head>
  <body>

    <ul class="hover-menu">
      <li><span>Navigation</span></li>
      <li>
        <a href="index.html">Home</a>
        <ul class="sub-menu">
          <li>Link</li>
          <li>Another Link</li>
          <li>Yet Another</li>
        </ul>
      </li>
      <li>
        <a href="about.html">About</a>
        <ul class="sub-menu">
          <li>Link</li>
          <li>Another Link</li>
          <li>Yet Another</li>
        </ul>
      </li>
      <li>
        <a href="contact.html">Contact</a>
        <ul class="sub-menu">
          <li>Link</li>
          <li>Another Link</li>
          <li>Yet Another</li>
        </ul>
      </li>
    </ul>

    <script src="vendors/jquery-1.11.3.min.js"></script>
    <script>
      $('ul.hover-menu li').hover(function() {
        $('ul:first',this).css('visibility', 'visible');
      }, function(){
        $('ul:first',this).css('visibility', 'hidden');
      });
    </script>
  </body>
</html>
请加上小提琴，谢谢大家。我只是想，我可以简单地将宽度设置为任意div，并将其边距设置为auto和all set。。这真是个愚蠢的问题。谢谢大家，谢谢。这是一个简洁明了的回答。从来没有查过它，现在我可以学习一个全新的篇章。是的：flexbox有点棘手，因为它的所有规则都需要-webkit-前缀，但它非常漂亮。我发现，一旦您开始深入了解flex行和flex属性，就响应定位而言，它的工作原理类似于引导。 
.center-menu {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

<!doctype html>
<html lang="en">
  <head>
    <title>Hover Menu</title>
    <meta charset="utf-8">

    <style>
      ul {
        list-style-type: none;
        text-align: center;
      }
      .hover-menu {
        position: relative;
      }
      .hover-menu  li {
        padding: 15px;
        background-color: silver;
        color: black;
        border: 1px solid black;
        width: 100px;
      }
      .sub-menu {
        position: absolute;
        visibility: hidden;
        top: 0px;
        left: 140px;
      }
      .hover-menu li:nth-child(3) .sub-menu {
        top: 50px;
        left: 140px;
      }
      .hover-menu li:nth-child(4) .sub-menu {
        top: 100px;
        left: 140px;
      }
    </style>
  </head>
  <body>

    <ul class="hover-menu">
      <li><span>Navigation</span></li>
      <li>
        <a href="index.html">Home</a>
        <ul class="sub-menu">
          <li>Link</li>
          <li>Another Link</li>
          <li>Yet Another</li>
        </ul>
      </li>
      <li>
        <a href="about.html">About</a>
        <ul class="sub-menu">
          <li>Link</li>
          <li>Another Link</li>
          <li>Yet Another</li>
        </ul>
      </li>
      <li>
        <a href="contact.html">Contact</a>
        <ul class="sub-menu">
          <li>Link</li>
          <li>Another Link</li>
          <li>Yet Another</li>
        </ul>
      </li>
    </ul>

    <script src="vendors/jquery-1.11.3.min.js"></script>
    <script>
      $('ul.hover-menu li').hover(function() {
        $('ul:first',this).css('visibility', 'visible');
      }, function(){
        $('ul:first',this).css('visibility', 'hidden');
      });
    </script>
  </body>
</html>