如何使我的水平CSS垂直導航垂直

我現在可以看到更改一些代碼後的文本/標題。現在的問題是，我不是垂直的，而是水平的。請幫助我瞭解如何將底座導航轉換爲垂直。謝謝:)如何使我的水平CSS垂直導航垂直

下面是我使用的代碼：

* CSS

#navigation { 
    float:left; 
    width:200px; 
    height:300; 
} 

.expand-down { 
    font-family:Arial, Helvetica, sans-serif; 
    line-height:normal; 
    margin-top:20px; 
    height:150px; 
    width:500px; 
    margin-bottom:30px; 
} 
.expand-down * { 
    margin: 0; 
    padding: 0; 
} 
.expand-down ul { 
    padding-top:10px; 
    margin-left:10px; 
} 
.expand-down ul li { 
    float:left; 
    list-style-type:none; 
} 
.expand-down ul li a { 
    text-decoration:none; 
} 
.expand-down ul li a img { 
    width:70px; 
    height:70px; 
    border:none; 
} 
.expand-down ul li a span { 
    display:none; 
} 
.expand-down ul li:hover a span { 
    display:block; 
    font-size:16px; 
    text-align:center; 
    color:red; 
} 
.expand-down ul li:hover a img { 
    width:120px; 
    height:120px; 
} 
.expand-down ul li:hover + li a img { 
    width:70px; 
    height:70px; 
} 
.expand-down ul li:hover + li + li a img { 
    width:60px; 
    height:60px; 
}

* HTML

<div id="navigation"> 

    <div class="expand-down" align="left"> 
    <ul> 
    <li> 
     <a href="timaHOME.php" onClick="playSound("beep-02.wav");"><img src="home icon1.png"/><span>HOME</span></a> 
    </li> <br /> 

    <li> 
     <a href="timaREGISTER.php" onClick="playSound("beep-02.wav");"><img src="profile icon.png"/><span>REGISTER</span></a> 
    </li> 
    <br /> 

    <li> 
     <a href=""><img src="report icon.png"/><span>REPORTS</span></a> 
    </li> <br /> 
    </ul> 
</div> 
</div>

來源

2011-07-23 Mae Guff

你能鏈接到魚眼鏡頭（）插件，你正在使用？並顯示包含*＃dock2'元素的HTML *，您正在使用該插件？ –

看起來你正在使用jQuery。您應該將其添加爲標籤。 – Dan

嗨！我已經編輯出來:)我拒絕使用jquery，因爲它會衝突我的代碼。 –

刪除此float:left;

.expand-down ul li { 
    float:left; //REMOVE 
    list-style-type:none; 
}

http://jsfiddle.net/jasongennaro/2pyu3/

編輯

爲了讓標題排隊的照片旁邊，加display:inline-block;

.expand-down ul li:hover a span { 
    display:inline-block; //CHANGE THIS

http://jsfiddle.net/jasongennaro/2pyu3/1/

來源

2011-07-25 18:02:32

謝謝一堆！ –

我的榮幸，@Mae。如果這回答了問題，請隨時點擊旁邊的複選標記。 –

雖然我仍然遇到標題問題。 –

試試這個

.expand-down ul li { 
    list-style-type:none; 
} 

.expand-down ul li:hover a span { 
    display:block; 
    font-size:16px; 
    text-align:left; 
    color:red; 
}

看到example

來源

2011-07-25 17:58:32

如何使我的水平CSS垂直導航垂直

回答

相關問題