如何使我的水平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>

你能链接到鱼眼镜头（）插件，你正在使用？并显示包含*＃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/

谢谢一堆！ –

我的荣幸，@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

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

相关推荐