div.select{
cursor: pointer;
border: 1px solid black;
position :relative;
width: 150px;
text-align: center;
z-index: 1000;
}
div.select>div.selecter{
height: 1px;
position: absolute;
bottom: -2px;
visibility: hidden;
width: 100%;
z-index: 1001;
}
div.select:hover>div.selecter{
visibility: visible;
}
div.select>div.selecter>ul>li{
background-color: red;
border: 1px solid red;
border-radius: 5px;
list-style-type: none;
}
Есть html:
<!DOCTYPE html>
<head>
<title>Select</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="select.css">
<script src="jq.js"></script>
<script src="select.js"></script>
</head>
<body>
<form method="post">
<div class="select">
<input type="hidden" name="selecter">
<span>Выберите что-то</span>
<div class="selecter">
<ul>
<li data-value="1">Один</li>
<li data-value="2">Два</li>
</ul>
</div>
</div>
<div class="select">
<input type="hidden" name="selecter">
<span>Выберите что-то</span>
<div class="selecter">
<ul>
<li data-value="3">Три</li>
<li data-value="4">Четыре</li>
</ul>
</div>
</div>
<div class="select">
<input type="hidden" name="selecter">
<span>Выберите что-то</span>
<div class="selecter">
<ul>
<li data-value="5">Пять</li>
<li data-value="6">Шесть</li>
</ul>
</div>
</div>
<div>
adasds
</div>
</form>
Почему происходит такое:
Хотя так все хорошо
