Dropdrown button inside ul

Question

Dropdrown button inside ul

Navigation

#1 by (2 votes)

1

This is the dropdown-button "Multimedia" and its CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15.8%;
    background-color: #e0e0e0;
    position: fixed;
    height: 600px;
    overflow: auto;
	right:1129px;
	top:47px;
	border:1px solid #939496;
	left:0px;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
	font-size:30px;
	
}


button:hover{
 background-color: #4dd6e2;
    color: white;
}


li a.active {
    background-color: #309ba5;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4dd6e2;
    color: white;
}

.dropbtn {
    background-color: #e0e0e0;
    color: black;
    padding: 16px;
    font-size: 30px;
    border: none;
    cursor: pointer;
	width:22px;
	height:50px;
	font-family:Times New Roman;
	text-align:middle;
	
}

.dropdown {
    position: relative;
    display: inline-block;
	top:-88px;
	right:572px;
	
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

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

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

.dropdown:hover .dropbtn {
    background-color: #4dd6e2;
}

<div class="dropdown">
  <button class="dropbtn">Multimedia</button>
  <div class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
</div>

And this is the menu:

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="aboutme.html">About</a></li>
  <li><a href="games.html">Games</a></li>
  <li><a href="">Multimedia</a></li> <!--Aqui va el dropdown-->
</ul>

I want to put the dropdown-button in the <li> , but if I put it in, it does not work. Does anyone know how to solve this?

html5

asked by JuanVan12 12.12.2016 в 11:44

source

1 answer

change background to views in angularjs Get json of a rest api and show it in angular

score 2 · Answer 1

The only problem I see is that you are giving a position to the menu that causes it to leave the screen and not be seen, because otherwise, it seems to work correctly. The styles to which I refer are these:

.dropdown {
    position: relative;
    display: inline-block;
    top:-88px;   /* <---------------- este valor   */
    right:572px; /* <---------------- y este valor */
}

In fact, these values are incredibly specific, I would not be surprised if you were there for some reason (although they do not seem like an ideal solution), but they do not make sense in the example you put in the question.

Thus, if you put your own code by removing that positioning of the styles, you will see how the dropdown is already visible and it works (although it seems that the options are missing some style):

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15.8%;
  background-color: #e0e0e0;
  position: fixed;
  height: 600px;
  overflow: auto;
  right:1129px;
  top:47px;
  border:1px solid #939496;
  left:0px;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  font-size:30px;

}


button:hover{
  background-color: #4dd6e2;
  color: white;
}


li a.active {
  background-color: #309ba5;
  color: white;
}

li a:hover:not(.active) {
  background-color: #4dd6e2;
  color: white;
}

.dropbtn {
  background-color: #e0e0e0;
  color: black;
  padding: 16px;
  font-size: 30px;
  border: none;
  cursor: pointer;
  width:22px;
  height:50px;
  font-family:Times New Roman;
  text-align:middle;

}

.dropdown {
  position: relative;
  display: inline-block;
  /*top:-88px;
  right:572px;*/
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

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

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

.dropdown:hover .dropbtn {
  background-color: #4dd6e2;
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a class="active" href="aboutme.html">About</a></li>
  <li><a href="games.html">Games</a></li>
  <li>
    <div class="dropdown">
      <button class="dropbtn">Multimedia</button>
      <div class="dropdown-content">
        <a href="mp4.html">MP4</a>
        <a href="png.html">PNG</a>
        <a href="gif.html">GIF</a>
      </div>
    </div>
  </li>
</ul>

To make the width look better, you could remove the width:22px from the dropbtn and make the list have overflow-x:hidden so that the scroll bars do not appear.