0
Я хотел бы изменить этот CSS, чтобы сделать это меню горизонтальным. Я искал интернет для решений и обнаружил, что мне пришлось изменить значение «display» на «inline-block», но этого не делалось.Как изменить вертикальное меню css на горизонтальное
Спасибо заранее,
PS: Я надеюсь, что я создал этот пост правильный путь, если нет, пожалуйста, прошу прощения мне как это мой первый пост.
код CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family:verdana;
font-weight:normal;
font-size:12px;
}
ul {
list-style:none;
margin:0;
padding:0;
width:250px;
margin:0 auto;
-moz-box-shadow: 0 0 5px #111;
-webkit-box-shadow: 0 0 5px #111;
box-shadow: 0 0 5px #111;
}
ul li label {
background:#3e3e3e;
border-top:1px solid:#ffffff;
border-bottom:1px solid #ffffff;
color: #ffffff;
text-shadow: 0 1px 1px #000;
letter-spacing: 0.09em;
}
ul li input[type='checkbox'] {
display: none;
}
ul li label {
display:block;
padding:12px;
width:250px;
}
ul li i {
font-size:18px;
vertical-align: middle;
width:20px;
display:inline-block;
}
ul li span {
display:inline;
float:right;
background:#48515c;
border:1px solid #3c434c;
border-bottom:1px solid #707781;
padding:4px 6px;
font-size:10px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: inset 0 0 10px #111;
-webkit-box-shadow: inset 0 0 10px #111;
box-shadow: inner 0 0 10px #111;
position:relative;
}
ul li label:hover {
background: #3e3e3e;
}
ul li label:hover span {
background:#3e3e3e;
}
ul li input[type='checkbox']:checked ~ label {
background: #3e3e3e;
border-top:1px solid #878e98;
border-bottom:1px solid #878e98;
}
ul li input[type='checkbox']:checked ~ label span {
background: #3e3e3e;
border-top:1px solid #1b5f85;
border-bottom:1px solid #4cb1e4;
-moz-box-shadow: inset 0 0 5px #111;
-webkit-box-shadow: inset 0 0 5px #111;
box-shadow: inner 0 0 5px #111;
}
ul li input[type='checkbox']:checked ~ .options {
height: auto;
display:block;
min-height:40px;
max-height:400px;
}
ul ul {
background:#ffffff; margin:0; padding:0;
-moz-box-shadow: inset 0 2px 2px #b3b3b3;
-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
box-shadow: inner 0 2px 2px #b3b3b3;
}
ul ul li a {
padding:6px 12px;
color:#3e3e3e;
text-decoration:none;
}
ul ul li a:hover {
color: #05409A;
}
ul ul li a span {
color:#3e3e3e;
background:none;
border:1px solid #ccc;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
ul ul li {
border-bottom:1px solid #ccc;
}
ul ul li:first-child {
padding-top:6px;
}
ul ul li:last-child {
padding-bottom:6px; border:0;
}
.options {
height: 0;
display: block;
overflow: hidden;
}
HTML код:
<ul>
<li class="block">
<input type="checkbox" name="item" id="item1" />
<label for="item1"><i aria-hidden="true"></i> Home </label>
<ul class="options">
<li><a href="Text/Home.html" target="TextIFrame"><i aria-hidden="true"></i> Home </a></li>
</ul>
</li>
<li class="block">
<input type="checkbox" name="item" id="item2" />
<label for="item2"><i aria-hidden="true"></i> French Tutoring </label>
<ul class="options">
<li><a href="Text/ChildrenKto12.html" target="TextIFrame"><i aria-hidden="true"></i> Children K to 12 </a></li>
<li><a href="Text/Homeschool.html" target="TextIFrame"><i aria-hidden="true"></i> Homeschool </a></li>
<li><a href="Text/APFrenchSATtraining.html" target="TextIFrame"><i aria-hidden="true"></i> AP French & SAT training </a></li>
</ul>
</li>
<li class="block">
<input type="checkbox" name="item" id="item3" />
<label for="item3"><i aria-hidden="true"></i> French Conversation </label>
<ul class="options">
<li><a href="Text/HighSchoolUniversity.html" target="TextIFrame"><i aria-hidden="true"></i> High School & University </a></li>
<li><a href="Text/BasicFrenchForTravellers.html" target="TextIFrame"><i aria-hidden="true"></i> Basic French for Travelers </a></li>
<li><a href="Text/RefreshYourFrench.html" target="TextIFrame"><i aria-hidden="true"></i> Refresh your French </a></li>
</ul>
</li>
<li class="block">
<input type="checkbox" name="item" id="item4" />
<label for="item4"><i aria-hidden="true"></i> French Immersion </label>
<ul class="options">
<li><a href="Text/Workschops.html" target="TextIFrame"><i aria-hidden="true"></i> Workschops </a></li>
<li><a href="Text/SummerCamp.html" target="TextIFrame"><i aria-hidden="true"></i> Summer Camp </a></li>
</ul>
</li>
<li class="block">
<input type="checkbox" name="item" id="item5" />
<label for="item5"><i aria-hidden="true"></i> About Us </label>
<ul class="options">
<li><a href="Text/ContactUs.html" target="TextIFrame"><i aria-hidden="true"></i> Contact Us </a></li>
<li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Testimonies </a></li>
<li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Curriculum Vitae </a></li>
<li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Reference letter</a></li>
<li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Photos </a></li>
<li><a href="Text/PageUnderConstruction.html" target="TextIFrame"><i aria-hidden="true"></i> Links</a></li>
</ul>
</li>
Спасибо это работает. Youpy. Просто нужно было установить widht на родительском UL на 100%. –