小下拉列表错误

时间：2015-10-23 08:50:01

标签： html css drop-down-menu

我一直在为我的网站创建导航菜单，我使用了下拉框。第一个下拉列表运行良好然而我的第二个看起来就好像下拉列表一样，在这里尝试看看自己：https://jsfiddle.net/yc9byjvh/还有更简单的方法来制作我的div吗？

font/opentype

的CSS：

<div id = "dropdown"><a href = "catalogue.html">PRODUCT CATALOGUE</a>
<ul id="dropdown-list">


<li>
    Vacuum Components
</li>

<li>
    Valve Components
</li>

<li>
    Roughing Components
</li>

<li>
    Vacuum Measurement
</li>

<li>
    Glass Components
</li>

<li>
    Electrical Feedthroughs
</li>

<li>
    Motion and manipulation
</li>

<li>
    Thin Film Products
</li>
</ul>
</div>


<div id = "dropdown2">REQUEST A QUOTE
<ul id ="dropdown-list">

<li>
    Request Print Catalouge
</li>

<li>
    Terms & Conditions
</li>

<li>
    Employment
</li>

</ul>
</div>

2 个答案:

答案 0 :(得分：0)

** DEMO ** http://jsfiddle.net/yc9byjvh/show/

＆＃13;
＆＃13; 
body {font-family: palatino linotype;
background: url(rngbackground.png) repeat 0 0;

}

p{
	color:black;
	font-family: palatino linotype;
}

h2{
	color:grey;
}

h5{
	color:grey;
}


a{
	color:black;
	text-decoration:none;
	
}

a:hover{
	color:blue;
	
}

a:active{
	color:black;
}

a:visited{
	color:none;
	text-decoration:none
}

#home{
	list-style-type: none;
	margin: 10px;
    padding: 10px; 
	border:1px solid grey;
    width: 18.6%;
	text-align:center;
	font-family: Palatino Linotype;
	font-size: 15px;
	-moz-appearance: none;
	-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
	text-transform:uppercase;
	background:white;
	height:2%;
	position:absolute; top: 15%; left: 2%;
	
}

#dropdown:hover ul#dropdown-list{
    display:block;
	border:1px solid grey;
	
}
#dropdown ul{
    padding:0px;
    list-style: none;
	
}
#dropdown ul li{
    width: 100%;
}
#dropdown ul li:hover{
    background-color: lightblue;
    cursor:pointer;
	font-family: Palatino Linotype;
	  font-size: 15px;
	  -moz-appearance: none;
	  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
      box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
}
#dropdown ul li a{  
    padding-left: 10px;
    text-decoration:none;
}


/* end 1*/

#dropdown2:hover ul#dropdown-list{
    display:block;
	border:1px solid grey;
	
}
#dropdown2 ul{
    padding:0px;
    list-style: none;
    position: absolute;
    margin: 0;
	
}
#dropdown2 ul li{
    width: 100%;
}
#dropdown2 ul li:hover{
    background-color: lightblue;
    cursor:pointer;
	font-family: Palatino Linotype;
	  font-size: 15px;
	  -moz-appearance: none;
	  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
      box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
}
#dropdown2 ul li a{  
    padding-left: 10px;
    text-decoration:none;
}

/* end 2*/

#dropdown-list{
    width: 100%;
	
    display:none;
    padding:0px;
    margin:0px;
	font-family: Palatino Linotype;
	  font-size: 15px;
	  -moz-appearance: none;

	  background-color:white;
}



#dropdown{
   
    border: 1px solid lightgray;
    padding:5px;
    margin:0px;
    cursor:pointer;
	width:19.25%;
	height:3%;
	text-align:center;
	position:absolute;top:24%;left:2.6%;
	font-family: palatino linotype;
	font-size: 15px;
	-moz-appearance: none;
	-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
	background-color:white;
    z-index:+10;
}


#dropdown2 { 
	border: 1px solid lightgray;
    margin: 10px;
    padding: 10px; 
    width: 18%;
	text-align:center;
	font-family: Palatino Linotype;
	font-size: 15px;
	-moz-appearance: none;
	-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
	
    position:absolute;top:31%;left:2%;
	font-family: palatino linotype;
	font-size: 15px;
	-moz-appearance: none;
	-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
    background-color:white;
	z-index:+9;
    }
＆＃13; 
<div id = "dropdown"><a href = "catalogue.html">PRODUCT CATALOGUE</a>
<ul id="dropdown-list">

		
	<li>
		Vacuum Components
	</li>
		
	<li>
		Valve Components
	</li>
	
	<li>
		Roughing Components
	</li>
	
	<li>
		Vacuum Measurement
	</li>
	
	<li>
		Glass Components
	</li>
	
	<li>
		Electrical Feedthroughs
	</li>
	
	<li>
		Motion and manipulation
	</li>
	
	<li>
		Thin Film Products
	</li>
</ul>
</div>


<div id = "dropdown2">REQUEST A QUOTE
<ul id ="dropdown-list">
	
	<li>
		Request Print Catalouge
	</li>
	
	<li>
		Terms & Conditions
	</li>
	
	<li>
		Employment
	</li>

</ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

 .dropdown-list{
        width: 100%;
        padding:0px;
        margin:0px;
        font-family: Palatino Linotype;
        font-size: 15px;
        -moz-appearance: none;
        background-color:white;
        position: absolute;
        top:31%;
        left:2%;
    }

    .dropdown-list > li { 
        border: 1px solid lightgray;
        margin: 10px;
        padding: 10px; 
        width: 18%;
        text-align:center;
        font-family: Palatino Linotype;
        font-size: 15px;
        -moz-appearance: none;
        -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
        box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
        list-style: none;
        font-family: palatino linotype;
        font-size: 15px;
        -moz-appearance: none;
        -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
        box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
        background-color:white;
        z-index:9;
     
    }
    
    .dropdown-list > li > ul {
        display: none;
    } 
    .dropdown-list > li:hover > ul {
        display: block;
        position: absolute;
        background: #fff;
        border:1px solid #000;
        list-style: none;
        text-align: left;
    }

.dropdown-list > li > ul >li:hover {
      -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
        box-shadow: 0 3px 0 #ccc, 0 -1px red inset;
    }
<ul class='dropdown-list'>
    <li>
        <a href = "catalogue.html">PRODUCT CATALOGUE</a>
        <ul id="dropdown-list">


            <li>
                Vacuum Components
            </li>

            <li>
                Valve Components
            </li>

            <li>
                Roughing Components
            </li>

            <li>
                Vacuum Measurement
            </li>

            <li>
                Glass Components
            </li>

            <li>
                Electrical Feedthroughs
            </li>

            <li>
                Motion and manipulation
            </li>

            <li>
                Thin Film Products
            </li>
        </ul>
    </li>
    <li> REQUEST A QUOTE 
        <ul id ="dropdown-list">

            <li>
                Request Print Catalouge
            </li>

            <li>
                Terms & Conditions
            </li>

            <li>
                Employment
            </li>

        </ul>
    </li>
</ul>

相关问题
最新问题