Question

我是HTML和CSS的新手，我一周前就开始了，现在我无法移动我用网站生成的导航栏。当我尝试使用margin-bottom或margin-top时，整个导航栏完全展开，但不会移动。我已经尝试使用position: absolute并尝试设置这样的帖子，但随后完全崩溃，但它似乎确实在移动。

HTML

 <div class="mainmenu">
 <ul> 
 <li><a class=current href="/index.html"> Home</a></li>
 <li><a  href="/lesmiserbales.html">Les Miserables</a></li>
 <li><a  href="/chicago.html">Chicago</a></li>
 <li><a  href="/shrek.html">Shrek</a></li>
 <li><a  href="/phtanomoftheopera.html">Phantom Of The Opera</a></li>
 <li><a  href="/wicked.html">Wicked</a></li>
 <li><a  href="tickets.html">Tickets</a></li> 
 <li><a  href="/htfs.html">How To Find Us</a></li>
 <li><a  href="/contactus.html">Contact Us</a></li>
 </ul>

CSS

.mainmenu a {

color: #ffffff;
border: 0px solid;
background-color: #302E2E;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
font: 12px Arial;
font-weight: normal;
text-decoration: none;
border-color: #000000;
display: block;
margin: 0px;
width: 100px;
text-align: left;
z-index:2;
position: absolute;
top: 50px;
}

.mainmenu a:visited { color: #ffffff; }

.mainmenu a:hover {
border: 0px solid;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
background-color: #333030;
border-color: #000000;
color: #000000;
font: 12px Arial;
font-weight: normal;
text-decoration: none;
text-align: left;
display: block;
width: 100px;

 }


 .mainmenu ul {
list-style:none;
margin: 0;
padding: 0;

 }

.mainmenu li {

margin: 0;
    padding-top: 1px;
padding-bottom: 1px;
}

任何帮助都会受到赞赏，如果我犯了一个菜鸟错误或者什么，那就很抱歉

Answer 1

从你的CSS中移除：position：absolute。

在你的css中添加以下内容：

.mainmenu {
margin-top: 200px;
}

Answer 2

您的CSS定位每个菜单项而不是菜单本身。从position: absolute;移除top: 50px;和.mainmenu a，并将其放入.mainmenu

的新声明中

.mainmenu a {
    ...
    /*
    GET RID OF THESE:
    position: absolute;
    top: 50px; 
    */
}

/* ADD THIS */
.mainmenu {        
    position: absolute;
    top: 50px;
}

就像我在this JSFiddle

中所做的那样

我的CSS导航栏不会向上或向下移动，并在我尝试时中断

2 个答案: