css中导航栏子菜单横向下拉改为水平下拉

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中导航栏子菜单横向下拉改为水平下拉相关的知识,希望对你有一定的参考价值。

.nav

width:1000px;
height :61px;
background :url('../images/nav.png') no-repeat;
margin:0px 0px 0 40px;

.nav ul li a
font-family: Verdana, "黑体 "; font-size:16px;font-weight:bold ;color :#fff;text-decoration :none;

.nav a:hover
color:#D9FE00 ;
.nav ul
float:left;
list-style-type :none ;
width:950px;
height :18px;
margin :18px 10px 0 34px;
padding :0px;

.nav ul li

float :left ;
width:82px;
margin :0px 10px 0 0px;

.nav .subnav2 a,.nav .subnav3 a,.nav .subnav4 a,.nav .subnav5 a,.nav .subnav6 a,.nav .subnav7 a,.nav .subnav8 a,.nav .subnav9 a,.nav .subnav10 a
font-size:14px;
color :Black ;

.nav .subnav2 a:hover,.nav .subnav3 a:hover,.nav .subnav4 a:hover,.nav .subnav5 a:hover,.nav .subnav6 a:hover,.nav .subnav7 a:hover,.nav .subnav8 a:hover,.nav .subnav9 a:hover,.nav .subnav10 a:hover
font-size:14px;
color :Blue;

.subnav2,.subnav3 ,.subnav4 ,.subnav5 ,.subnav6 ,.subnav7 ,.subnav8 ,.subnav9 ,.subnav10

display:none;
position:relative;

.subnav2 ul,.subnav3 ul,.subnav4 ul,.subnav5 ul,.subnav6 ul,.subnav7 ul,.subnav8 ul,.subnav9 ul,.subnav10 ul
list-style-image:url(../images/dot.png);

.nav ul li .subnav2 ul,.nav ul li .subnav3,.nav ul li .subnav4,.nav ul li .subnav4,.nav ul li .subnav5,.nav ul li .subnav6,.nav ul li .subnav7,.nav ul li .subnav8,.nav ul li .subnav9,.nav ul li .subnav10

float:left;

.nav ul li:hover .subnav2,.nav ul li:hover .subnav3,.nav ul li:hover .subnav4,.nav ul li:hover .subnav4,.nav ul li:hover .subnav5,.nav ul li:hover .subnav6,.nav ul li:hover .subnav7,.nav ul li:hover .subnav8,.nav ul li:hover .subnav9,.nav ul li:hover .subnav10

display:block ;

.subnav2 ul li a,.subnav3 ul li a,.subnav4 ul li a,.subnav5 ul li a,.subnav6 ul li a,.subnav7 ul li a,.subnav8 ul li a,.subnav9 ul li a,.subnav10 ul li a
font-family: Verdana, "黑体";
font-size:12px;
color:#191919;

就是类似把上面那种横向展开的改成下面那种纵向展开的

参考技术A

是这种吗?有代码仅供参考,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropline-水平三级横向弹出菜单</title>
<style type="text/css">
/* common styling */
.menu font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;
.menu ul padding:0; margin:0; list-style-type: none;
.menu ul li float:left; border-left:1px solid #eee; width:106px;
.menu ul li a, .menu ul li a:visited display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
.menu ul li ul display: none;
/* specific to non IE browsers */
.menu ul li:hover a color:#fff; background:#b3ab79;
.menu ul li:hover ul display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;
.menu ul li:hover ul.right_side li float:right; border:0; border-left:1px solid #eee;
.menu ul li:hover ul.left_side li float:left; border:0; border-left:1px solid #eee;
.menu ul li:hover ul li a.hide background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;
.menu ul li:hover ul li:hover a.hide background:#b3ab79; color:#fff;
.menu ul li:hover ul li ul display: none;
.menu ul li:hover ul li a display:block; background:##b3ab79; color:#fff;
.menu ul li:hover ul li a:hover background:#dfc184; color:#000;
.menu ul li:hover ul li:hover ul display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;
.menu ul li:hover ul.right li float:right;
.menu ul li:hover ul li:hover a.hide background:#dfc184; color:#000;
.menu ul li:hover ul li:hover ul li a background:#dfc184; color:#000;
.menu ul li:hover ul li:hover ul li a:hover background:#bd8d5e; color:#fff;
</style>
<!--[if lte IE 6]>
<style type="text/css">
table border-collapse:collapse; margin:0; padding:0;
.menu ul li a.hide, .menu ul li a:visited.hide display:none;
.menu ul li a:hover ul li a.hide display:none;
.menu ul li a, .menu ul li a:visited background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;
.menu ul li a:hover color:#fff; background:#b3ab79;
.menu ul li a:hover ul display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;
.menu ul li a:hover ul.right_side li float:right; border-width:0 1px 0 0 0;
.menu ul li a:hover ul.left_side li float:left;
.menu ul li a:hover ul li a.sub background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;
.menu ul li a:hover ul li a display:block; background:#b3ab79; color:#fff;
.menu ul li a:hover ul li a ul visibility:hidden;
.menu ul li a:hover ul li a:hover background:#dfc184; color:#000;
.menu ul li a:hover ul li a:hover ul visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;
.menu ul li a:hover ul li a:hover ul li a background:#dfc184; color:#000;
.menu ul li a:hover ul li a:hover ul li a:hover background:#bd8d5e; color:#fff;
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  <table><tr><td>
  <![endif]-->
        <ul class="right_side">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>
    <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->
    </li>
    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
    <ul>
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
    <ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
    <ul class="right_side">
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->
    <ul class="right_side">
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  <table><tr><td>
  <![endif]-->
        <ul class="left_side">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>
    <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->
    </li>
    </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>

 

 

 

 

摘自懒人图库

追问

我去找了,一般来说给float:left;改成float:none;就行了,但是我改了没用

追答

想要什么效果 把你的代码都发过来我也许可以帮你试试

追问

我看不太懂啊,我的水平有限,学文科的被赶鸭子上架弄这个,你的邮箱是什么,我给你发过去看看吧

追答

是这样吗  是的话看附件

追问

谢谢,我那天弄出来了,就是加了一句语句
.nav ul li li

float:none;

就好了

参考技术B

你文件 发给我邮箱 我看下2355774315@qq.com


你发给我是什么啊  乱了

追问

已经发送了

追答

你发的都是什么啊 乱的不像样了
我也没有看到导航条啊 全部页面都看了

追问

这个就是学校给的模板,在里面的css文件里面有个style文件,是导航栏的格式,.nav后面的都是,我也不太懂啊

追答

我只帮你把下拉弄好

追问

就是那个下拉弄成纵向的下拉就行

追答

我直接给你个下拉菜单你自己去套吧  我给你套的 怕你看糊涂


记得采纳啊

追问

好吧,虽然我还是不懂,不过采纳你的吧~~你给我那个怎么套用我也不懂啊~~算了~~死就死了~~

追答

问题是你给我的那个网页是别人从动态页面直接拿过来给你的 你再给我 整个页面很乱 我都没法给你套 我强行套上去给你 你会看的更乱

本回答被提问者采纳
参考技术C 不是很明白你的意思,你的DIV是如何布局的呢。。追问

现在二级导航是这样横向展开的,我想把它改成纵向展开

将引导程序下拉更改为水平向右

【中文标题】将引导程序下拉更改为水平向右【英文标题】:change bootstrap drop down to drop horizontal right 【发布时间】:2013-04-30 19:54:24 【问题描述】:

我有一个下拉菜单,可在其下方打开一排图标(见图 1,名称和图片已被删除以保护隐私)

我正在尝试使此菜单在选择子项的右侧打开,而不是在其下方(参见图 2,我想要获取的内容。图像将在下拉菜单的右侧打开,而不是在下方它)

我当前的代码是:

<div class="span4">      
        <div class="btn-group">
  <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
  <h3>Choose Child</h3>
  <img id="mainIcons" src="boyStudent.png" >
  <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li>
        <div class="btn-group">
      <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
       <h5>A</h5>
       <img id="mainIcons" src="boyStudent.png" ></a>
       <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
       <h5>J</h5>
       <img id="mainIcons" src="girlStudent.png" ></a>
     </div>
    </li> 
  </ul>

我尝试使用以下示例,这有助于将下拉菜单向左推 how to make twitter bootstrap submenu to open on the left side? 但我想不出一种方法来使用它来做我想做的事情

谢谢

【问题讨论】:

【参考方案1】:

这看起来怎么样:-

Demo

Demo2 下拉子菜单。

<div class="span4">
    <div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
              <h3>Choose Child</h3>
              <img id="mainIcons" src="boyStudent.png" >
               <span class="right-caret right"></span>
         </a>

        <ul class="dropdown-menu rightMenu">
            <li>
                <div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
                   <h5>A</h5>
                   <img id="mainIcons" src="boyStudent.png" ></a>
 <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
                   <h5>J</h5>
                   <img id="mainIcons" src="girlStudent.png" ></a>

                </div>
            </li>
        </ul>
    </div>

css

   .rightMenu 
    position:relative;
    float:right;

.right-caret 
    
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid #000000;
    display: inline-block;
    height: 0;
    opacity: 1;
    vertical-align: top;
    width: 0;
    

.right

    float:right;

【讨论】:

没问题...我很高兴这就是您要找的东西。【参考方案2】:

只需以这种方式将“pull-right”类添加到&lt;ul class="dropdown-menu"&gt;...

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

【讨论】:

这将使子菜单在下面仍然打开,只是右对齐。【参考方案3】:

我只是将这个类添加到dropdown-menu

.rightMenu 
    position:absolute;
    float:right;
    top: 0;
    left: 160px;

而且完美对齐。

【讨论】:

另外,如果您不知道宽度,可以使用left: 100% 效果很好!【参考方案4】:

对于那些将来可能会找到此页面的人,现在的官方方法是将.dropdown-menu-right 类添加到您的下拉列表中。

【讨论】:

这是不正确的。 .dropdown-menu-right 使下拉菜单的右边缘与按钮的右边缘对齐。它不会将下拉菜单移动到按钮的一侧。

以上是关于css中导航栏子菜单横向下拉改为水平下拉的主要内容,如果未能解决你的问题,请参考以下文章

显示下拉子级别(autonav Concrete5)

显示下拉子级别(autonav Concrete5)

html 横向导航栏制作求助

js实例之制作多个下拉子菜单,实现下拉菜单显示和隐藏效果

如何进行活动菜单文本颜色更改导航下拉项子菜单? [复制]

HTML+CSS实现网页的导航栏和下拉菜单