UL导航问题

问题描述 投票：0回答：1

我的导航栏有几个问题。

我已经使用ul标签创建了一个导航，但是我无法将li导航置于ul-> li-> ul的中心。我也尝试过使ul-> li的大小与父级li相同，但我做不到。

[“服务”，“联系方式”和“语言”选项卡出现问题。

  <li><a href="#" onclick="myFunction()">HOME</a></li>
  <li><a href="#" onclick="myFunction()">ABOUT US</a></li>
  <li class="dropdown">
    <a href="#" onclick="dropMenu()">SERVICES</a>

    <ul class="dropdown_menu" id="myDrop"> //I need to make  this same width as parent li

      <li class="dropnav"><a href="#" onclick="myFunction()">SERVICES</a></li>
      <li class="dropnav"><a href="#" onclick="myFunction()">FEEDBACK</a></li>
      <li class="dropnav"><a href="#" onclick="myFunction()">F.A.Q</a></li>
          //All the li tags above must be centered within the ul navigation, 
            which should be  the same width as parent li.
    </ul>
  </li>
</ul>

这里是代码：

https://jsfiddle.net/p02zgqru/1/

非常感谢您的帮助。

希望你们能帮助我！谢谢;）

html css navigation html-lists
1个回答
0
投票

尝试将display: flex;添加到.topnav，然后将width: 33%添加到.topnav .logo，然后菜单将居中。 

function dropMenu() {
  var x = document.getElementById("myDrop");
  if (x.className === "dropdown_menu") {
    x.className += " responsive";
  } else {
    x.className = "dropdown_menu";
  }
}

function dropMenu2() {
  var x = document.getElementById("myDrop2");
  if (x.className === "dropdown_menu") {
    x.className += " responsive";
  } else {
    x.className = "dropdown_menu";
  }
}

function dropMenu3() {
  var x = document.getElementById("myDrop3");
  if (x.className === "dropdown_menu") {
    x.className += " responsive";
  } else {
    x.className = "dropdown_menu";
  }
}

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }

  var x = document.getElementById("myLogo");
  if (x.className === "logo") {
    x.className += " responsive";
  } else {
    x.className = "logo";
  }

  dropMenu();
  dropMenu2();
  dropMenu3();
}
body {
	padding: 0px;
	margin: 0px;
  background: black;
}

* {
    margin: 0;
    padding: 0;
  }

.clear {
    clear: both;
}

#big_image {
	width: 100%;
	height: auto;
  position: relative;
  BACKGROUND: PURPLE;
}

.topnav {
	overflow: hidden;
	width: 100%;
	max-width: 1120px;
	height: 100%;
	max-height: 250px;
	position: absolute;
	top: 2.70%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
  display: flex;
}

.topnav .logo {
    display: inline-block;
    background: yellow;
    width: 33%
}

.topnav .nav_links {
    float: right;
    margin-top: 4%;
}

ul.nav_links li {
    display: inline-block;
}

.topnav .nav_links li a {
    float: left;
    text-decoration: none;
    font-family: NunitoSans-Regular;
    font-size: 18px;
    color: #fff;
    padding: 0 15px 10px 15px;
}

.topnav .nav_links li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .3s;
}

.dropdown_menu {
    border: 1px solid white;
    margin-top: 3%;
    width: auto;
    text-decoration: none;
    display: block;
    visibility:hidden;
    position: absolute;
    z-index: 1;
    width: 130px;
}

.topnav .nav_links .dropdown_menu ul {
    text-align: center;
}

.topnav .nav_links .dropdown_menu li {
    padding: 5px;
    display: block;
}

.topnav .nav_links .dropdown_menu li a {
    display: block;
    padding: 0;
    margin: 0;
}

.topnav .nav_links .dropdown_menu li a img {
    padding: 5px;
}

.dropdown:hover > .dropdown_menu {
    visibility: visible;
}

.topnav .nav_links .icon {
    display: none;
  }
<html>
    <head>
        <title>Test NavigationL</title>
        <link rel="icon" href="favicon.png" type="image/x-icon" />
        <meta charset="UTF-8">
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="mobile.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
        <img src="a1.png" id="big_image" alt="big_image" />
        <div class="topnav" id="myTopnav">
            <img src="logo.png" class="logo" id="myLogo" alt="image_logo"/>
            <ul class="nav_links">
                <li><a href="#" onclick="myFunction()">HOME</a></li>
                <li><a href="#" onclick="myFunction()">ABOUT US</a></li>
                <li class="dropdown">
                    <a href="#" onclick="dropMenu()">SERVICES</a>
                    <ul class="dropdown_menu" id="myDrop">
                        <li class="dropnav"><a href="#" onclick="myFunction()">SERVICES</a></li>
                        <li class="dropnav"><a href="#" onclick="myFunction()">FEEDBACK</a></li>
                        <li class="dropnav"><a href="#" onclick="myFunction()">F.A.Q</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" onclick="dropMenu2()">CONTACT</a>
                    <ul class="dropdown_menu" id="myDrop2">
                        <li class="dropnav"><a href="#" onclick="myFunction()">EMAIL</a></li>
                        <li class="dropnav"><a href="#" onclick="myFunction()">INSTAGRAM</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" onclick="dropMenu3()">LANGUAGE</a>
                    <ul class="dropdown_menu" id="myDrop3">
                        <li class="dropnav">
                            <a href="#" onclick="myFunction()">PT</a> 
                            <a href="#" onclick="myFunction()">EN</a>
                        </li>
                    </ul>
                </li>
                <li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
            </ul>
        </div>
        
    </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.