html无序列表位置改变,如何设置子无序列表的位置？

我有一个导航栏与儿童无序列表嵌套在主导航栏项下。我的问题是在内部列表中，当我绝对定位，内部列表居中到页面，并且当我定位相对时，它与父列表内联定位。如何设置子无序列表的位置？

我想让第一个子项直接排列在它的父项下。

/* OUTER LIST STYLING */

div#navbar2 {

position:relative;

width: 100%;

border-top: solid #000 1px;

border-bottom: solid #546F8B 1px;

background-color: #546F8B;

}

div#navbar2 ul#navbar {

padding: 0;

margin: 10px 0;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

letter-spacing:1px;

color: #FFF;

white-space: nowrap;

}

div#navbar2 ul#navbar li {

margin: 0 2px;

list-style-type: none;

display: inline;

}

div#navbar2 li a {

text-decoration: none;

color: #fff;

padding: 10px 10px;

}

div#navbar2 li a:link {

color: #FFF:

}

div#navbar2 li a:visited {

color: #ffffff;

}

div#navbar2 li a:hover {

color: #000;

background-color: #FDFFC9;

}

/* INNER LIST STYLING */

div#navbar2 ul#navbar li ul.innerlist{

display: none;

color:#000;

}

div#navbar2 ul#navbar li ul.innerlist li{

color:#000;

}

div#navbar2 ul#navbar li:hover ul.innerlist {

position: absolute;

display: inline;

left: 0;

width: 100%;

margin: 40px 0 0px 0px;

padding: 0px;

color:#000;

}

div#navbar2 li.innerlist a {

text-decoration: none;

color: #000;

padding: 10px 10px;

}

div#navbar2 li.innerlist a:link {

color: #000:

}

div#navbar2 li.innerlist a:visited {

color: #000;

}

div#navbar2 li.innerlist a:hover {

color: #000;

background-color: #FDFFC9;

}

而且我的html：

About Rattletree
Calendar
Contact
- Booking
- press
The Band
- The Instruments
- The Players
Sights & Sounds
- Listen
- photos
- video
Workshops & Classes

感谢您的帮助！

2010-03-14

Joel

html无序列表位置改变,如何设置子无序列表的位置？相关推荐

QT：设置子窗口显示在父窗口的位置（绝对坐标）
QT:设置子窗口显示在父窗口的位置(绝对坐标) 故事背景:最近需要在父窗体修改按钮上弹出二次确认框,之前要么使用 QDesktopWidget,要么使用QCursor,来设置弹窗位置,但是这两种方式不 ...
flex布局怎么设置子元素大小_48张小图带你领略Flex 布局之美
前言最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢?? 48张图带你从0到1掌握flex布局方式. flex布局在某种程度上, ...
html语言创建无序列表的标记是6,HTML-表格-列表-结构标记-表单
1.表格 1.表格语法 1.标记 1.表格 2.行 --table row 3.单元格/列 --table data 练习: 1.创建一个4行4列的表格 2.在table标记中嵌套tr 3.在tr中嵌 ...
在html或dreamweaver中怎么设置无序项目列表符号的大小,Dreamweaver cs6项目列表的使用方法教程--系统之家...
Dreamweaver CS6怎么使用项目列表?Dreamweaver制作网页内容的时候,为了等级分明,需要使用项目列表,下面我们就来看看Dreamweaver项目列表的使用方法教程,需要的朋友可以参 ...
Go 知识点（11） — goroutine 泄露、设置子协程退出条件
1. 问题现象如果在开发过程中不考虑 goroutine 在什么时候能退出和控制 goroutine 生命期,就会造成 goroutine 失控或者泄露的情况 ,看示例代码: func consum ...
判断手机是否弹出键盘，改变了手机页面高度，对应inputStatus的状态改变相关控件的大小和位置
inputResizeBodyHeight() {// 判断手机是否弹出键盘,改变了手机页面高度,对应inputStatus的状态改变相关控件的大小和位置var oldHeight =document ...
wangEditor 菜单栏随页面滚动位置改变（吸顶）问题解决
wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决参考文章: (1)wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决 (2)https://www.cnblogs.com/ ...
Python学习笔记 -- 列表2: 遍历:嵌套列表, 将其中同位置的元素组成新的列表
#遍历:嵌套列表, 将其中同位置的元素组成新的列表 lsts = [[1,2,3], [4,5,6],[7,8,9],[10,11,12]]ret_x = [x for [x,y,z] in lsts ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...

html无序列表位置改变,如何设置子无序列表的位置？

html无序列表位置改变,如何设置子无序列表的位置？相关推荐

最新文章

热门文章