1
Я пытаюсь сделать подменю горизонтальным.CSS: проблема с горизонтальным подменю
В моем HTML выглядит следующим образом:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#" class="selected">About Us</a>
<!-- I want to make this horizontal -->
<ul id="subnav">
<li><a href="#">Item 01</a></li>
<li><a href="#" class="selected">Item 02</a></li>
<li id="nav_last"><a href="#">Item 03</a></li>
</ul>
<!-- End here -->
</li>
</ul>
Мой CSS для списка, как это:
/* remove the list style */
#nav {
margin:0;
padding:0;
list-style:none;
}
/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
float:left;
display:block;
width:100px;
background:#d90000;
position:relative;
z-index:500;
margin:0 1px;
}
/* this is the parent menu */
#nav li a {
display:block;
/*padding:8px 5px 0 5px; */
padding-top: 11px;
font-weight:normal;
height:30px;
text-decoration:none;
text-align:center;
color:#f8e2e2;
}
#nav li a:hover {
color:#f8e2e2;
background-color: #bf0000;
border-left: 1px solid #a50000;
border-right: 1px solid #a50000;
}
#subnav {
position:absolute;
left:0;
display:none;
margin: 0 0 0 0;
padding:12px 0 0 0;
list-style:none;
background-image: url('../images/arrow_down.png');
background-repeat: no-repeat;
}
#subnav li{
font-size: 0.9em;
border-top:1px solid #a50000;
border-left:1px solid #a50000;
border-right:1px solid #a50000;
position:relative;
width:98px;
display:block;
float:left;
}
И я использую JQuery, чтобы показать/скрыть суб-List. Моя проблема в том, что подменю не является горизонтальным. Какие изменения мне нужно сделать для моего CSS, чтобы подменю стало горизонтальным? Я провел часы без каких-либо успехов.
Большое спасибо!
@wenbert вы также можете разместить jQuery, возможно, вам нужно добавить float: left; вам nav nav – ant
Я понимаю, что это ответ, но вы могли бы опубликовать jsfiddle кода, который мог бы помочь другим, заинтересованным в этой же проблеме. – puk
@puk Извините, я «потерял» заполненный код. Но я помню, что это было исправлено, когда я указал ширину контейнера, чтобы сделать его более широким. – wenbert