drop - down menu in css
Question
I am new in css/html . I am working on cctccart project.while running this code in bottom_menu,during click any menu like Products ,white background color is merging with blue.I want to fix this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li><a href="#">Company</a>
</li>
<li><a href="#">Products</a>
<u1 class="submenu">
<li><a href="#">DVR & Kits</a>
</li>
<li><a href="#">spy camraes</a>
</li>
<li><a href="#">alarms</a>
</li>
</u1>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Support</a>
</li>
<li><a href="#">Multimedia</a>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 45px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
2 answers
solution1
0 2015-10-11 16:11:10
I hope it can help you.
HTML
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
<label class="button">
<input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
CSS
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity:.5;
}
.button input {
display:none;
}
.button input:checked + .outer .inner {
opacity:1;
}
.button .outer {
background:#2989d8;
background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border:1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
height:10px;
margin:5px;
width:10px;
}
.button .inner {
background:#e4f5fc;
background:-moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background:-webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:block;
height:10px;
margin:.5px;
opacity:0;
-moz-transition:opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
width:10px;
}
span.text,
span.outer
{
display: inline-block;
vertical-align: middle;
}
solution2
0 ACCPTED 2015-10-11 16:13:47
Edit your CSS to this:
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px; /* this is the thing you have to fix */
line-height: 35px;
text-align: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.