Динамическое верхнее горизонтальное меню не работает должным образом, когда выпадающий класс начальной загрузки добавляется к последнему <li> - PullRequest
Новая
       5

Динамическое верхнее горизонтальное меню не работает должным образом, когда выпадающий класс начальной загрузки добавляется к последнему <li>

0 голосов
/ 28 января 2019

Я пытаюсь создать верхнее горизонтальное меню, которое будет динамичным и должно охватывать максимальную ширину экрана, несмотря на то, сколько там доступно вкладок.

Ниже вы можете увидеть пример.

В этом меню количество вкладок Один, Два, Три, Четыре и Пять может отличаться.Это может быть только четыре или три из двух.и должен охватывать всю ширину экрана.и последнее меню определенно будет содержать выпадающий тип.Но раскрывающийся список не отображается при нажатии, когда позиция последнего

дочернего элемента не является абсолютной.когда я помещаю позицию последнего потомка как абсолютную, то отображается выпадающий список.Но ширина меню уменьшается.Я хочу отобразить выпадающий без уменьшения ширины меню.пожалуйста, помогите. 

#main-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: table;
  table-layout: fixed;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#main-nav li {
  display: table-cell;
  height: 100px;
  text-align: center;
  padding-left: 0.09em;
}

#main-nav li:first-child {
  width: 18.35%;
}

#main-nav li:last-child {
  position: absolute;
  width: 11%;
}

#main-nav li a {
  width: 100%;
  display: block;
  height: 100%;
  line-height: 37px;
  text-decoration: none;
  background-image: linear-gradient(#465f8d, #2b3c5b);
  font-family: Verdana;
  font-size: 12px;
  color: #e0e0e0;
}

#main-nav li a:hover {
  background-image: linear-gradient(#1f7c5f, #2b3c5b);
  color: #e0e0e0;
}

#main-nav li a:focus {
  background-image: linear-gradient(#fc6f37, #cb3e06);
  color: #ffffff;
}

#main-nav li a p {
  margin: 0px;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <ul id="main-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-close-others="true" href="#">five</a>
      <ul class="dropdown-menu">
        <li>ABC</li>
        <li>DEF</li>
        <li>JKL</li>
      </ul>
    </li>
  </ul>
  <div class="container">

  </div>

</body>

</html>

1 Ответ

0 голосов
/ 28 января 2019

Используйте overflow: auto; на #main-nav. 

#main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: table;
    table-layout: fixed;
    overflow: hidden;
		border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#main-nav li {
    display: table-cell;
    height: 100px;
    text-align: center;
    padding-left: 0.09em;

}
#main-nav li:first-child {
		width:18.35%;
}
/*
#main-nav li:last-child {
    position:absolute;
		width:11%;
}
*/
#main-nav {
  overflow: auto;  
}

#main-nav li a {
    width: 100%;
    display: block;
    height: 100%;
    line-height: 37px;
    text-decoration: none;
    background-image:linear-gradient(#465f8d,#2b3c5b);
		font-family: Verdana;
		font-size: 12px;
    color: #e0e0e0;
}
#main-nav li a:hover {
    background-image:linear-gradient(#1f7c5f,#2b3c5b);
    color: #e0e0e0;
}
#main-nav li a:focus {
  background-image:linear-gradient(#fc6f37,#cb3e06);
  color: #ffffff;
}
#main-nav li a p {
  margin:0px;
}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="main-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-close-others="true" href="#">five</a>
    <ul class="dropdown-menu">
    <li >ABC</li>
     <li >DEF</li>
      <li >JKL</li>
    </ul>
    </li>
</ul>
<div class="container">
  
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...