htmlとcssを使ってドロップダウンを作る方法は？

CODE OF MY SAMPLEはここにあるhtmlとcssを使ってドロップダウンを作る方法は？

http://uos.edu.pk/

私はこの imageのコードを記述しようとしましたが、image.Forより多くの助けに示すように、私はいくつかのdifficulties.iは、CSSを使用してドロップダウンを作りたい直面し、私はのorignalウェブサイトのリンクを追加しました

<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

出典

2016-03-23 Saba Qazi

？ – dunli

これはこのようなものですか？あなたが直面している困難はどんな

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

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

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

 
    .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 
 
\t <div class="dropdown-content"> 
 
\t \t \t <div class="col-1"> 
 
       Column 1 
 
      </div> 
 
      <div class="col-2"> 
 
       Column 2 
 
      </div> 
 
\t </div> 
 
</div> 
 
</a> 
 
</li> 
 
</ul> 
 
</div>

出典

2016-03-23 04:03:33 rmondesilva

m答えを確認してください。私はthis.let私がチェックしたいと思うと思う... –

はいrmondesilva私はこれがほしいとこれは正解です私はほしい –

よい、よい。私はそれが助けてうれしいです。 – rmondesilva

htmlとcssを使ってドロップダウンを作る方法は？

答えて

関連する問題