How to use hover and position:absolute properly?-CodePudding

I am not very experienced but I wanted to make a hoverable dropdown My problems:

hover doesn't work
absolute position is wierd i wanted it under txt 5 I last made a navbar like this a few years ago maybe i have forgotten or maybe i have written complete bs. Anyways thankyou to whoever answers this.

*{
    margin:0;
    padding:0;}
body{
    background-color: #000;
}
p.heading{
    font-family: helvetica;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background-color: #ccffff;
    padding: 10px;
    color:#000080;
}
.nav{
    width: 100%;
    height: 50px;
    background-color: #ff4d4d;
    float: left;
}
ul li{
    list-style: none;
    position: relative;
}
button.btn{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.btn:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}
button.drp{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.drp:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}



button.d{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    width: 150px;
    background-color: #ff4d4d;
    color:azure;
}
button.d:hover{
    text-align: center;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    height: 50px;
    width: 150px;
    background-color:#ccffff;
    color: #000;
}

.li{
    display:none;
    position: absolute;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    width: 130px;
    color:azure;
}
button.drp :hover  .li{
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "stylesheet.css">
    </head>
        <body>
            <div class = heading>
                <p class = heading>Heading</p>
            </div>
            <div class = nav>
                <ul class = nav>
                 <li><button class = btn> Txt1 </button></li>
                 <li><button class = btn> Txt2 </button></li>
                 <li><button class = btn> Txt3 </button></li>
                 <li><button class = btn> Txt4 </button></li>
                 <li><button class = drp> Txt5 </button></li>
                 <li class = li><ul>
                        <li><button class = d>txt6</button></li>
                        <li><button class = d>txt7</button></li>
                    </ul>
                 </li>
                </ul>     
            </div>
        </body>
</html>

a simple suggestion would also work i just feel like the easiest thing is flying right over

CodePudding user response：

You can simply trigger the dropdown using the li itself not the button in the first snippet I just added a class to the li that opens the dropdown when it hovers and when the hidden li itself is hovered to stay dropped down.

 .dropmysibling:hover   .li ul,.li:hover ul{
   display: block;
 }

this is the sibling method, but it's a bad implementation because it's nearly impossible to position an element based on its sibling.

a better way to do this is by using the child method by putting the hidden menu inside the li that opens it, and that makes it easy to position. Check the other snippet.

Here is the bad method - (sibling method):

*{
    margin:0;
    padding:0;}
body{
    background-color: #000;
}
p.heading{
    font-family: helvetica;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background-color: #ccffff;
    padding: 10px;
    color:#000080;
}
.nav{
    width: 100%;
    height: 50px;
    background-color: #ff4d4d;
    float: left;
    display:flex;
    align-items:stretch;
}
ul li{
    list-style: none;
    position: relative;
}
button.btn{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.btn:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}
button.drp{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.drp:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}



button.d{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    width: 150px;
    background-color: #ff4d4d;
    color:azure;
}
button.d:hover{
    text-align: center;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    height: 50px;
    width: 150px;
    background-color:#ccffff;
    color: #000;
}
.li{
  position:relative;
}
.li ul{
    display:none;
    position: absolute;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    width: 130px;
    color:azure;
    top:100%;
    left:-75px;
}
 .dropmysibling:hover   .li ul,.li:hover ul{
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "stylesheet.css">
    </head>
        <body>
            <div class = heading>
                <p class = heading>Heading</p>
            </div>
            <div class = nav>
                <ul class = nav>
                 <li><button class = btn> Txt1 </button></li>
                 <li><button class = btn> Txt2 </button></li>
                 <li><button class = btn> Txt3 </button></li>
                 <li><button class = btn> Txt4 </button></li>
                 <li ><button class = drp> Txt5 </button></li>
                 <li class = li><ul>
                        <li><button class = d>txt6</button></li>
                        <li><button class = d>txt7</button></li>
                    </ul>
                 </li>
                </ul>     
            </div>
        </body>
</html>

Here is a better method - (child method):

*{
    margin:0;
    padding:0;}
body{
    background-color: #000;
}
p.heading{
    font-family: helvetica;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background-color: #ccffff;
    padding: 10px;
    color:#000080;
}
.nav{
    width: 100%;
    height: 50px;
    background-color: #ff4d4d;
    float: left;
    display:flex;
    align-items:stretch;
}
ul li{
    list-style: none;
    position: relative;
}
button.btn{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.btn:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}
button.drp{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color: #ff4d4d;
    color:azure;
}
button.drp:hover{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    background-color:#ccffff;
    color: #000;
}



button.d{
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    padding: 10px;
    height: 50px;
    width: 150px;
    background-color: #ff4d4d;
    color:azure;
}
button.d:hover{
    text-align: center;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    float: left;
    height: 50px;
    width: 150px;
    background-color:#ccffff;
    color: #000;
}
.dropdownmychild{
  postistion:relative;
}
.dropdownmychild > ul{
    display:none;
    position: absolute;
    border: none;
    font-family: helvetica;
    font-size: 16px;
    width: 130px;
    color:azure;
    top:100%;
    left:0;
}
.dropdownmychild:hover >ul{
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "stylesheet.css">
    </head>
        <body>
            <div class = heading>
                <p class = heading>Heading</p>
            </div>
            <div class = nav>
                <ul class = nav>
                 <li><button class = btn> Txt1 </button></li>
                 <li><button class = btn> Txt2 </button></li>
                 <li><button class = btn> Txt3 </button></li>
                 <li><button class = btn> Txt4 </button></li>
                 <li ><button class = drp> Txt5 </button>
                 <ul>
                        <li><button class = d>txt6</button></li>
                        <li><button class = d>txt7</button></li>
                    </ul>
                 </li>
                </ul>     
            </div>
        </body>
</html>

I also gave the .nav a display: flex; and align-items: stretch;

CodePudding user response：

I also change your HTML structure and give them some class names. You can compare it with your code. You should also improve yourself about elements (tags), class name, and ID on HTML and CSS. You will take errors even you write the correct code.

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
      </head>
      <body>
        <div >
          <h1 >Heading</h1>
        </div>
        <div >
          <ul >
            <li >
              <a href="#" >Item 1</a>
            </li>
            <li >
              <a href="#" >Item 2</a>
              <ul >
                <li >
                  <a href="#" >Drop Item 1</a>
                </li>
                <li >
                  <a href="#" >Drop Item 2</a>
                </li>
              </ul>
            </li>
            <li ><a href="#" >Item 3</a></li>
            <li ><a href="#" >Item 4</a></li>
            <li ><a href="#" >Item 5</a></li>
            <li ><a href="#" >Item 6</a></li>
            <li ><a href="#" >Item 7</a></li>
          </ul>
        </div>
      </body>
    </html>


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: #000;
    }
    
    .heading__title {
      font-family: helvetica;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      background-color: #ccffff;
      padding: 10px;
      color: #000080;
    }
    
    .nav {
      width: 100%;
      background-color: #ff4d4d;
      float: left;
    }
    
    ul {
      list-style-type: none;
    }
    
    a:link,
    a:visited {
      color: azure;
      text-decoration: none;
    }
    
    .nav__list {
      position: relative;
    }
    
    .nav__item {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
    }
    
    .nav__item:hover .drop-list {
      display: block;
    }
    
    .nav__link {
      border: none;
      font-family: helvetica;
      font-size: 16px;
      background-color: #ff4d4d;
    
      text-decoration: none;
      display: inline-block;
    }
    
    .drop-list {
      position: absolute;
      width: 100%;
      top: 40px;
      left: 0;
      background-color: #ff4d4d;
      color: azure;
      display: none;
    }
    
    .drop-list__item {
      padding: 5px;
    }

CodePudding user response：

You have to restructure the ul & li, and that will fix the issue

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
}

p.heading {
  font-family: helvetica;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  background-color: #ccffff;
  padding: 10px;
  color: #000080;
}

.nav {
  width: 100%;
  height: 50px;
  background-color: #ff4d4d;
  float: left;
}

ul li {
  list-style: none;
  position: relative;
}

button.btn {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ff4d4d;
  color: azure;
}

button.btn:hover {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ccffff;
  color: #000;
}

button.drp {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ff4d4d;
  color: azure;
}

button.drp:hover {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  background-color: #ccffff;
  color: #000;
}

button.d {
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  padding: 10px;
  height: 50px;
  width: 150px;
  background-color: #ff4d4d;
  color: azure;
}

button.d:hover {
  text-align: center;
  border: none;
  font-family: helvetica;
  font-size: 16px;
  float: left;
  height: 50px;
  width: 150px;
  background-color: #ccffff;
  color: #000;
}

.li {
  display: none;
  position: absolute;
  border: none;
  font-family: helvetica;
  font-size: 16px;
  width: 130px;
  color: azure;
}

.li {
  display: none;
  position: absolute;
  border: none;
  font-family: helvetica;
  font-size: 16px;
  width: 130px;
  color: azure;
}


/*new styles from here*/

#drp:hover ul {
  display: block;
  margin-left: 200px;
  /* this should be the same width as the parent list item */
  margin-top: 50px;
  /* aligns top of sub menu with top of list item */
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div >
    <p >Heading</p>
  </div>
  <div >
    <ul id="nav">
      <!--I changed class to id-->
      <li><button > Txt1 </button></li>
      <li><button > Txt2 </button></li>
      <li><button > Txt3 </button></li>
      <li><button > Txt4 </button></li>
      <li id="drp"><button > Txt5 </button>
        <!--opening of dropdown li-->
        <ul >
          <!--opening of dropdown ul-->
          <li><button >txt6</button></li>
          <li><button >txt7</button></li>
        </ul>
        <!--closing of dropdown ul-->
      </li>
      <!--closing of dropdown li-->
    </ul>
    <!-- #nav closed-->

  </div>
</body>

</html>

CodePudding user response：

I have changed out the html format a bit, the buttons are removed and class names are added, css flex-box is used as its better than the float being used.

the css portion

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: helvetica,sans-serif;
    box-sizing: border-box;
}
body{
    background: rgba(0, 0, 0, 1);
}
.heading{
    text-align: center;

    font-size: 2em;
    font-weight: 700;
    
    padding: 10px;

    background-color: #ccffff;
    color:#000080;
}
.menu_ul{
    /* float is rarely used flex anf grids are what is used */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
    background-color: #ff4d4d;
}
.menu_list_items{
    padding: 10px;
}
.menu_list_items a{
    font-size: 1em;

    color:azure;
}
.drpDown{
    display: none;
}
.menu_list_items:hover .drpDown{
    display: block;
}

now for the html, I would say that is better to add class/id names that are relatively to understand at a glance

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- add a link tag to import google fonts into the html file for the font support "helvetica" -->
    <title>Document</title>
</head>
<body>
    <section>
        <header>
            <h1 >Heading</h1>
        </header>
        <nav>
            <ul >
                <li ><a href="#">Txt1</a></li>
                <li ><a href="#">Txt2</a></li>
                <li ><a href="#">Txt3</a></li>
                <li ><a href="#">Txt4</a></li>
                <li ><a href="#">Txt5</a>
                    <div >
                        <ul >
                            <li><a href="#">Txt6</a></li>
                            <li><a href="#">Txt7</a></li>
                        </ul>
                    </div>
                </li>
            </ul> 
        </nav>
    </section>
</body>
</html>