Как разместить ссылки под и справа от ссылки - PullRequest
Новая
       13

Как разместить ссылки под и справа от ссылки

0 голосов
/ 04 ноября 2018

Как сделать так, чтобы ссылки под ссылкой имели эффект парения, чтобы эта ссылка имела дополнительные ссылки справа? На данный момент я пытаюсь выяснить, что я должен сделать, чтобы сделать эту работу, и не могу Google, как я могу это сделать. Пожалуйста, помогите мне! Большое вам спасибо :) * Подробности кода: у меня уже есть ссылки ниже ссылки на hover. Мне просто нужно, чтобы ссылки были справа от этих ссылок.

Html: 

<nav role="navigation">
    <div id="header">
        <div id="menu">
            <ul>
              <li>
                <a href="#">Test</a>
              <ul class="dropdown" aria-label="submenu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
              </ul>
            </ul>
        </div>
    </div>
  </nav>

CSS: 

html
{
width:100%;
height:100%;
margin:0 0 0 0;
padding:0 0 0 0;
}
body
{
  margin:0 0 0 0;
  padding:0 0 0 0;
  width:100%;
  height:100%;
}
#header{
  height:80px;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  float:left;
  background-color:#292C2F;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.24);
}
#menu ul li
{
float:left;
margin:8.5px;
padding:8px;
padding-top:3px;
font-size:30px;
display:block;
font-family: verdana;
color:white;
text-decoration: none;
transition-duration: 0.5s;
    display: block;
}
#menu ul li a:hover
{
color:deepskyblue;
}
#menu ul
{
float:left;
margin-left:2%;
list-style: none;
}
#menu ul li a
{
text-decoration:none;
margin-left:8px;
margin-right:9px;
font-size:25px;
color:white;
float:inherit;
margin-top:-4px;
}

#menu ul li:hover,
#menu ul li:focus-within {
    background: red;
    cursor: pointer;
}

#menu ul li:focus-within a {
  outline: none;
}

#menu ul li ul {
    background: orange;
    visibility: hidden;
  opacity: 0;
  min-width: 5rem;
    position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
    left: 0;
  display: none;
}

#menu ul li:hover > ul,
#menu ul li:focus-within > ul,
#menu ul li ul:hover,
#menu ul li ul:focus {
   visibility: visible;
   opacity: 1;
   display: block;
}

#menu ul li ul li {
    clear: both;
  width: 100%;
}

1 Ответ

0 голосов
/ 04 ноября 2018

используйте это:

HTML: 

<nav style="background-color: black; height:80px;" >
    <div class="dropdown">
        <br>
      <a class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</nav>

CSS: 

.dropbtn {
    background-color: black;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: black;}
...