how to make dropdown using html and css?


Tags: html,css

Problem :

I tried to write the code of this image, but I faced some difficulties.i want to make dropdown using css as shown in the image.For more help i added orignal website link http://uos.edu.pk/

MY SAMPLE OF CODE IS HERE

  <style>
  select{
   background-color:#183287;
   color:white;
   border:none;
  }
   div.divofmenu{
    height:40px;
   width:100%;
   border:0px solid white;
   float:left;
   border-bottom:2px solid white;
   background-color:#183287;
  }
 ul.menu
 {
  list-style-type:none;
  margin-left:200px;
  background-color:blue;
  padding:0;
  margin-top:0px;
  border-color:black;
  border-width:3px;

  }
  ul.menu li
  {
  margin-top:0px;

  float:left;
  }


  ul.menu li a{
   text-decoration:none;
   display:inline-block;
   margin-left:3;
   color:white;
   background-color:#183287;
  font-size:90%;
  padding:10px 10px 10px 10px;
   border-left:0.5px solid black;



}
</style>

<body>
<div class="divofmenu">
<ul class="menu">
<li class="about"><a style="border:0px white"href="#">
<select class="select"><option>About us</option></select>
</a>
</li>
<li class="acad"><a href="#">
 <select class="select"><option>Acadmics</option></select>
 </a></li>
<li><a href="#">
<select class="select"><option>campus</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Faculties</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Directorate</option></select>
</a></li>
<li><a href="#">
<select class="select"><option>Admisions</option></select>
</a></li>
<li><a href="#">
<s


Solution :

Is that like this?

.dropdown{
        background-color:#183287;
	    position: relative;
	    display: inline-block;
	}

	.dropdown-content{
	    display: none;
	    position: absolute;
	    left: -200%;
	    background-color:#183287;
	    min-width: 160px;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	    padding: 12px 16px;
	    color: #fff;
	    text-align: left;
	}

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

    .col-1{
      float: left; 
    }
    .col-2{
      float: right; 
    }

   div.divofmenu{
    height:40px;
   width:100%;
   border:0px solid white;
   float:left;
   border-bottom:2px solid white;
   background-color:#183287;
  }
 ul.menu
 {
  list-style-type:none;
  margin-left:200px;
  background-color:blue;
  padding:0;
  margin-top:0px;
  border-color:black;
  border-width:3px;

  }
  ul.menu li
  {
  margin-top:0px;

  float:left;
  }


  ul.menu li a{
   text-decoration:none;
   display:inline-block;
   margin-left:3;
   color:white;
   background-color:#183287;
  font-size:90%;
  padding:10px 10px 10px 10px;
   border-left:0.5px solid black;



}
<div class="divofmenu">
<ul class="menu">
<li class="about"><a style="border:0px white"href="#">
<div class="dropdown">
     About Us
	<div class="dropdown-content">
			<div class="col-1">
              Column 1
            </div>
            <div class="col-2">
              Column 2
            </div>
	</div>
</div>
</a>
</li>
</ul>
</div>


    CSS Howto..

    how can I make my image (down arrow) disappear when I start scrolling my page?

    jQuery dialog: how to control the button-pane height

    How is struts finding css files?

    How to get the value of css property with jQuery

    How to select Bootstrap's collapsed menu button with CSS

    Show/hide css class by url parameter with php

    How to let Materialize use classes for dropdowns and not ID's?

    How to create a image transition hover effect with css without breaking the grid layout

    How do I disable warnings from Aspx files (HTML,CSS)

    How to load CSS into CodeIgniter

    How do I make CSS take into account a sidebar with absolute positioning

    In Wordpress how can I create a page which has 3 col-md-4 blocks in a container?

    How to attach user CSS to Microsoft Edge?

    How to hide crossed-out CSS lines on firebug?

    How to give slide down effect when hover?

    CSS Menu - how to [closed]

    How to Make a Fluid Layout

    CSS HTML how to ignore some css for non ie7 or ie8

    How to style (increase the height) of select box in CSS?

    CSS Rotation and Styling - how to?

    Show overlay fullscreen div then hide it by clicking on it

    How to change class named active into link's active attribute in javascript

    Bootstrap CDN + WP // How to edit '.css’

    CSS Flexbox : How to construct a specific layout

    How to make text appear when input box is active

    How to target element inside iframe from css or javascript for styling

    How to dynamically create two rows of squares in html/css/javascript

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    How to change my css code to fit the footer to the bottom of the page for any size of monitor?

    How can I set a height of document [duplicate]