我想創建一個水平子菜單導航欄,當我將鼠標懸停在相應菜單項上方時,它出現在初始導航欄下方。我無法讓dropbown子菜單顯示爲水平狀態,並且在顯示內容後亂七八糟:內聯菜單和子菜單現在都混雜在一起。我已經發布了我的css。水平子菜單
#nav{
margin: 0 ; padding: 0;
text-align: center;}
#nav li {
list-style: none;
margin: 0 auto;
position: relative;
display: inline;}
#nav li a{
padding: 1em 2em;
display: inline-block;
text-decoration: none;
color: #F2583E ;
font-family: 'Helvetica Neue';
font-size:1.25em;}
/*SubMenu*/
#nav li ul{
display: inline;
position: relative;
left: 0;
padding: 0; margin:0 100;}
#nav li:hover > ul{
}
#nav li ul li, #nav li ul li a{
display: inline;}
#nav li ul li{
_display: inline; /* for IE5*/}
#nav li ul li a{
width: 150px;}
這是我的HTML代碼。
<body>
<div class="slide-down-page">
<ul id="nav">
<li><a class="active btn" href="home.html">Bio</a></li>
<li><a href="portfolio.html">Portfolio</a>
<ul>
<li><a href="#">Writing</a>
</li>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Design</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
你們能通過https://jsfiddle.net/共享代碼?所以可以運行它,可以看到實際問題? –
在發佈到jsfiddle之後,您也可以直接使用「發佈HTML/CSS代碼」按鈕而不是「發佈代碼」在SO中發佈類似內容,並且我們可以直接在SO上運行代碼。 – Nelson
你的'html'代碼在哪裏? – niyasc