怎么应用ul,li标签 创建css横向导航菜单

html-css011

怎么应用ul,li标签 创建css横向导航菜单,第1张

使用float属性,使他横向排列即可。

<style>

ul,li{padding:0margin:0list-style:none}

ul{width:1000px}

ul li{float:leftwidth:200px}/**li标签float属性,使他左浮动**/

ul li a{display:blockwidth:100%padding:20px 0 text-align:center}

</style> <ul>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单一</a></li>

</ul>

具体效果根据自身项目,调节即可!

ul 和 li 是html的两个标签,他们一般都是成对的出现:即<ul>包裹<li></li></ul>

常见的新闻列表、tab

<ul><li>导航菜单1</li><li>导航菜单2</li><li>导航菜单3</li></ul>

<h1>今天的新闻真正好,我是标题</h1>

<ul>

<li>如果你有100万怎么花</li>

<li>你有中了福彩一等奖</li>

<li>我是有底线的新闻</li>

</ul>

麻烦给个采纳吧

原理hover,二级先设置样式是display:none,当一级的元素处于:hover鼠标移上的时候,二级的元素就display:block,二级就会显示出来了。

<li>一级

<ul>

<li>二级1</li>

<li>二级2</li>

<li>二级3</li>

</ul>

</li>

css

li{padding:0margin:0list-style:none}

li ul{display:none}

li:hover ul{display:block}

大概是这样,更齐全的代码,你问度娘要:CSS下拉菜单,可以找到纯CSS的或者JS,JQ的,