У меня есть следующая DIV на моей странице:
<div id="leftNavCustom" class="leftMenu">
<div class="menu-item">
<h4><a href="#">Menu</a></h4>
<ul>
<li id="u"><a >Why Choose Us</a></li>
<li id="u"><a >Physicians</a></li>
<li id="u"><a >Medical Specialties</a></li>
<li id="u"><a >Locations</a></li>
<li id="u"><a >Urgent Care</a></li>
<li id="u"><a >Radiology</a></li>
<li id="u"><a >Lab</a></li>
</ul>
</div>
</div>
который создает зависание над расширителем меню.
Мой CSS выглядит следующим образом:
#leftNavCustom {
display: block;
z-index: 5;
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin: 0;
width: 240px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
padding: 0;
background: #00ff00;
}
.leftMenu {
position: fixed;
left: 22px;
top: 65px;
margin: 0;
padding: 0;
}
.menu-item, .menu-item2 {
background: url('../theImages/bg_80_b.png');
width: 240px;
font-family: 'nexa_boldregular';
font-size: 19px;
margin: 0;
padding: 0;
text-align: left;
}
/*Menu Header Styles*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
/*Gradient*/
background: #e73827; /* Old browsers */
background: -moz-linear-gradient(top, #e73827 0%, #f02f17 29%, #f6290c 47%, #f27c32 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e73827), color-stop(29%,#f02f17), color-stop(47%,#f6290c), color-stop(100%,#f27c32)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* IE10+ */
background: linear-gradient(to bottom, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73827', endColorstr='#f27c32',GradientType=0 ); /* IE6-9 */
}
/*Menu Header Styles*/
.menu-item2 h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
/*Gradient*/
background: #036ca9; /* Old browsers */
background: -moz-linear-gradient(top, #036ca9 0%, #025c90 44%, #00466e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#036ca9), color-stop(44%,#025c90), color-stop(100%,#00466e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* IE10+ */
background: linear-gradient(to bottom, #036ca9 0%,#025c90 44%,#00466e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#036ca9', endColorstr='#00466e',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #f27c32; /* Old browsers */
background: -moz-linear-gradient(top, #f27c32 0%, #f6290c 53%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f27c32), color-stop(53%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f27c32', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
}
.menu-item2 h4:hover {
background: #00a3cc; /* Old browsers */
background: -moz-linear-gradient(top, #00a3cc 0%, #005a6e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a3cc), color-stop(100%,#005a6e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a3cc 0%,#005a6e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3cc', endColorstr='#005a6e',GradientType=0 ); /* IE6-9 */
}
.menu-item h4 a, .menu-item2 h4 a {
color: white;
display: block;
text-decoration: none;
width: 240px;
}
/*ul Styles*/
.menu-item ul {
background: url('theImages/bg_80_b.png');
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
width: 240px;
height: 300px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.menu-item ul li#u a {
color: #fff;
cursor: pointer;
display: block;
height: 25px;
line-height: 25px;
text-indent: 0px;
text-decoration: none;
width: 100%;
font-family: 'nexa_boldregular';
font-size: 19px;
}
/*li Styles*/
.menu-item li#u {
border-bottom: 1px #13476F solid;
padding: 8px;
}
.menu-item li#u:hover {
background: #5196AB;
}
.menu-item li#firstOne {
display: absolute;
top: 0;
left: 0;
background-color: #FFFFFF;
text-align: center;
height: 75px;
line-height: 75px;
border-bottom: 1px solid #FF7263;
vertical-align: middle;
}
.menu-item li#firstOne img {
vertical-align: middle;
}
По умолчанию он создает большое пространство вокруг меню, как показано ниже:
Единственное, что меню выглядит нормально, как хотелось бы:
Следует добавить следующий стиль в указанный выше файл css:
* {
margin: 0;
padding: 0;
}
Но это делает некоторые из моих других DIVS на странице неуместными. Я попытался добавить маржу и дополнение к каждому коду в моем CSS, но ничего не работает, не добавляя несколько строк, показанных выше.
Как мне изменить существующий код css, чтобы исправить его?
JSFIDDLE: http://jsfiddle.net/s2z6f/
Удалите маржу из определенных элементов, которые не должны иметь ее (h4
и ul
.menu-item
). Вы можете сделать это, а не использовать *
в качестве селектора.
.menu-item h4, .menu-item ul {
margin: 0;
}
Попробуйте начать с сброса CSS. http://meyerweb.com/eric/tools/css/reset/
Это "обнуляет" все свойства, которые отдельные браузеры вводят автоматически. Как правило, это хорошая практика, если вы собираетесь писать множество пользовательских стилей.