cleo master cleo master - 1 month ago 7
CSS Question

HTML dropdown box

I have a problem with my dropdown box. Somehow I managed to create a navigational bar and then added keys to it. I made a drop down box on the "About" window. And it seems to work. But i have problem related to dropdown box. I am having trouble creating a second dropdown box. And it sometimes changes the navigational bar.
Misplace the positon and other type of errors. Can you show me an example of a dropdown box on the "HOME" button? Here is my code. plzzz help me.



/* Building navigation bar */

ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
padding: 14px 20px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline;
}
/* Building about dropdown and the dropdown content */

.container {
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
display: none;
background-color: black;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*added lines*/

.dropdown-content a {
text-decoration: none;
color: white;
text-align: center;
}
.dropdown-content a:hover {
background-color: red;
/*font-color will be red*/
}
/*added lines ends here*/

.paragraphs {
text-align: center;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<ul>
<li><a href="#file:///C:/Users/Nabil/Desktop/web/YouBox/main.html#style.html">Home</a>
</li>
<li><a href="news.html">News</a>
</li>
<div class="dropdown">
<li><a href="#about.html">About</a>
</li>
<div class="dropdown-content">
<ul>
<a href="#Server.html">Server</a>
<a href="#hahahaha.html">Origins</a>
</ul>
</div>
</div>
</ul>
<hr>
<p class="paragraphs"><strong>mymash.com<br>
Top vs games - pictures in Bahrain! <br>
Who looks mind blowing? Lets see, Vote your favourite photo!</strong>
<br>or you can add new pictures of yourself to challenge someone <a href="#test">HERE!</a>
</p>
<hr>

</body>

</html>




Answer

Here you see the ' .dropdown-content css hide the display of tags

.dropdown-content {  
          position: absolute;  
          display: none;       <----------------- means hide  contents  
          background-color: black;
          color: white;           
}  

then while hover

.dropdown:hover .dropdown-content { 
          display: block;  <---- means make visible the contents  
}  
li a:hover { 
             background-color: red; <---- change the background color to red
}

try this code

     <!DOCTYPE html>
    <html>
    <head>
    <style>
    /* Building navigation bar */ 

    ul {
        text-align: center;
        list-style-type: none;
        margin: 0;
        padding-bottom: 5px;
    	 background-color: black;
    	 display: block;
    }

    li a { 
             text-decoration: none;
    		 padding: 14px 20px;
    		 color: white;
    		
    }

    li a:hover { 
                 background-color: red;
    }

    li { 
             display: inline;
    }

    /* Building about dropdown and the dropdown content */ 

    .container { 
               width: 15em;
    }

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

    .dropdown-content { 
              position: absolute;
    		  display: none;
    		  background-color: black;
    		  color: white;
    	      
    } 

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

     /*added lines*/
    .dropdown-content a{
      text-decoration:none;
      color: white;
      text-align: center;
     
    }
    .dropdown-content a:hover{
      background-color:red;/*font-color will be red*/
    }
    /*added lines ends here*/

    .paragraphs { 
        text-align: center;
    }

    </style>
    </head>

    <body>
      <ul>
       <div class="dropdown">
        <li><a href="#file:///C:/Users/Nabil/Desktop/web/YouBox/main.html#style.html">Home</a></li>
      <div class="dropdown-content"><ul>
    	      <a href="#page1.html">item1</a>
    		  <a href="#page2.html">item2</a>
    		  </ul>
    	     </div>
        </div>
        <li><a href="news.html">News</a></li>
    	<div class="dropdown">
        <li><a href="#about.html">About</a></li>
    	 <div class="dropdown-content"><ul>
    	      <a href="#Server.html">Server</a>
    		  <a href="#hahahaha.html">Origins</a>
    		  </ul>
    	     </div>
    	</div>
      </ul>
      <hr>
      <p class="paragraphs"><strong>mymash.com<br> 
        Top vs games - pictures in Bahrain!  <br>
         Who looks mind blowing? Lets see, Vote your favourite photo!</strong><br>
         or you can add new pictures of yourself to challenge someone <a href="#test">HERE!</a></p>
    	 <hr>
       
    </body>

    </html>

Comments