Question

我正在尝试下拉，但我不能让它垂直和阻止。这是HTML和CSS。所有这一切都是创建一个带子弹的链接列表。

@charset "utf-8";
/* CSS Document */

html {
background-color: #d9d9d9;
}
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
    position:relative;
}
#header {
    background:#06F;
    padding:0px;
}
#body {
    padding:10px;
    padding-bottom:60px;    /* Height of the 
     */
}
#footer {
    position:absolute;
    bottom:0;
    width:68%;
    text-align:center;          /* Height of the footer */
    }
/* other non-essential CSS */
#header p,
#header h1 {
    margin:0;
    padding:10px 0 0 10px;
}
#footer p {
    margin:-10px;
    padding:0px;
}
#wrapper {
width : 1025px;
margin : 0 auto;
}
#logo h3 {
float : right;
margin-right : 100px;
font-weight : bold;
color : #00adef;
height : 60px;
line-height : 60px;
}
#logo img {
outline : none;
border : none;
width: 500px;
padding-left: 275px;
}
#global-nav {
width: 121px;
float: left;
background: #e8eef4;
}
.global-subnav {
width: 121px;
background: #09C;
}

#global-nav a {
color: #034af3;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;   
text-indent: 10px;               
text-decoration:none;
font-weight: bold;
width: 100%;
}

#global-nav ul{
background: yellow;
padding: 0;
margin: 0;
}

#global-subnav ul{
background: orangered;
position: relative;
top: -10px;
left: 40px;
}

#global-nav li{
list-style: none;   
border-bottom: #5C87B2 solid;
border-width: 3px;
}

#global-nav ul ul li{
display:none;
}

#global-nav li:hover {
background: #fff;
}

#global-nav li:hover ul li{
display:block;
}
#rightnav {
float: left;
width: 220px;
 background: url(../images/bg.jpg) repeat-y;
margin-top: 0px;
margin-bottom: 0px
}
#innercontent {
margin-top : 50px;
}
#minorcontent {
padding : 5px;
width : 200px;
border : #00adef solid 2px;
margin-top : 20px;
float : right;
margin-right : 10px;
text-align : center;
}
#majorcontent {
width : auto;
font-size : 0.95em;
background-color: #FFF;
}
#majorcontent h4 {
height : 25px;
line-height : 25px;
padding-left : 10px;
background-color : #06F;
color: #FFBF00;
} 
#majorcontent p {
float : right;
width : 910px;
margin : -300px;
padding : 0;
white-space : pre;
}
#majorcontent img {
border : #ccc solid 4px;
}
.clear {
clear : both;
}
#NewFooter {
padding-top:0px;
text-align:right;
list-style:none;
}
#NewFooterInner {
width:auto;
margin:0 auto;
padding:20px 0 35px;
overflow:hidden;
}
#NewFooterInner .sectionFooter {
float:left;
width:600px;
padding-right:30px;
overflow:hidden;
margin-bottom:40px;
}
#NewFooterInner h2 {
font-size:20px;
border-bottom:1px solid #292929;
padding:7px 0 12px;
margin-bottom:2px;
color:#FFBF00;
}
#NewFooterInner .sectionFooter ul li {
padding:7px 0;
border-bottom:1px solid #292929;
color:#986123;
font-size:10px;
font-style:italic;
}
#NewFooterInner .sectionFooter ul li a {
text-decoration:none;
color:#515151;
font-size:13px;
font-style:normal;
}
#NewFooterInner #copyright {
clear:both;
padding-top:25px;
margin-top:15px;
position:relative;
}
#address {
text-align : center;
color : #000;
margin : 0 auto;
margin-top : 50px;
background-color : #fff;
padding : 20px;
height : 700px;
}
#about {
margin-top : 50px;
padding : 20px;
background-color : #fff;
}
#about h4 {
width : 500px;
border-bottom : 2px solid #09f;
}
#projvol {
background-color : #fff;
margin-top : 50px;
height : auto;
padding : 20px;
}
#projvol h4 {
width : 500px;
border-bottom : 2px solid #09f;
}
#projvol img {
margin-left: 25px;
padding : 0px 20px 20px;
}
#images {
margin-top : 10px;
margin-bottom : 100px;
}
#images h5 {
margin-left : 50px;
}
#images img {
border : #ccc solid 5px;
float : left;
margin-left : 50px;
margin-top : 30px;
}
#social {
position:absolute;
right:160px;
top:100px;
}

#social ul li {
float:left;
padding:0 5px;
width:50px;
 list-style: none outside none;
}

#social ul li a {
display:block;
height:47px;
width:47px;
}

#social ul li a img {
border:none;
margin-top:12px;
margin-left:8px;
}

CSS结束

HTML代码的开始

<body onload="info()">
<div id="container">
<div id="wrapper">
<div id="logo"><img src="images/logo.png" alt="" height="80" width="400" /></div>
<div id="header">
<div id="global-nav">
<ul>
<li><a href="#One">One</a>
<div class="global-subnav">
<ul>
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
</ul>
</div>
</li>
<li><a href="#Two">Two</a>
<div class="global-subnav">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</ul>
</div>
</li>
</ul>
</div> </div>

我删除了一些非必要的东西，所以忽略了引号。

Answer 1

你的html css标签后缺少“}”，所以没有使用任何css。添加它，您的代码将起作用。

下拉菜单纯CSS问题

1 个答案: